# Testimonial Stack
URL: https://remocn.dev/docs/social/testimonial-stack

Social-post testimonial cards fly in one by one and pile up, with a highlighted line on each

- Install: `npx shadcn@latest add @remocn/testimonial-stack`
- Vibe: social
- Natural length: 168f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/testimonial-stack
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TestimonialStack } from "@/components/remocn/testimonial-stack";

const TestimonialStackScene = () => (
  <TestimonialStack
    quotes={[
      {
        text: "We shipped our launch video in an afternoon.",
        highlight: "in an afternoon",
        name: "Maya Chen",
        role: "Founder, Kitebase",
        handle: "@mayachen",
        source: "x",
      },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="TestimonialStack"
    component={TestimonialStackScene}
    durationInFrames={236}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Each quote card slides in from alternating sides and lands on a growing, slightly rotated pile; the highlighted phrase is marked inside the text. With `ending="fan"` the pile then spreads into a grid under a `title` (the fan adds about 60 frames). Pass `quotes` with name, role and optional handle, stars and highlight. Ships light and dark via `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `quotes` | `TestimonialQuote[]` | `DEFAULT_QUOTES` | Quote cards: text, name, role, plus optional highlight, handle, stars, date, source. |
| `ending` | `"pile" \| "fan"` | `"pile"` | How the stack ends: stay as a pile, or fan out into a grid. |
| `title` | `string` | `"What builders said after launch week"` | Heading shown over the grid when `ending` is "fan". |
| `theme` | `"light" \| "dark"` | `"light"` | Color scheme. Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `framesPerQuote` | `number` | `50` | Frames between each card landing. |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the animated ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground shader parameters. |
| `accent` | `string` | — | Accepted for API consistency; the color comes from the ground. |

## Use when
- Social proof for a launch video: three or four customer quotes with name, role and handle.
- A beat where reviews arrive in sequence and a key phrase in each is highlighted.
- Ending on a wall of every quote under a title, using `ending="fan"`.

## Don't use when
- You want one big quote as the hero line — use `quote-hero`.
- The proof is a single rating number with reviews scrolling by — use `rating-laurel`.
- The testimonial is one social account card with follower counts — use `x-follow-card`.