# Testimonial Cards Stacking With Alternating Tilt 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/testimonial-cards-stacking-with-alternating-tilt). - Page, with a live preview: https://shadcn.exchange/r/weinc/testimonial-cards-stacking-with-alternating-tilt - Screenshot: https://shadcn.exchange/shot/weinc/testimonial-cards-stacking-with-alternating-tilt/light.png - Registry item: https://we.inc/r/testimonial-cards-stacking-with-alternating-tilt.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/testimonial-cards-stacking-with-alternating-tilt.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/testimonial-cards-stacking-with-alternating-tilt.tsx` ```tsx import { useEffect, useRef } from "react"; import { useReducedMotion } from "framer-motion"; const reviews = [ { quote: "They planted our north bed with ferns and hellebores I would never have picked. Two winters on, it is the part of the garden people ask about.", name: "Imogen Barlow", role: "Garden in Hebden Bridge", initials: "IB", tone: "#c9d8b6" }, { quote: "The hedge plan came with a watering note pinned to every whip. Not one plant lost in a dry summer, which I did not think possible on our clay.", name: "Dev Rathore", role: "Allotment holder", initials: "DR", tone: "#e6cfa6" }, { quote: "I asked for low upkeep and they listened. The meadow strip gets one cut in September and looks better every year it is left alone.", name: "Ruth Ellery", role: "Cottage garden, Malton", initials: "RE", tone: "#d9b9a3" }, { quote: "Clear prices, a day booked and kept, and they swept the path before leaving. Small things, but they are why we called them back.", name: "Tomas Lindqvist", role: "Courtyard in York", initials: "TL", tone: "#bcd2cf" }, ]; const TILT_REST = 1.6; // degrees each card keeps once settled (alternates left and right) const TILT_ARRIVE = 3.5; // extra tilt while a card is still sliding in const SCALE_STEP = 0.045; // shrink per card on top const AUTO_PX_PER_SEC = 30; // demo scroll speed; 0 turns it off export default function TestimonialCardsStackingWithAlternatingTilt() { const reduce = useReducedMotion(); const boxRef = useRef(null); useEffect(() => { const box = boxRef.current; if (!box || reduce) return; const cards = Array.from(box.querySelectorAll(".w4tst-card")); 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((c, i) => { let depth = 0; for (let j = i + 1; j < cards.length; j++) depth += cover[j]; const turn = (i % 2 ? 1 : -1) * (TILT_REST + TILT_ARRIVE * (1 - cover[i])); (c.firstElementChild as HTMLElement).style.transform = `rotate(${turn}deg) scale(${1 - SCALE_STEP * depth})`; c.querySelector(".w4tst-shade")!.style.opacity = String(Math.min(0.5, 0.22 * depth)); }); box.toggleAttribute("data-scrolled", box.scrollTop > 8); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(paint); }; box.addEventListener("scroll", onScroll, { passive: true }); paint(); 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 (

Brackenfold Gardens

Notes from the people whose gardens we planted

{r.quote}

{r.name}{r.role}

Book a garden visit

); } ```