{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"lenis-scrolltrigger-bridge","type":"registry:block","title":"Lenis + ScrollTrigger bridge","description":"\"the whole site scrolls like 01\" — inertia + eased wheel. Non-negotiable base layer.","author":"Motion Menu","categories":["role-chrome","global","feel","lenis"],"dependencies":["gsap","lenis"],"registryDependencies":[],"meta":{"number":"01","slug":"lenis-scrolltrigger-bridge","framework":"react","docs":"https://motion-menu-two.vercel.app/p/lenis-scrolltrigger-bridge.md"},"files":[{"path":"motion-menu/lenis-scrolltrigger-bridge.html","type":"registry:file","target":"motion-menu/lenis-scrolltrigger-bridge.html","content":"
\n
01

Lenis smooth scroll

Lenis
React ↗
\n
\n
\n
0.00
\n
live scroll velocity — this whole page runs on it
\n
\n
\n

Say: \"the whole site scrolls like 01\" — inertia + eased wheel. Non-negotiable base layer.

\n
"},{"path":"motion-menu/lenis-scrolltrigger-bridge.css","type":"registry:file","target":"motion-menu/lenis-scrolltrigger-bridge.css","content":".card {\n border: 1px solid var(--line); border-radius: 14px; background: var(--card);\n overflow: hidden; display: flex; flex-direction: column;\n }\n\n.card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }\n\n.card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; }\n\n.card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; }\n\n.tags { display: flex; gap: .35rem; }\n\n.tags i {\n font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim);\n border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap;\n }\n\n.demo {\n min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center;\n background: var(--bg2); overflow: hidden; flex: 1;\n }\n\n.order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); }\n\n.order b { color: var(--txt); font-weight: 500; }\n\n.demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; }\n\n/* 01 */\n .vel-readout { text-align: center; }\n\n.vel-readout .v { font: 600 4.5rem/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }\n\n.vel-readout .l { font-family: var(--mono); font-size: .7rem; color: var(--dim); letter-spacing: .25em; text-transform: uppercase; margin-top: .6rem; }\n\n.count-wrap .l { font-family: var(--mono); font-size: .7rem; color: var(--dim); letter-spacing: .25em; text-transform: uppercase; margin-top: .6rem; }\n\n.ai-card .num { color: var(--acc2) !important; }\n\n.demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }"},{"path":"components/motion-menu/lenis-scrolltrigger-bridge.tsx","type":"registry:component","content":"// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS.\n\"use client\";\n// Lenis + ScrollTrigger bridge — Motion Menu\nimport { useEffect, useRef } from \"react\";\n\nconst MARKUP = \"
\\n
01

Lenis smooth scroll

Lenis
React \\u2197
\\n
\\n
\\n
0.00
\\n
live scroll velocity \\u2014 this whole page runs on it
\\n
\\n
\\n

Say: \\\"the whole site scrolls like 01\\\" \\u2014 inertia + eased wheel. Non-negotiable base layer.

\\n
\";\n\nexport function LenisScrolltriggerBridge() {\n const hostRef = useRef(null);\n\n useEffect(() => {\n const host = hostRef.current;\n if (!host) return;\n const $ = (s: string) => host.querySelector(s) as HTMLElement | null;\n let disposed = false;\n const cleanup: Array<() => void> = [];\n\n (async () => {\n if (disposed) return;\n try {\n /* ============ 01 · Lenis + ScrollTrigger bridge ============ */\n const lenis = new Lenis({\n duration: 1.2,\n easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n smoothWheel: true,\n prevent: () => false,\n });\n lenis.on('scroll', ScrollTrigger.update);\n gsap.ticker.add((time) => lenis.raf(time * 1000));\n gsap.ticker.lagSmoothing(0);\n window.lenis = lenis; // programmatic scroll must go through lenis.scrollTo — 1.3 overrides window.scrollTo\n\n const velEl = document.getElementById('vel');\n lenis.on('scroll', ({ velocity }) => { velEl.textContent = Math.abs(velocity).toFixed(2); });\n } catch (err: any) {\n console.warn(\"[motion-menu] lenis-scrolltrigger-bridge failed to start:\", err);\n }\n })();\n\n return () => {\n disposed = true;\n cleanup.forEach((fn) => { try { fn(); } catch (_) {} });\n };\n }, []);\n\n return
;\n}\n\nexport default LenisScrolltriggerBridge;\n"}]}