dba2811447
Full build: Vite/React acid-terminal frontend (BEARER design system, Panchang/Sentient/Fragment Mono, neon layer, palette audit script), HoodquidityVaults Foundry contracts (single+dual deposits via Chainlink-style feeds, hybrid exit, 10% platform fee, boost, Genesis LP), Reown AppKit wallet connect with Robinhood Chain testnet (46630), live data from Dexscreener and onchain reads, partner portal, design-sync setup for claude.ai/design. Deploy: static via Forgejo Actions platform, BUILD_DIR=apps/web/dist (.env). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
/**
|
|
* Hero visual: an order-book depth ladder filling up, pure SVG animation.
|
|
* Bids in mint grow from the right, asks in white grow from the left,
|
|
* meeting around the spread line.
|
|
*/
|
|
const BIDS = [86, 64, 74, 52, 60, 42, 30];
|
|
const ASKS = [80, 58, 68, 48, 54, 38, 26];
|
|
|
|
export function DepthLadder() {
|
|
return (
|
|
<svg viewBox="0 0 420 380" className="h-full w-full" aria-hidden>
|
|
<defs>
|
|
<linearGradient id="dl-bid" x1="1" y1="0" x2="0" y2="0">
|
|
<stop offset="0%" stopColor="#c8ff00" stopOpacity="0.9" />
|
|
<stop offset="100%" stopColor="#c8ff00" stopOpacity="0.15" />
|
|
</linearGradient>
|
|
<linearGradient id="dl-ask" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="#f2f2f2" stopOpacity="0.55" />
|
|
<stop offset="100%" stopColor="#f2f2f2" stopOpacity="0.08" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{/* spread line */}
|
|
<line x1="210" y1="10" x2="210" y2="370" stroke="#3d3d3d" strokeWidth="1" strokeDasharray="3 6" />
|
|
|
|
{BIDS.map((w, i) => {
|
|
const y = 24 + i * 50;
|
|
const bid = w * 2;
|
|
const ask = ASKS[i] * 2;
|
|
return (
|
|
<g key={i}>
|
|
<rect x={210 - bid} y={y} width={bid} height="22" fill="url(#dl-bid)">
|
|
<animate
|
|
attributeName="width"
|
|
values={`${bid * 0.55};${bid};${bid * 0.75};${bid}`}
|
|
dur={`${5 + i * 0.9}s`}
|
|
repeatCount="indefinite"
|
|
calcMode="spline"
|
|
keySplines="0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1"
|
|
/>
|
|
<animate
|
|
attributeName="x"
|
|
values={`${210 - bid * 0.55};${210 - bid};${210 - bid * 0.75};${210 - bid}`}
|
|
dur={`${5 + i * 0.9}s`}
|
|
repeatCount="indefinite"
|
|
calcMode="spline"
|
|
keySplines="0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1"
|
|
/>
|
|
</rect>
|
|
<rect x="212" y={y + 26} width={ask} height="22" fill="url(#dl-ask)">
|
|
<animate
|
|
attributeName="width"
|
|
values={`${ask};${ask * 0.6};${ask * 0.85};${ask}`}
|
|
dur={`${6 + i * 0.7}s`}
|
|
repeatCount="indefinite"
|
|
calcMode="spline"
|
|
keySplines="0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1"
|
|
/>
|
|
</rect>
|
|
</g>
|
|
);
|
|
})}
|
|
|
|
{/* price tick riding the spread */}
|
|
<circle cx="210" cy="190" r="4" fill="#e9ffb3">
|
|
<animate attributeName="cy" values="60;320;140;260;60" dur="14s" repeatCount="indefinite" />
|
|
<animate attributeName="opacity" values="1;0.5;1;0.6;1" dur="14s" repeatCount="indefinite" />
|
|
</circle>
|
|
</svg>
|
|
);
|
|
}
|