# Story Dip
URL: https://remocn.dev/docs/typography/story-dip

Three timestamped story lines enter in columns: a snag drops low and dims, then the resolution climbs and lights up.

- Install: `npx shadcn@latest add @remocn/story-dip`
- Vibe: paper
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/story-dip
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StoryDip } from "@/components/remocn/story-dip";

const StoryDipScene = () => (
  <StoryDip
    setup={{ slug: "Wednesday, 4:00 PM", line: "The film was one render away." }}
    snag={{ slug: "4:05 PM", line: "Then the client sent a new logo." }}
    resolution={{ slug: "4:15 PM", line: "One prop later, every scene had it." }}
  />
);

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

Three timestamped lines enter side by side, or in two columns on a tall frame. The setup appears first, the snag then drops lower and dims, and the resolution rises to the top and turns accent-colored. Pass `setup`, `snag` and `resolution` as `{ slug, line }`, where `slug` is the small timestamp. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `setup` | `{ slug: string; line: string }` | `DEFAULT_SETUP` | First beat: a small timestamp and the line. |
| `snag` | `{ slug: string; line: string }` | `DEFAULT_SNAG` | Second beat; it drops lower and dims. |
| `resolution` | `{ slug: string; line: string }` | `DEFAULT_RESOLUTION` | Third beat; it climbs to the top in the accent color. |
| `accent` | `string` | — | Color of the timestamps and the lit resolution line. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A short anecdote in three beats, such as setup, a snag and the fix, each with its own timestamp.
- A customer or founder story where the middle line should visibly dip before the answer rises.

## Don't use when
- The story is a night-to-morning arc told over changing grounds — use `overnight`.
- You only need one timestamped line — use `crunch`.
- The text is a spoken quote with attribution — use `said-who`.