# Word Burst Cards
URL: https://remocn.dev/docs/logo-stings/word-burst-cards

A headline bursts word by word into floating cards and photos, then the logo and caption land.

- Install: `npx shadcn@latest add @remocn/word-burst-cards`
- Vibe: premium
- Natural length: 80f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/word-burst-cards
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WordBurstCards } from "@/components/remocn/word-burst-cards";

const WordBurstCardsScene = () => (
  <WordBurstCards
    line="Every screen you built, in motion"
    caption="Launch films from your product"
    images={["https://example.com/a.jpg", "https://example.com/b.jpg"]}
  />
);

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

The headline sits centred, then its words burst outward while cards and photos spread through 3D space; the logo and caption land last. Pass `line`, `caption` and `images` (your own URLs; the default photos only exist in the Remocn repo). `reverse` plays the whole timeline backwards and `showLogo` toggles the mark. Ships light and dark.

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 |
|---|---|---|---|
| `line` | `string` | `"Every screen you built, in motion"` | Headline whose words burst outward. |
| `caption` | `string` | `"Launch films from your product"` | Small line that appears under the logo at the end. |
| `images` | `string[]` | `DEFAULT_IMAGES` | Photos used on the cards; URLs or staticFile paths. |
| `accent` | `string` | — | Accent colour for the mark and highlights; any CSS colour. |
| `ink` | `string` | — | Text colour; overrides the theme default. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `ground` | `GshPresetId` | — | Shader preset id for the gradients.sh background ground. |
| `groundParams` | `Partial<GradientParams>` | — | Custom shader parameters for the ground, used instead of the theme default. |
| `reverse` | `boolean` | `false` | Play the timeline backwards so the burst collapses. |
| `burstAt` | `number` | `BEAT.burst` | Frame at which the burst starts; the logo and caption shift with it. |
| `showLogo` | `boolean` | `true` | Show the Remocn logo and caption after the burst. |
| `seed` | `number` | `3` | Number that changes the random card layout. |

## Use when
- An everything-you-built beat where many screens or photos explode outward from a line of text.
- A feature roundup that should feel like a burst of product shots.
- A closer where the logo and a caption settle after the cards fly past.

## Don't use when
- A handful of photos should gather beside the logo instead — use `photo-halo`.
- You have no imagery and just need a text reveal — use `spell-out`.
- You want a quiet logo end card — use `first-light`.