{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sticky-scroll-stack","type":"registry:component","title":"Sticky Scroll Stack","description":"Cards that pin and pile up as you scroll: each one shrinks and dims as the next slides over it, with a progress index on the side that jumps between cards. Hand-written scroll logic: a built-in scroll box by default, or the page, or your own scroller.","dependencies":[],"registryDependencies":[],"files":[{"path":"components/viberdy/sticky-scroll-stack.tsx","content":"\"use client\";\n\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\n\nexport type StickyScrollStackCard = { title: string; body: string };\n\nexport type StickyScrollStackProps = {\n /** How much each card shrinks per card stacked on top of it (0.06 = 6%). */\n scaleStep?: number;\n /**\n * What scrolls. Leave it out and the component renders its own scroll box\n * (see height). Pass \"window\" to follow the page scroll, or the ref of your\n * own overflow-y-auto element.\n */\n scroller?: RefObject | \"window\";\n /** Height of the built-in scroll box (only used when scroller is not set). */\n height?: number | string;\n /** Card content. Falls back to four sample cards. */\n cards?: StickyScrollStackCard[];\n /** Where the first card pins, in px from the top of the scroll area. */\n top?: number;\n /** How far each stacked card sits below the one under it, in px. */\n stackOffset?: number;\n /** Space between cards before they stack, in px (more = longer scroll). */\n gap?: number;\n /** Card height: a number of px or any CSS length. */\n cardHeight?: number | string;\n /** Root width: the root is min(100%, width). Any CSS length. */\n width?: string;\n /** Show the progress index beside the stack. */\n showIndex?: boolean;\n className?: string;\n};\n\nconst DEFAULT_CARDS: StickyScrollStackCard[] = [\n { title: \"Design\", body: \"Sketch the shape before you touch a component.\" },\n { title: \"Build\", body: \"Wire it up with the real content, not lorem ipsum.\" },\n { title: \"Ship\", body: \"Small, reversible, boring deploys beat big risky ones.\" },\n { title: \"Measure\", body: \"Read the one number that moved, then decide what to cut.\" },\n];\n\nconst HUES = [212, 168, 38, 292];\nconst TWEEN_MS = 620;\nconst clamp01 = (n: number) => (n < 0 ? 0 : n > 1 ? 1 : n);\n\n/** A small line illustration per card (pure SVG, no assets). */\nfunction Art({ kind, hue }: { kind: number; hue: number }) {\n const ink = `hsl(${hue} 92% 74%)`;\n const wash = `hsl(${hue} 90% 60% / 0.14)`;\n const draw =\n \"[stroke-dasharray:1] [stroke-dashoffset:1] transition-[stroke-dashoffset] duration-[900ms] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[in=true]/card:[stroke-dashoffset:0] motion-reduce:transition-none\";\n const common = { fill: \"none\", stroke: ink, strokeWidth: 1.5, strokeLinecap: \"round\", strokeLinejoin: \"round\" } as const;\n return (\n \n {kind === 0 && (\n \n \n {[[24, 24], [136, 24], [24, 92], [136, 92]].map(([x, y]) => (\n \n ))}\n \n \n \n \n \n )}\n {kind === 1 && (\n \n {[44, 26, 8].map((dy, n) => (\n \n ))}\n \n \n \n )}\n {kind === 2 && (\n \n \n \n \n \n \n )}\n {kind === 3 && (\n \n {[22, 38, 30, 54, 70].map((h, n) => (\n \n ))}\n \n \n \n )}\n \n );\n}\n\nexport function StickyScrollStack({\n scaleStep = 0.06,\n scroller,\n cards = DEFAULT_CARDS,\n top = 16,\n stackOffset = 12,\n gap = 24,\n cardHeight = 192,\n width = \"18rem\",\n height = 420,\n showIndex = true,\n className = \"\",\n}: StickyScrollStackProps) {\n const boxRef = useRef(null);\n const trackRef = useRef(null);\n const columnRef = useRef(null);\n const spacerRef = useRef(null);\n const fillRef = useRef(null);\n const goRef = useRef<(i: number) => void>(() => {});\n const [active, setActive] = useState(0);\n const count = cards.length;\n\n useEffect(() => {\n const track = trackRef.current;\n const column = columnRef.current;\n if (!track || !column || count === 0) return;\n const el = scroller === \"window\" ? null : scroller ? scroller.current : boxRef.current;\n const target: HTMLElement | Window = el ?? window;\n const cardEls = Array.from(column.querySelectorAll(\"[data-sss-card]\"));\n const dims = cardEls.map((c) => c.querySelector(\"[data-sss-dim]\"));\n const reduced = () => window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n const by = (dy: number) => {\n if (el) el.scrollBy({ top: dy, behavior: \"instant\" });\n else window.scrollBy({ top: dy, behavior: \"instant\" });\n };\n\n let alive = true;\n let raf = 0;\n let tween = 0;\n let cardH = 0;\n\n // Distance of the track's top edge below the scrollport's top edge, in layout px\n // (library cards scale their previews, so divide the scale out).\n const trackOffset = () => {\n const r = track.getBoundingClientRect();\n const k = track.offsetWidth ? r.width / track.offsetWidth : 1;\n const portTop = el ? el.getBoundingClientRect().top + el.clientTop * k : 0;\n return (r.top - portTop) / k;\n };\n\n const measure = () => {\n cardH = cardEls[0]?.offsetHeight ?? 0;\n const portH = el ? el.clientHeight : window.innerHeight;\n const spacer = spacerRef.current;\n // Enough trailing room that the last card can finish pinning.\n if (spacer) spacer.style.height = `${Math.max(0, portH - (top + (count - 1) * stackOffset) - cardH) + 48}px`;\n };\n\n const update = () => {\n raf = 0;\n if (!alive || !cardH) return;\n const rel = trackOffset();\n const span = Math.max(1, cardH - stackOffset);\n const step = cardH + gap;\n // p[m]: how far card m+1 has travelled over card m (0 = not touching, 1 = pinned on it).\n const p: number[] = [];\n let total = 0;\n for (let m = 0; m < count - 1; m++) {\n const j = m + 1;\n const d = rel + j * step - (top + j * stackOffset);\n const v = clamp01(1 - d / span);\n p.push(v);\n total += v;\n }\n let depth = 0;\n for (let i = count - 1; i >= 0; i--) {\n depth += p[i] ?? 0;\n const c = cardEls[i];\n if (!c) continue;\n c.style.transform = depth > 0.0005 ? `scale(${Math.max(0.6, 1 - scaleStep * depth).toFixed(4)})` : \"\";\n const dim = dims[i];\n if (dim) dim.style.opacity = Math.min(0.6, depth * 0.2).toFixed(3);\n c.setAttribute(\"data-in\", i === 0 || (p[i - 1] ?? 0) > 0.35 ? \"true\" : \"false\");\n }\n let a = 0;\n for (const v of p) if (v >= 0.5) a++;\n setActive(a);\n if (fillRef.current) fillRef.current.style.transform = `scaleY(${count > 1 ? (total / (count - 1)).toFixed(4) : 0})`;\n };\n const schedule = () => {\n if (!raf) raf = requestAnimationFrame(update);\n };\n const remeasure = () => {\n measure();\n schedule();\n };\n\n goRef.current = (i: number) => {\n const delta = i * (cardH + gap) - top - i * stackOffset + trackOffset();\n cancelAnimationFrame(tween);\n if (Math.abs(delta) < 2) return;\n if (reduced()) {\n by(delta);\n return;\n }\n let t0 = -1;\n let done = 0;\n const tick = (ts: number) => {\n if (!alive) return;\n if (t0 < 0) t0 = ts;\n const t = Math.min(1, (ts - t0) / TWEEN_MS);\n const want = delta * (1 - Math.pow(1 - t, 3));\n by(want - done);\n done = want;\n if (t < 1) tween = requestAnimationFrame(tick);\n };\n tween = requestAnimationFrame(tick);\n };\n\n const stopTween = () => cancelAnimationFrame(tween);\n measure();\n schedule();\n target.addEventListener(\"scroll\", schedule, { passive: true });\n target.addEventListener(\"wheel\", stopTween, { passive: true });\n target.addEventListener(\"touchstart\", stopTween, { passive: true });\n window.addEventListener(\"resize\", remeasure);\n const ro = new ResizeObserver(remeasure);\n ro.observe(track);\n if (el) ro.observe(el);\n return () => {\n alive = false;\n cancelAnimationFrame(raf);\n cancelAnimationFrame(tween);\n target.removeEventListener(\"scroll\", schedule);\n target.removeEventListener(\"wheel\", stopTween);\n target.removeEventListener(\"touchstart\", stopTween);\n window.removeEventListener(\"resize\", remeasure);\n ro.disconnect();\n goRef.current = () => {};\n };\n }, [scroller, count, top, stackOffset, gap, scaleStep, cardHeight]);\n\n const own = scroller === undefined;\n const body = (\n \n
\n {cards.map((card, i) => {\n const hue = HUES[i % HUES.length] ?? 212;\n return (\n \n
\n
\n
\n
\n {String(i + 1).padStart(2, \"0\")}\n \n {String(count).padStart(2, \"0\")}\n
\n
\n

{card.title}

\n

\n {card.body}\n

\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n \n );\n })}\n
\n
\n {showIndex && count > 1 && (\n \n )}\n
\n );\n return (\n
\n {own ? (\n \n {body}\n
\n ) : (\n body\n )}\n
\n );\n}\n","type":"registry:component","target":"components/viberdy/sticky-scroll-stack.tsx"}],"meta":{"tier":"free","tags":["scroll","sticky","stack","cards","scrollytelling","progress","pinned"],"href":"https://viberdy.dev/library/sticky-scroll-stack","aiPrompt":"Create a React + Tailwind (v4) component named StickyScrollStack. React only: no framer-motion, no other dependency. One \"use client\" file.\n\nBehaviour: a column of cards that each pin with position: sticky near the top of the scroll area and pile up as you scroll. Card i sticks at top + i * stackOffset (defaults 16 and 12 px), so each buried card peeks 12px above the one on it. The cards are siblings in one column, each with marginBottom = gap (default 24px) except the last, followed by a trailing spacer so the last card can finish pinning: spacer height = max(0, scrollportHeight - (top + (n-1) * stackOffset) - cardHeight) + 48px.\n\nProps: scaleStep (0.06), scroller (undefined = render a built-in scroll box: overflow-y-auto rounded-2xl with a 1px rgba(128,128,128,0.28) border, height prop default 420, root width min(100%, 18rem); \"window\" = follow the page scroll; or a RefObject to an external scroller), cards ({title, body}[], default four sample cards: Design, Build, Ship, Measure), height (420), top (16), stackOffset (12), gap (24), cardHeight (px number or CSS length, default 192), width (CSS length, default \"18rem\"; the root is min(100%, width) and is an @container), showIndex (true), className.\n\nScroll maths (hand written, no library): attach one passive scroll listener to the scroller element (or window), a window resize listener and a ResizeObserver on the track (and scroller). Coalesce with one requestAnimationFrame. Each frame: rel = track.getBoundingClientRect().top minus the scroller's top (0 for the window), divided by the scale factor rect.width / offsetWidth (previews may be transform-scaled). For m = 0..n-2 let j = m+1, d = rel + j * (cardH + gap) - (top + j * stackOffset), p[m] = clamp(1 - d / (cardH - stackOffset), 0, 1): how far card j has travelled over card m. depth_i = sum of p[m] for m >= i. Card i gets transform scale(max(0.6, 1 - scaleStep * depth_i)) with transform-origin 50% 0%, and a black overlay with opacity min(0.6, depth_i * 0.2). Write these straight to the DOM through refs (no setState per scroll). A card is \"in\" (data-in=true) when it is the first or p[i-1] > 0.35; \"in\" draws its illustration. Only the active index (count of p >= 0.5) goes through useState.\n\nCards: 20px radius, background linear-gradient(180deg, #16181d, #0c0d10), 1px border rgba(255,255,255,0.09) set inline, inset top highlight plus a shadow cast upward onto the card below, a faint radial wash in the card's hue at the top-left. Hues cycle 212, 168, 38, 292. Content: mono step counter \"01 -- 04\" (hue colour, then 40% white), title 22px (30px at the @md container breakpoint) semibold with -0.02em tracking, body 13px (15px at @md) at 60% white, max 34ch. A 160x120 SVG line illustration per card (selection frame with handles, stacked layers, a progress ring with a rising arrow, bars with a trend line); its accent path animates stroke-dashoffset 1 to 0 over 900ms cubic-bezier(0.22,1,0.36,1) when the card becomes \"in\". Wide containers (@md, 448px) show the illustration on the right (38% width, max 220px); narrower ones show a 72px version in the top-right corner.\n\nProgress index (when showIndex and 2+ cards): a nav (aria-label \"Stack progress\") in a second grid column, sticky at the same top. One button per card, 40x40px minimum, with an 8px dot (30% opacity, 100% once passed, scale 1.5 for the active one), an uppercase 11px label from @md up, aria-current=\"step\" on the active one, aria-label \"Go to card N: title\". A 1px rail through the dot centres whose fill scaleY follows total progress. Colours inherit currentColor so the index works on light and dark pages. Click scrolls so that card is pinned in front: target = i * (cardH + gap) - top - i * stackOffset relative to the track, eased with a 620ms ease-out-cubic tween driven by requestAnimationFrame using scrollBy({ behavior: \"instant\" }) (the site may set smooth scrolling); a wheel or touchstart cancels it. Focus ring: focus-visible:!outline-2 with currentColor.\n\nAccessibility and fallback: real articles and headings in order, decorative art aria-hidden, prefers-reduced-motion makes index jumps instant and removes the stroke transition (scroll-linked scaling stays). Without JavaScript the cards still stack with plain sticky positioning.","license":"https://viberdy.dev/license"}}