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