# Sticky Stacking Cards That Scale Down and Dim A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/sticky-stacking-cards-that-scale-down-and-dim). - Page, with a live preview: https://shadcn.exchange/r/weinc/sticky-stacking-cards-that-scale-down-and-dim - Screenshot: https://shadcn.exchange/shot/weinc/sticky-stacking-cards-that-scale-down-and-dim/light.png - Registry item: https://we.inc/r/sticky-stacking-cards-that-scale-down-and-dim.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/sticky-stacking-cards-that-scale-down-and-dim.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/sticky-stacking-cards-that-scale-down-and-dim.tsx` ```tsx import { useEffect, useRef } from "react"; import { useReducedMotion } from "framer-motion"; const loaves = [ { name: "Country white", note: "Long cold proof, blistered crust, a soft open crumb that holds butter.", price: "$9", tags: ["Bakes daily", "780 g"], bg: "#f7f1e6", ink: "#2b2119", chip: "#e6d9c3" }, { name: "Rye and caraway", note: "Dense, dark and a little sour. Slice it thin and it keeps for a week.", price: "$11", tags: ["Thu to Sat", "900 g"], bg: "#b4532e", ink: "#fff8f0", chip: "#93401f" }, { name: "Seeded spelt", note: "Toasted sunflower, linseed and pumpkin folded through a spelt dough.", price: "$10", tags: ["Bakes daily", "750 g"], bg: "#5f6f4f", ink: "#f6f3ea", chip: "#4b5a3d" }, { name: "Olive fougasse", note: "Leaf-cut flatbread with green olives and thyme, best still warm.", price: "$7", tags: ["Weekends", "Tear and share"], bg: "#2b2420", ink: "#f3ebe0", chip: "#463b33" }, ]; const SCALE_STEP = 0.06; // how much smaller each covering card makes the ones beneath const DIM_STEP = 0.24; // how much darker each covering card makes the ones beneath const AUTO_PX_PER_SEC = 28; // gentle demo scroll speed; 0 turns it off export default function StickyStackingCardsThatScaleDownAndDim() { const reduce = useReducedMotion(); const boxRef = useRef(null); useEffect(() => { const box = boxRef.current; if (!box || reduce) return; const cards = Array.from(box.querySelectorAll(".w4scd-card")); const faces = cards.map((c) => c.querySelector(".w4scd-face")!); const shades = cards.map((c) => c.querySelector(".w4scd-shade")!); let raf = 0; const paint = () => { raf = 0; const top = box.getBoundingClientRect().top; const cover = cards.map((c) => { const d = c.getBoundingClientRect().top - top - parseFloat(getComputedStyle(c).top); return Math.min(1, Math.max(0, 1 - d / c.offsetHeight)); }); cards.forEach((_, i) => { let depth = 0; for (let j = i + 1; j < cards.length; j++) depth += cover[j]; faces[i].style.transform = `scale(${1 - SCALE_STEP * depth})`; shades[i].style.opacity = String(Math.min(0.6, DIM_STEP * depth)); }); box.toggleAttribute("data-scrolled", box.scrollTop > 8); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(paint); }; box.addEventListener("scroll", onScroll, { passive: true }); paint(); // Demo scroll until the visitor takes over; paused while off screen. let demo = 0, last = 0, pos = box.scrollTop, seen = true, done = !AUTO_PX_PER_SEC; const step = (now: number) => { const dt = last ? Math.min(now - last, 50) : 0; last = now; pos += (AUTO_PX_PER_SEC * dt) / 1000; if (pos >= box.scrollHeight - box.clientHeight) { done = true; demo = 0; return; } box.scrollTop = pos; demo = requestAnimationFrame(step); }; const start = () => { if (!done && seen && !demo) { last = 0; demo = requestAnimationFrame(step); } }; const stop = () => { cancelAnimationFrame(demo); demo = 0; }; const handOver = () => { done = true; stop(); }; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; if (seen) start(); else stop(); }); io.observe(box); const evs = ["wheel", "touchstart", "pointerdown", "keydown"] as const; evs.forEach((ev) => box.addEventListener(ev, handOver, { passive: true })); start(); return () => { stop(); cancelAnimationFrame(raf); io.disconnect(); box.removeEventListener("scroll", onScroll); evs.forEach((ev) => box.removeEventListener(ev, handOver)); }; }, [reduce]); return (

Larchmont Bakehouse

Four loaves on the shelf this week

Each one is mixed by hand the afternoon before and baked before the shop opens at seven.

Reserve a loaf

No. {String(i + 1).padStart(2, "0")} {l.price}

{l.name}

{l.note}

{l.tags.map((t) => ( {t} ))}

); } ```

Four loaves on the shelf this week

{l.name}