{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "grid-cascade",
"type": "registry:block",
"title": "Grid Cascade",
"description": "A three-up testimonial grid that pages a whole set at a time — the current cards drop away on a stagger, then the next set cascades in from above, so the two never overlap mid-flight.",
"dependencies": [
"gsap",
"@gsap/react"
],
"registryDependencies": [],
"cssVars": {
"theme": {}
},
"files": [
{
"path": "components/tweenui/grid-cascade.tsx",
"type": "registry:component",
"target": "components/tweenui/grid-cascade.tsx",
"content": "'use client';\n\nimport {\n useCallback,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react';\nimport { useGSAP } from '@gsap/react';\nimport gsap from 'gsap';\nimport { cn } from '@/lib/utils';\n\ngsap.registerPlugin(useGSAP);\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst ENTER = { y: -22, duration: 0.6, stagger: 0.08 };\nconst LEAVE = { y: 14, duration: 0.28, stagger: 0.05 };\n\nfunction StarIcon({ className }: { className?: string }) {\n return (\n \n );\n}\n\nfunction XMark({ className }: { className?: string }) {\n return (\n \n );\n}\n\nfunction ChevronIcon({\n direction,\n className,\n}: {\n direction: 'left' | 'right';\n className?: string;\n}) {\n return (\n \n );\n}\n\nexport interface GridCascadeItem {\n /** Reviewer name. */\n name: string;\n /** Role shown under the name. */\n position: string;\n /** The quote. Clamped to three lines so a page stays level. */\n review: string;\n /** Avatar URL. */\n image: string;\n /** Alt text for the avatar. Falls back to `name`. */\n imageAlt?: string;\n /** Profile the corner button opens. Omit it and no button renders. */\n link?: string;\n}\n\nexport interface GridCascadeProps extends Omit, 'title'> {\n /** Section heading. */\n title?: ReactNode;\n /** Supporting line under the heading. */\n description?: string;\n /** Quotes to page through. */\n items?: GridCascadeItem[];\n /** Cards shown at once. The grid is built for three. */\n perPage?: number;\n /** Wrap from the last page back to the first. */\n loop?: boolean;\n}\n\nconst DEFAULT_TITLE = 'What our users say';\n\nconst AVATAR = (id: string) => `https://images.unsplash.com/${id}?w=96&h=96&fit=crop&crop=faces`;\n\nconst DEFAULT_ITEMS: GridCascadeItem[] = [\n {\n name: 'Maya Collins',\n position: 'Head of Operations',\n review:\n 'We replaced four tools with one workflow, and the team shipped its first release two weeks early. Nobody has asked to go back.',\n image: AVATAR('photo-1494790108377-be9c29b29330'),\n link: '#',\n },\n {\n name: 'Ethan Brooks',\n position: 'President of Sales',\n review:\n 'Reporting used to take a full day each month. Now it runs itself and lands in our inbox before standup.',\n image: AVATAR('photo-1519085360753-af0119f7cbe7'),\n link: '#',\n },\n {\n name: 'Liam Harper',\n position: 'Product Lead',\n review:\n 'Onboarding took an afternoon, not a quarter. Every handoff is visible, so nothing slips between design and build.',\n image: AVATAR('photo-1507003211169-0a1dd7228f2d'),\n link: '#',\n },\n {\n name: 'Ava Sinclair',\n position: 'Marketing Head',\n review:\n 'Support tickets dropped by a third in one month. Customers find their answers before they ever reach us.',\n image: AVATAR('photo-1534528741775-53994a69daeb'),\n link: '#',\n },\n {\n name: 'Noah Bennett',\n position: 'Engineering Manager',\n review:\n 'The API paid for the whole plan in a week. We wired it into our release pipeline and stopped thinking about it.',\n image: AVATAR('photo-1500648767791-00dcc994a43e'),\n link: '#',\n },\n {\n name: 'Zoe Mitchell',\n position: 'Creative Director',\n review:\n 'It looks like our brand out of the box, which never happens. The team stopped asking me to review every asset.',\n image: AVATAR('photo-1438761681033-6461ffad8d80'),\n link: '#',\n },\n];\n\nexport default function GridCascade({\n title = DEFAULT_TITLE,\n description,\n items = DEFAULT_ITEMS,\n perPage = 3,\n loop = true,\n className,\n ...props\n}: GridCascadeProps) {\n const rootRef = useRef(null);\n const [page, setPage] = useState(0);\n const busy = useRef(false);\n\n const pageCount = Math.max(1, Math.ceil(items.length / perPage));\n const visible = items.slice(page * perPage, page * perPage + perPage);\n\n // Only the current page is rendered, so the incoming trio animates on mount\n // rather than being toggled with `display: none`.\n useGSAP(\n () => {\n if (prefersReducedMotion()) return;\n gsap.fromTo(\n '[data-testimonial-card]',\n { autoAlpha: 0, y: ENTER.y },\n {\n autoAlpha: 1,\n y: 0,\n duration: ENTER.duration,\n ease: 'power3.out',\n stagger: ENTER.stagger,\n clearProps: 'transform,opacity,visibility',\n }\n );\n },\n { scope: rootRef, dependencies: [page, items] }\n );\n\n const goTo = useCallback(\n (next: number) => {\n if (busy.current || next === page || pageCount < 2) return;\n\n if (prefersReducedMotion()) {\n setPage(next);\n return;\n }\n\n busy.current = true;\n // Drop the current trio away first, so the two sets never overlap.\n gsap.to(gsap.utils.toArray('[data-testimonial-card]', rootRef.current), {\n autoAlpha: 0,\n y: LEAVE.y,\n duration: LEAVE.duration,\n ease: 'power2.in',\n stagger: LEAVE.stagger,\n onComplete: () => {\n setPage(next);\n busy.current = false;\n },\n });\n },\n [page, pageCount]\n );\n\n const step = (delta: number) => {\n const next = page + delta;\n if (next < 0) return loop ? goTo(pageCount - 1) : undefined;\n if (next >= pageCount) return loop ? goTo(0) : undefined;\n return goTo(next);\n };\n\n return (\n \n
\n )}\n \n \n );\n}\n"
}
],
"docs": "Docs, props and examples: https://tween-ui.vercel.app/block/grid-cascade\nThe sample content loads images from images.unsplash.com. Replace them with your own before shipping."
}