# Stem Stretch
URL: https://remocn.dev/docs/numbers/stem-stretch

The stems of a figure stretch into tall gradient stripes, then a caption rises beneath.

- Install: `npx shadcn@latest add @remocn/stem-stretch`
- Vibe: premium
- Natural length: 88f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/stem-stretch
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StemStretch } from "@/components/remocn/stem-stretch";

const StemStretchScene = () => (
  <StemStretch value="4 hours" label="back, every week" steps={4} />
);

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

The figure rises in, then in `steps` springy snaps its vertical stems stretch apart into long stripes with a gradient glow. The caption rises in word by word below. Pass `value`, `label` and `steps`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"4 hours"` | Heading text whose stems stretch, such as a number and a unit. |
| `label` | `string` | `"back, every week"` | Caption that rises in word by word under the figure. |
| `steps` | `number` | `4` | Number of snaps the stretch is split into. |
| `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 time-saved or duration claim such as 4 hours back every week.
- A text-forward stat with a dramatic reveal.
- A hero line where a number and a unit word share one heavy headline.

## Don't use when
- You want a clean number with no stretching — use `compact-stat`.
- You want a glossy pill that holds a word inside the number — use `zero-stretch`.
- You want a weight change on a counting figure — use `weight-cut`.