# Line Cascade
URL: https://remocn.dev/docs/numbers/line-cascade

A large figure is drawn from cascading gradient lines that pile up and snap into place, with a caption.

- Install: `npx shadcn@latest add @remocn/line-cascade`
- Vibe: premium
- Natural length: 124f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/line-cascade
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LineCascade } from "@/components/remocn/line-cascade";

const LineCascadeScene = () => (
  <LineCascade value="240" caption="launch films rendered with remocn today" />
);

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

Gradient lines rain down and land as flutes on a floor, drawing the figure's strokes until they snap into the solid numeral and a caption rises beneath. Pass `value` (digits plus a few symbols such as `.`, `+`, `%` and `k`) and `caption`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"240"` | Figure to draw, digits plus a few symbols such as dot, plus and percent. |
| `caption` | `string` | `"launch films rendered with remocn today"` | Small line of text that rises under the figure. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |

## Use when
- A hero number beat where the figure should feel built from raw material rather than faded in.
- A count of shipped items or users used as a poster stat with a one-line caption.
- A launch beat with a gradient-heavy, poster-like look that stays legible once settled.

## Don't use when
- The number must be readable from the first frame — use `compact-stat`.
- You want the number to count up — use `tall-count`.
- The figure carries a decimal and a multiplier sign — use `lean-count`.