4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T577,

Card stack scroll

scroll

React ↗See the code →

01 · DESIGN

02 · PROCURE

03 · INSTALL

04 · REFURBISH

scroll in here — each chapter climbs onto the last

Say: "sections stack via 228" — panels pile up and settle as you scroll; the one beneath dims and recedes. The Apple keynote scroll.

53:T832,.card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); } .card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; } .card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; } .tags { display: flex; gap: .35rem; } .tags i { font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap; } .demo { min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center; background: var(--bg2); overflow: hidden; flex: 1; } .order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); } .order b { color: var(--txt); font-weight: 500; } .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; } .demo-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font: 400 .65rem var(--mono); color: var(--dim); pointer-events: none; z-index: 4; } .ai-card .num { color: var(--acc2) !important; } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; } /* ---------- next wave vol. 3 · 228–239 ---------- */ /* 228 card stack */ .stx-outer { width: 100%; height: 280px; overflow-y: auto; border-radius: 12px; background: #08080d; } .stx-track { height: 980px; } .stx-stick { position: sticky; top: 0; height: 280px; overflow: hidden; display: grid; place-items: center; } .stx-card { position: absolute; width: 74%; height: 62%; border-radius: 14px; display: grid; place-items: center; font: 600 .85rem var(--mono); letter-spacing: .08em; color: #0b0b10; box-shadow: 0 18px 40px rgba(0,0,0,.45); will-change: transform, filter; }54:Td5e,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // card stack scroll — Motion Menu import { useEffect, useRef } from "react"; const MARKUP = "

228

Card stack scroll

scroll

React \u2197 See the code \u2192

01 \u00b7 DESIGN

02 \u00b7 PROCURE

03 \u00b7 INSTALL

04 \u00b7 REFURBISH

scroll in here \u2014 each chapter climbs onto the last

Say: \"sections stack via 228\" \u2014 panels pile up and settle as you scroll; the one beneath dims and recedes. The Apple keynote scroll.

"; export function CardStackScroll() { const hostRef = useRef(null); useEffect(() => { const host = hostRef.current; if (!host) return; const $ = (s: string) => host.querySelector(s) as HTMLElement | null; let disposed = false; const cleanup: Array<() => void> = []; (async () => { if (disposed) return; try { /* ---- 228 · card stack scroll ---- */ { const outer = document.getElementById('stx-outer'); const cards = [...outer.querySelectorAll('.stx-card')]; const N = cards.length; const clamp01 = (x) => Math.max(0, Math.min(1, x)); const easeOut = (x) => 1 - Math.pow(1 - x, 3); const layout = () => { const max = outer.scrollHeight - outer.clientHeight; const prog = max ? outer.scrollTop / max : 0; cards.forEach((c, i) => { const enter = i === 0 ? 1 : clamp01(prog * (N - 1) - (i - 1)); const cover = i === N - 1 ? 0 : clamp01(prog * (N - 1) - i); c.style.transform = `translateY(${(1 - easeOut(enter)) * 115}%) scale(${1 - cover * 0.07})`; c.style.filter = `brightness(${1 - cover * 0.45})`; }); }; outer.addEventListener('scroll', layout, { passive: true }); layout(); } } catch (err: any) { console.warn("[motion-menu] card-stack-scroll failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default CardStackScroll; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/card-stack-scroll.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/card-stack-scroll","itemId":"@motion-menu/card-stack-scroll"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"motion-menu/card-stack-scroll.html","content":"$52","type":"registry:file","target":"motion-menu/card-stack-scroll.html"},{"path":"motion-menu/card-stack-scroll.css","content":"$53","type":"registry:file","target":"motion-menu/card-stack-scroll.css"},{"path":"components/motion-menu/card-stack-scroll.tsx","content":"$54","type":"registry:component"}]}]]}],"$L55"]}]

Card Stack Scroll

Installation

Files

motion-menu

components

Styles