# Chevron Run
URL: https://remocn.dev/docs/numbers/chevron-run

A wall of chevrons locks into one giant gradient chevron, then a figure and serif caption drop in.

- Install: `npx shadcn@latest add @remocn/chevron-run`
- Vibe: premium
- Natural length: 108f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/chevron-run
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChevronRun } from "@/components/remocn/chevron-run";

const ChevronRunScene = () => <ChevronRun value="+312%" caption="growth since launch" />;

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

A full-frame wall of up-chevrons races upward in staggered columns, then column by column brakes and locks into one giant chevron that fuses solid in a gradient. The figure drops into the cut-out under it and a serif caption follows. Pass `value` and `caption`. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"+312%"` | The figure that lands under the giant chevron. |
| `caption` | `string` | `"growth since launch"` | Serif italic line under the figure. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the chevron gradient. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A growth stat, such as a percentage increase, that deserves an upward, momentum-driven entrance.
- A premium hero beat with a big gradient shape framing the number.
- A beat where a caption in italic serif should soften a loud numeral.

## Don't use when
- The number should come from a graph that draws itself - use `growth-line`.
- You want an arrow that zigzags beside a multiplier - use `flow-arrow`.
- A plain figure with a caption is enough - use `compact-stat`.