# Chunk Stack
URL: https://remocn.dev/docs/typography/chunk-stack

"learn motion by making it" stacks one word per line with a yellow highlighter on "making"

- Install: `npx shadcn@latest add @remocn/chunk-stack`
- Vibe: playful
- Natural length: 94f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/chunk-stack
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChunkStack } from "@/components/remocn/chunk-stack";

const ChunkStackScene = () => (
  <ChunkStack text="learn motion by making it" highlight="making" />
);

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

The phrase rises into a stack, one word per line, then a highlighter bar opens behind the chosen word. Pass `text` and `highlight`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"learn motion by making it"` | Phrase stacked one word per line. |
| `highlight` | `string` | `"making"` | Word marked with the highlighter. |
| `accent` | `string` | — | Accent colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A short slogan where each word gets its own line and one word is marked with a highlighter.
- A bold, readable statement for a social-style cut.

## Don't use when
- You want one giant word filling the frame — use `edge-fit`.
- You want words slamming in with condensed caps — use `full-bleed-type`.