# Word Acts
URL: https://remocn.dev/docs/typography/word-acts

Each word acts out its own meaning in a short beat, ending on a held poster word

- Install: `npx shadcn@latest add @remocn/word-acts`
- Vibe: playful
- Natural length: 139f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/word-acts
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WordActs } from "@/components/remocn/word-acts";

const WordActsScene = () => (
  <WordActs
    acts={[
      { word: "stretch", act: "stretch" },
      { word: "heavy", act: "heavy" },
      { word: "rebuilt", act: "rebuilt" },
    ]}
    hold={30}
  />
);

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

Words play one after another, each performing its meaning: `stretch`, `split`, `heavy` (falls and lands), `faster` (rushes in and snaps) and `rebuilt` (strokes scatter and reassemble). Pass `acts` as a list of `{ word, act, frames? }`; the last word also holds for `hold` frames. Total length is the sum of the acts' frames plus the hold, and it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `acts` | `WordActBeat[]` | `DEFAULT_ACTS` | List of `{ word, act, frames? }` beats; `rebuilt` words must be lowercase a–z. |
| `hold` | `number` | `32` | Extra frames the final word holds as a poster. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the gradient marks and strokes. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- A feature-list beat where each word demonstrates itself, such as stretching, splitting, heavy or fast.
- A playful tagline built from a handful of one-word acts that each get a short, distinct moment.
- A closing beat where a word is rebuilt from geometric strokes and held as a poster.

## Don't use when
- Every word should share one consistent motion style — use `kinetic-morph-text`.
- The copy is a full sentence that needs to read as a line — use `word-push`.
- You need only one word to stretch in, not a sequence of acts — use `stretch-in`.