Hoodquidity: liquidity campaigns for Robinhood Chain stock token markets

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>
2026-07-11 08:31:01 +04:00 · 2026-07-11 08:31:01 +04:00 · dba2811447
commit dba2811447
1194 changed files with 206422 additions and 0 deletions
--- a/apps/web/src/components/backdrop/DepthLadder.tsx
+++ b/apps/web/src/components/backdrop/DepthLadder.tsx
@ -0,0 +1,71 @@
+/**
+ * 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>
+  );
+}