# Quote Hero
URL: https://remocn.dev/docs/typography/quote-hero

A big pull quote with an underlined italic phrase and a named founder attribution

- Install: `npx shadcn@latest add @remocn/quote-hero`
- Vibe: premium
- Natural length: 246f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/quote-hero
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { QuoteHero } from "@/components/remocn/quote-hero";

const QuoteHeroScene = () => <QuoteHero quoteDuration={120} quotes={[{ quote: "We shipped our launch video in an afternoon.", highlight: "in an afternoon", name: "Maya Chen", role: "Head of Design", company: "Kitebase" }]} />;

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

A big serif pull quote rises line by line beside an oversized opening mark, then the author row settles in and a marker sweeps behind the highlighted phrase before the quote exits and the next one plays. Pass `quotes` (quote, highlight, name, role, company, optional avatar) and `quoteDuration`; the total length is 6 plus quotes times `quoteDuration`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `quotes` | `Quote[]` | `DEFAULT_QUOTES` | Testimonials, each with quote, highlight, name, role, company and avatar. |
| `quoteDuration` | `number` | `120` | Frames each quote owns, including its exit. |
| `accent` | `string` | `"#3B5BFD"` | Color of the highlighter sweep behind the key phrase. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A customer testimonial in a launch or case-study video, with the key phrase marked.
- A rotation of two or three short quotes from different people, each with a name and role.
- A trust beat near the end of a product video, before the call to action.

## Don't use when
- The quote is a joke with a punchline attribution — use `deadpan-box`.
- You want a social post card style testimonial — use `testimonial-stack`.
- The quote should change in place between versions — use `changed-mind`.