# Crunch
URL: https://remocn.dev/docs/typography/crunch

A timestamped story line, "It shipped, with time to ...", fades in over a dark brown ground

- Install: `npx shadcn@latest add @remocn/crunch`
- Vibe: paper
- Natural length: 170f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/crunch
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Crunch } from "@/components/remocn/crunch";

const CrunchScene = () => <Crunch setup={{ slug: "Monday, 10:00 AM", line: "Maya had a launch on Friday." }} snag={{ slug: "Thursday, 11:40 PM", line: "Nine hours left, and still no video." }} />;

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

A timestamped story plays in three beats: a setup line fades out, a tense snag line sits in a column that squeezes tighter and tighter, then the walls release and a calm resolution line arrives. Pass `setup`, `snag` and `resolution`, each with a `slug` (timestamp) and `line`; beats stretch with the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `setup` | `StoryBeat` | `DEFAULT_SETUP` | First beat: a timestamp slug and a line. |
| `snag` | `StoryBeat` | `DEFAULT_SNAG` | Middle beat shown in the squeezing column. |
| `resolution` | `StoryBeat` | `DEFAULT_RESOLUTION` | Final beat that arrives after the release. |
| `accent` | `string` | — | Color for the slug and resolution; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A short story beat about a deadline, told in timestamped lines that build pressure.
- A problem-to-relief arc where the middle line should feel cramped.
- A narrative intro to a product where the last line is the resolution.

## Don't use when
- You want several timestamped lines drifting past rather than one squeeze — use `story-dip`.
- The story is a single dated line — use `overnight`.
- You need a plain statement with no narrative arc — use `soft-blur-in`.