# StaggeredWords

Reveal a sentence word by word with a shared rise and fade.

Page: https://20cuts.com/docs/components/staggered-words

## Installation

Run from your product repository:

```sh
npx -y https://20cuts.com/releases/v0.3.0/20cuts-create-0.3.0.tgz video/20cuts
cd video/20cuts
npm ci
npm run studio
```

The installer includes this component, its source dependencies, runnable examples,
and skills for Codex and Claude Code. If 20cuts is already installed, import the
component from its existing source directory.

## Usage

```tsx
import { StaggeredWords } from "./system/motion";

export default function VideoScene() {
  return (
    <StaggeredWords text="A better way to launch." at={0.3} stagger={0.1} style={{fontSize: 88, fontWeight: 700}} />
  );
}
```


## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text (required) | string | None | Text to display. |
| at | number | 0 | Start time in seconds within the current Remotion Sequence. |
| duration | number | 0.55 | Entrance duration for each word, in seconds. |
| stagger | number | 0.07 | Delay between words, in seconds. |
| distance | number | 24 | Travel distance in pixels. |
| style | CSSProperties | None | Styles applied to the component wrapper. |



## Complete example

This is the source of the fictional component demonstration. Replace its content
with supported behavior and assets from your product.

```tsx
import React, { type CSSProperties, type ReactNode } from "react";

import { AbsoluteFill } from "remotion";

import { StaggeredWords } from "./system";

const ink = "#141414", lime = "#b6f36b";

const center: CSSProperties = { display: "flex", alignItems: "center", justifyContent: "center" };

const large: CSSProperties = { fontSize: 104, lineHeight: 1.06, fontWeight: 700, letterSpacing: "-0.055em" };

function Stage({ children, dark = false, style }: {
    children: ReactNode;
    dark?: boolean;
    style?: CSSProperties;
}) {
    return <AbsoluteFill style={{ fontFamily: "Arial, Helvetica, sans-serif", color: dark ? "#fff" : ink, background: dark ? ink : "#f7f7f5", ...center, ...style }}>{children}</AbsoluteFill>;
}

export function StaggeredWordsExample() { return <Stage><StaggeredWords text="A better way to launch." at={0.4} stagger={0.15} duration={0.8} distance={44} style={{ ...large, maxWidth: 940 }}/></Stage>; }
```

Save it as src/StaggeredWordsExample.tsx. This demonstration uses
1280×720, 30fps and 180 frames.
For a separate entry point, replace src/index.tsx with this registration, then
run npm run studio:

```tsx
import { Composition, registerRoot } from "remotion";
import { StaggeredWordsExample } from "./StaggeredWordsExample";

registerRoot(() => (
  <Composition
    id="StaggeredWordsExample"
    component={StaggeredWordsExample}
    width={1280}
    height={720}
    fps={30}
    durationInFrames={180}
  />
));
```

## Source

- https://20cuts.com/animation-system/library/source/motion/typography.tsx
- https://20cuts.com/animation-system/library/source/motion/core.ts

## Agent instructions

Use the 20cuts StaggeredWords component in this project's Remotion composition. Set one short headline at large size and reveal its words 0.1 seconds apart, leaving enough reading time after the final word. Keep motion frame-driven and put timing in seconds relative to the current Sequence. Use the product's actual copy and assets. Preview the composition before rendering.