# A to Z
URL: https://remocn.dev/docs/typography/a-to-z

An alphabet gag where a big letter column rolls from A to Z and lands on a final entry

- Install: `npx shadcn@latest add @remocn/a-to-z`
- Vibe: playful
- Natural length: 128f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/a-to-z
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AToZ } from "@/components/remocn/a-to-z";

const AToZScene = () => (
  <AToZ
    entries={["animations.", "brand fonts.", "captions."]}
    finale="zero lock-in."
    connector="is for"
  />
);

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

A huge letter column and a text column roll together: each entry shows its first letter with the connector, for example "A is for any aspect ratio.", ticking through the list. After the last entry the letters flick through the gap to the finale, and a slower roll lands on it. Pass `entries` in alphabetical order, plus `finale` and `connector`; it ships light and dark through `theme`, and the pacing stretches to fit the composition's duration (128 frames at the default 165).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `entries` | `string[]` | `DEFAULT_ENTRIES` | Items in alphabetical order; each one's first letter drives the big column. |
| `finale` | `string` | `"zero lock-in."` | Last entry, rolled in after the letters flick through to its letter. |
| `connector` | `string` | `"is for"` | Short phrase between the letter and each entry. |
| `accent` | `string` | — | Field color in dark, letter color in light; defaults to orange. |
| `background` | `string` | — | Stage color, or `"transparent"` to composite over other layers. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- A feature-list beat framed as an alphabet, where each item starts with the next letter and the finale lands on Z.
- A playful closing line that rolls through a few real features and ends on a punchline entry.
- A bold full-bleed color moment where the big letter column and the text column roll together.

## Don't use when
- The items are not alphabetical or the alphabet joke does not fit — use `index-list`.
- You want a rolling effect on a single value, not a letter column — use `slot-machine-roll`.
- You need a plain stacked list of features without the roll — use `staggered-fade-up`.

---

# Absorb Stack
URL: https://remocn.dev/docs/typography/absorb-stack

A centred stack of small lines, ending in a red "on top.", on a dark brown ground

- Install: `npx shadcn@latest add @remocn/absorb-stack`
- Vibe: premium
- Natural length: 60f @ 30fps

## Installation

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

## Usage

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

const AbsorbStackScene = () => <AbsorbStack lines={["made to", "sink into", "your cut,", "not sit", "on top."]} accentLine={4} />;

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

A stack of small lowercase lines fades in from the center outward, spread wide, then eases together into a tight block, with the last line in the accent color. Pass `lines` (one string per line) and optionally `accentLine` for which line gets the accent.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Lines of text, centered and set in lowercase. |
| `accentLine` | `number` | — | Index of the line set in the accent color; defaults to the last. |
| `accent` | `string` | — | Color of the accented line; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A short poetic statement set as a centered stack of lines in a brand film.
- A closing slogan where the final line should carry the brand color.
- A quiet text beat between two louder scenes.

## Don't use when
- You need one big loud headline rather than a stack — use `full-bleed-type`.
- The lines should reveal one at a time with a delay — use `line-by-line-slide`.
- You want the stack to dim line by line toward one highlighted claim — use `what-sticks`.

---

# Acronym Expand
URL: https://remocn.dev/docs/typography/acronym-expand

An acronym expands letter by letter into its full name, with an eyebrow above and a subhead below.

- Install: `npx shadcn@latest add @remocn/acronym-expand`
- Vibe: tech
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/acronym-expand
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AcronymExpand } from "@/components/remocn/acronym-expand";

const AcronymExpandScene = () => (
  <AcronymExpand
    short="SDK"
    full="Software Development Kit"
    eyebrow="Now available"
    accent="#3B5BFD"
  />
);

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

The short form appears first, its letters spread apart and unfold into the full words, then the eyebrow and subhead fade in. Pass `short`, `full`, `eyebrow` and `subhead` to make it yours; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `short` | `string` | `"MCP"` | The acronym shown large before it expands |
| `full` | `string` | `"Model Context Protocol"` | The full phrase the acronym expands into |
| `eyebrow` | `string` | `"Now in remocn"` | Small label above the expanded phrase; empty to hide |
| `subhead` | `string` | `"Your agent browses, installs and edits every component."` | One-line explanation under the phrase; empty to hide |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A feature-naming beat where a short acronym like MCP or SDK needs to be spelled out for the viewer.
- An announcement scene that pairs one big abbreviation with a one-line explanation of what it does.

## Don't use when
- The headline is a plain sentence with nothing to expand - use `tracking-in`.
- You want text typed on with a caret rather than letters unfolding - use `typewriter`.
- The full name is very long and would shrink to small type - use `line-by-line-slide`.

---

# Anagram Shuffle
URL: https://remocn.dev/docs/typography/anagram-shuffle

The letters of one word slide into new positions to spell its anagram.

- Install: `npx shadcn@latest add @remocn/anagram-shuffle`
- Vibe: playful
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/anagram-shuffle
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AnagramShuffle } from "@/components/remocn/anagram-shuffle";

const AnagramShuffleScene = () => (
  <AnagramShuffle from="listen" to="silent" accent="#3B5BFD" />
);

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

The `from` word shows, then each letter glides to its place in the `to` word. Both words must use the same letters, so pass a matching `from` and `to` pair. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"listen"` | Starting word. |
| `to` | `string` | `"silent"` | Anagram of `from` that letters move into. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A clever hook where two related words share the same letters, such as a product's before and after.
- A playful word-play beat in a brand or naming reveal.
- A short one-word transformation used as a section opener.

## Don't use when
- The words differ by a letter or two per step — use `word-ladder`.
- The new word is unrelated and should just replace the old one — use `ruby-press`.
- You want a typo corrected in place — use `typo-fix`.

---

# And You
URL: https://remocn.dev/docs/typography/and-you

A list of audiences ("For the founder who...") ends on a big "and you."

- Install: `npx shadcn@latest add @remocn/and-you`
- Vibe: playful
- Natural length: 127f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/and-you
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AndYou } from "@/components/remocn/and-you";

const AndYouScene = () => <AndYou clauses={["For the founder who launches on Monday,", "the designer who just learned React,", "the two-person studio,"]} last="and you." />;

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

A list of audiences scrolls in clause by clause, each one stacking under the last, then they dim and a big closing phrase rises at the bottom of the frame. Pass `clauses` (one string per audience) and `last` for the closing words; it spaces the clauses to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `clauses` | `string[]` | — | Audience clauses, each shown in turn and stacked. |
| `last` | `string` | `"and you."` | Closing words shown large at the bottom. |
| `accent` | `string` | — | Color for the closing phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A who-it's-for beat that lists several audiences and ends by addressing the viewer.
- An inclusive closing statement near the end of a launch video.
- A list of three to five short clauses that should read as one sentence.

## Don't use when
- You want three short benefit words instead of audiences — use `feature-trio`.
- The lines are separate claims that should dim toward one — use `what-sticks`.
- Each line should be a full-screen beat — use `point-expand`.

---

# Answer First
URL: https://remocn.dev/docs/typography/answer-first

The question "Who made this video?" is answered by a big "A pull request."

- Install: `npx shadcn@latest add @remocn/answer-first`
- Vibe: playful
- Natural length: 72f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/answer-first
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AnswerFirst } from "@/components/remocn/answer-first";

const AnswerFirstScene = () => <AnswerFirst answer="A pull request." question="Who made this video?" />;

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

A big answer rises word by word first, then slides up and shrinks as the question types in below it, so the reader sees the answer before the question. Pass `answer` and `question`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `answer` | `string` | `"A pull request."` | The big answer line shown first. |
| `question` | `string` | `"Who made this video?"` | The question that types in beneath the answer. |
| `accent` | `string` | — | Color of the question text; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A Q&A beat where the punchy answer should land before the question that explains it.
- A product claim like a founder's one-line answer to a common question.
- A short hook near the start of a launch video.

## Don't use when
- You need a back-and-forth between two speakers — use `overheard`.
- The answer is a sheepish aside rather than a headline — use `coy-denial`.
- You want a series of objections each answered in turn — use `exactly`.

---

# Aspect Slit
URL: https://remocn.dev/docs/typography/aspect-slit

A film-title card opens through a slit, with a serif hero line and a small caption

- Install: `npx shadcn@latest add @remocn/aspect-slit`
- Vibe: premium
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/aspect-slit
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AspectSlit } from "@/components/remocn/aspect-slit";

const AspectSlitScene = () => <AspectSlit title="Now showing." caption="A launch film, built in React." slit={0.125} />;

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

Letterbox bars close to a thin slit, a serif title rises into it, then the bars open back to full frame as the title grows to hero size and a small caption settles underneath. Pass `title`, `caption` and `slit` (the narrowest bar gap as a share of frame height).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Now showing."` | Short title. It first appears inside the slit, then grows to hero size. |
| `caption` | `string` | `"A launch film, built in React."` | Small line under the hero title. Pass "" to hide. |
| `slit` | `number` | `0.125` | Height of the narrowest slit, as a share of the frame height. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the background light and the title full stop. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A film-style title card for a product launch or release announcement.
- An opening beat that frames the video as a feature film.
- A short serif title with a one-line caption.

## Don't use when
- You want a clean text reveal without letterbox bars — use `soft-blur-in`.
- The title needs a gradient or dramatic camera move — use `macro-pan`.
- You need a title that appears through a fluted scan — use `slit-scan`.

---

# Axis Flex
URL: https://remocn.dev/docs/typography/axis-flex

A gradient word flexes its width and weight like an elastic variable font, then snaps to a final style

- Install: `npx shadcn@latest add @remocn/axis-flex`
- Vibe: playful
- Natural length: 124f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/axis-flex
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AxisFlex } from "@/components/remocn/axis-flex";

const AxisFlexScene = () => (
  <AxisFlex word="flexible" line="One font, every mood" accent="#3B5BFD" />
);

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

Each letter rides an equalizer wave between a light condensed cut and a wide medium cut, so the word breathes in width and weight. At frame 84 the letters snap one by one to the final style with a spring, then the narrow second line squeezes in underneath. Pass `word` and `line`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"elastic"` | The word that flexes. |
| `line` | `string` | `"One family, every width"` | Second line, set in the narrow cut under the word. |
| `accent` | `string` | `"#3B5BFD"` | Accent color blended into the word's gradient fill. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A beat about flexibility or range, where a single word shows off a variable font's width and weight.
- A type-forward title card that needs a lively intro before settling into a clean wide word.
- A product line that pairs a flexing headline word with a short narrow subline underneath.

## Don't use when
- You only want a weight swell across the letters with no width change — use `weight-wave`.
- You want to show different typefaces rather than one family flexing — use `font-cycle`.
- The word should simply fade or slide in without a wave — use `soft-blur-in`.

---

# Baseline Drop
URL: https://remocn.dev/docs/typography/baseline-drop

Words fall onto a shared baseline one after another while a gradient streak glows beneath them.

- Install: `npx shadcn@latest add @remocn/baseline-drop`
- Vibe: premium
- Natural length: 94f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/baseline-drop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BaselineDrop } from "@/components/remocn/baseline-drop";

const BaselineDropScene = () => (
  <BaselineDrop text="Ship the story." stagger={11} accent="#3B5BFD" />
);

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

Each word drops from above and lands on a single baseline with a small bounce while a gradient streak draws in and brightens under the line, then retracts. Pass `text` (or `words` for explicit splits) and `stagger` to set the rhythm; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Ship the story."` | Headline; split on spaces into dropping words |
| `words` | `string[]` | — | Explicit word list; overrides text when given |
| `stagger` | `number` | `11` | Frames between consecutive word landings |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A closing tagline where each word should land with weight, one beat after another.
- A short three or four word slogan over a glowing ground at the end of a launch video.

## Don't use when
- The line is long enough to need several rows - use `line-by-line-slide`.
- You want soft letter-level motion instead of falling words - use `per-character-rise`.
- The text should arrive and leave with blur rather than drop - use `blur-out-up`.

---

# Beam Split
URL: https://remocn.dev/docs/typography/beam-split

A light beam cuts a bold headline in two and a serif italic phrase appears in the gap.

- Install: `npx shadcn@latest add @remocn/beam-split`
- Vibe: premium
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/beam-split
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BeamSplit } from "@/components/remocn/beam-split";

const BeamSplitScene = () => (
  <BeamSplit title="Ship the story" inner="with motion you own" accent="#3B5BFD" />
);

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

A bold title rises, a thin beam draws across its middle and pushes the halves apart, and the italic phrase fades in between before the gap closes again. Pass `title` and `inner` to set the two texts; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Ship the story"` | Bold headline that is split by the beam |
| `inner` | `string` | `"with motion you own"` | Serif italic phrase shown inside the opened gap |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A headline that sets up a punchline, where the second phrase appears inside the opened gap.
- A premium reveal that pairs a heavy sans headline with an italic aside.

## Don't use when
- There is no second phrase to place in the gap - use `blur-out-up`.
- You want a simple word-by-word entrance - use `staggered-fade-up`.
- The scene needs a swap between two lines of equal weight - use `strikethrough-replace`.

---

# Beta Thanks
URL: https://remocn.dev/docs/typography/beta-thanks

"Remocn is out" with a green "out", thanking the beta testers below

- Install: `npx shadcn@latest add @remocn/beta-thanks`
- Vibe: clean
- Natural length: 94f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/beta-thanks
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BetaThanks } from "@/components/remocn/beta-thanks";

const BetaThanksScene = () => <BetaThanks tag="beta" status="is out." before="Thank you," after="testers." />;

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

The logo and a small tag appear, the tag lifts out and slides into place beside the logo as the status word lands, then a thank-you line fades in below. Pass `tag`, `status`, `before` and `after`, or a `logo` node of your own; it speeds up to fit shorter compositions.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `logo` | `React.ReactNode` | — | Custom logo node; defaults to the Remocn logo. |
| `tag` | `string` | `"beta"` | Small tag that lifts out and slides next to the logo. |
| `status` | `string` | `"is out."` | Status line that lands beside the logo. |
| `before` | `string` | `"Thank you,"` | First half of the thank-you line. |
| `after` | `string` | `"testers."` | Second half of the thank-you line. |
| `accent` | `string` | — | Color of the tag and status; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A thanks-to-testers or early-access closing beat in a release video.
- A status announcement where one word, like beta, moves into the logo lockup.
- A short logo plus status line before a final call to action.

## Don't use when
- You are announcing a launch with a long list of features — use `embargo-lift`.
- You want a simple closing line with no logo — use `plain-license`.
- You want a thanks and next-step card — use `post-script`.

---

# Block Swap
URL: https://remocn.dev/docs/typography/block-swap

A solid block wipes over each line and the next line replaces it, ending with a highlighted word on a pill.

- Install: `npx shadcn@latest add @remocn/block-swap`
- Vibe: clean
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/block-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BlockSwap } from "@/components/remocn/block-swap";

const BlockSwapScene = () => (
  <BlockSwap
    lines={["Pick the beats you need.", "Render the launch."]}
    highlight="launch"
    accent="#3B5BFD"
  />
);

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

Each word of the first line is covered by a block that morphs into the next line, then uncovers the new words. The last line keeps `highlight` on a gradient pill. Pass `lines` as an array of sentences and `highlight` as the word to call out; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `DEFAULT_LINES` | Sentences shown in order; each one overwrites the previous |
| `highlight` | `string` | `"launch"` | Word in the last line that lands on the gradient pill |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A beat that rewrites one statement into another, such as a problem line replaced by the answer.
- A two-step message where the final line needs one word called out on a gradient pill.

## Don't use when
- You only have a single line to reveal - use `mask-reveal-up`.
- You want the old text struck out and replaced in place - use `strikethrough-replace`.
- You need a soft crossfade between lines rather than a block wipe - use `per-word-crossfade`.

---

# Blur Out Up
URL: https://remocn.dev/docs/typography/blur-out-up

Words arrive clean and depart upward with increasing blur for airy exits

- Install: `npx shadcn@latest add @remocn/blur-out-up`
- Vibe: premium
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/blur-out-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BlurOutUp } from "@/components/remocn/blur-out-up";

const BlurOutUpScene = () => (
  <BlurOutUp text="Clear in, airy out." staggerDelay={1} />
);

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

Each word fades and slides in cleanly, holds steady in the middle of the composition, then drifts upward with increasing blur near the end—so the duration should leave room for the exit animation.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { BlurOutUp } from "@/components/remocn/blur-out-up";
import { Backdrop } from "@/components/remocn/backdrop";

const BlurOutUpScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <BlurOutUp text="Clear in, airy out." staggerDelay={1} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `staggerDelay` | `number` | `1` | Per-word delay in frames for both the enter and exit phases |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A title or tagline needs a graceful upward exit before the next scene cuts in.
- The scene calls for an airy, editorial tone — text that drifts rather than snaps away.
- You need a per-word stagger on exit without any blur-in entrance (the arrival is clean).

## Don't use when
- You want a blurred entrance that resolves to crisp — that is `focus-blur-resolve`, which opens blurry and sharpens in.
- The text is a paragraph or multi-line block where per-word stagger would drag too long; use `line-by-line-slide` for multi-line exits instead.
- The scene needs a hard cut or a simple opacity fade, not an upward drift — use `fade-through` for a clean A→B replacement.

---

# Bokeh Title
URL: https://remocn.dev/docs/typography/bokeh-title

A serif headline sharpens out of drifting bokeh lights that first form a pattern.

- Install: `npx shadcn@latest add @remocn/bokeh-title`
- Vibe: premium
- Natural length: 152f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bokeh-title
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BokehTitle } from "@/components/remocn/bokeh-title";

const BokehTitleScene = () => (
  <BokehTitle
    title="Launch films, made in code"
    subtitle="remocn · Spring release"
    pattern="grid"
  />
);

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

Out-of-focus bokeh lights drift, a focus pull snaps them into a mark or grid pattern, then they defocus again as the serif title and subtitle resolve. Pass `title` and `subtitle` (split on ' · ' for a lead and a tail) and choose `pattern` and `shape`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Launch films, made in code"` | Serif headline that resolves from the bokeh |
| `subtitle` | `string` | `"remocn · Spring release"` | Line under the title; ' · ' splits a lead from the rest |
| `pattern` | `"mark" \| "grid"` | `"mark"` | Arrangement the lights snap into: mark or grid |
| `shape` | `"circle" \| "hexagon"` | `"circle"` | Shape of each bokeh light: circle or hexagon |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- An opening title for a premium or lifestyle launch where the headline should resolve from a blur of lights.
- A cinematic cold open that needs atmosphere before the product name appears.

## Don't use when
- The scene needs crisp, fast type with no atmosphere - use `tracking-in`.
- You only want a blur-to-sharp text resolve with no lights - use `focus-blur-resolve`.
- You want a simple fade-up of a title - use `staggered-fade-up`.

---

# Boss Bar
URL: https://remocn.dev/docs/typography/boss-bar

A boss HP bar is drained by hits, then 'DEFEATED' slams in beneath 'The old workflow'

- Install: `npx shadcn@latest add @remocn/boss-bar`
- Vibe: playful
- Natural length: 124f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/boss-bar
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BossBar } from "@/components/remocn/boss-bar";

const BossBarScene = () => (
  <BossBar boss="THE OLD WORKFLOW" hits={[{ label: "Captions", damage: 800 }, { label: "Templates", damage: 1200 }]} />
);

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

A boss HP bar fills in, each named hit slams in and drains the bar, and when it breaks the defeated word slams in beneath the boss name. Pass `boss`, `hits` (label and damage) and `defeated`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `boss` | `string` | `"THE OLD WORKFLOW"` | Boss name over the bar. |
| `hits` | `BossHit[]` | — | Hits in order; the last one takes the bar to zero. |
| `defeated` | `string` | `"DEFEATED"` | Word slammed in when the bar breaks. |
| `accent` | `string` | `"#3B5BFD"` | The small "BOSS" tag and the hit slash. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A playful beat framing a legacy workflow as a boss that your features defeat one hit at a time.
- A feature recap where each hit names a capability and takes damage off the bar.

## Don't use when
- You want a streak of eliminations ending in a banner — use `kill-feed`.
- You want a simple countdown to a reveal — use `drop-timer`.

---

# Bottom-Up Letters
URL: https://remocn.dev/docs/typography/bottom-up-letters

Letters rise from below in a pronounced staircase, one symbol at a time

- Install: `npx shadcn@latest add @remocn/bottom-up-letters`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bottom-up-letters
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BottomUpLetters } from "@/components/remocn/bottom-up-letters";

const BottomUpLettersScene = () => (
  <BottomUpLetters text="Shift" staggerDelay={3} distance={46} />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { BottomUpLetters } from "@/components/remocn/bottom-up-letters";
import { Backdrop } from "@/components/remocn/backdrop";

const BottomUpLettersScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <BottomUpLetters text="Shift" staggerDelay={3} distance={46} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `staggerDelay` | `number` | `3` | Per-character delay in frames. Larger values make the staircase more pronounced. |
| `distance` | `number` | `46` | Vertical travel in pixels each letter rises from. Animates to 0. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A short punchy word or acronym should land with clear, visible per-character energy.
- The scene has a slow reveal cadence where the staircase wave is the hero moment.
- You want a crisp, sharp reveal without any softness or blur at all.

## Don't use when
- The text is a full sentence or phrase — the high stagger makes long strings feel sluggish; use `per-character-rise` (faster, more even) or `mask-reveal-up` (line-level) instead.
- You want blur or softness in the reveal — `blur-out-up` or `focus-blur-resolve` add atmosphere that this component deliberately omits.
- The entrance should read as smooth and unified rather than letter-by-letter theatrical; use `micro-scale-fade` for a single calm pop.

---

# Bug Dock
URL: https://remocn.dev/docs/typography/bug-dock

"Playing on every screen you ship." with a small broadcast logo bug docking at the bottom

- Install: `npx shadcn@latest add @remocn/bug-dock`
- Vibe: social
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bug-dock
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BugDock } from "@/components/remocn/bug-dock";

const BugDockScene = () => <BugDock name="remocn" headline="Playing on every screen you ship." highlight="every screen" />;

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

A large logo-and-name lockup fades in, its letters tuck away until only the mark remains, and the mark docks to the bottom corner like a broadcast bug while the headline appears with one phrase highlighted. Pass `name` ("remocn" uses the real logo), `headline` and `highlight`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | `"remocn"` | Brand name; "remocn" renders the real logo, anything else a wordmark. |
| `headline` | `string` | `"Playing on every screen you ship."` | Headline text shown after the brand docks. |
| `highlight` | `string` | `"every screen"` | Phrase in the headline set in the accent color. |
| `accent` | `string` | — | Color for the highlighted phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A broadcast-style title where the brand shrinks into a corner bug and the message takes over.
- A launch beat that introduces the brand first and the headline second.
- A closing or channel-ident moment for a social or streaming video.

## Don't use when
- You want the headline alone with no logo lockup — use `soft-blur-in`.
- The brand should stay centered with a status word — use `beta-thanks`.
- You need a logo reveal on its own — use `flip-sting`.

---

# Caret Letter
URL: https://remocn.dev/docs/typography/caret-letter

A blinking caret types a word, then slides in and morphs into the missing letter

- Install: `npx shadcn@latest add @remocn/caret-letter`
- Vibe: paper
- Natural length: 180f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/caret-letter
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CaretLetter } from "@/components/remocn/caret-letter";

const CaretLetterScene = () => (
  <CaretLetter
    word="launch"
    stemIndex={0}
    subline="Ship the demo video in an afternoon."
  />
);

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

A caret blinks in and types the word except for one letter, slides over to that spot, the word opens to make room, and the caret morphs into the letter, then a grey subline fades in. Pass `word` and `stemIndex` (the letter the caret turns into; pick a plain stem such as l, I or 1), plus `subline` and `accent`. It ships light and dark through `theme`, defaulting to light.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"launch"` | The word; the caret types every letter except the stem. |
| `stemIndex` | `number` | `0` | Index of the letter the caret becomes; pick a plain stem such as l or I. |
| `subline` | `string` | `"Animated components for your next release."` | Small grey line under the word. |
| `accent` | `string` | `"#3B5BFD"` | Color of the caret and of the letter it becomes. |
| `theme` | `"dark" \| "light"` | `"light"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A brand or product-name reveal where a text caret becomes one letter of the name.
- A clean intro beat where typing leads into a short descriptive line under the word.
- A paper-light title card that wants a small, precise typographic gag.

## Don't use when
- You just need a typed line with no morph — use `typewriter`.
- The caret should swap one word for another — use `caret-swap`.
- You want a caret that wipes content on or off instead of becoming a letter — use `caret-wipe`.

---

# Caret Swap
URL: https://remocn.dev/docs/typography/caret-swap

A gradient caret expands into a block that consumes the first text, then types the second

- Install: `npx shadcn@latest add @remocn/caret-swap`
- Vibe: tech
- Natural length: 67f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/caret-swap
```

## Usage

The first text sits still until `swapAt`. Seven frames earlier the caret pops in after the last character; at `swapAt` it swells leftward into a full block with a sharp acceleration, consuming the text right to left in six frames. The block then dissolves its gradient tail to the right — the left edge holds still and what remains is the caret line at the start of the row. After a beat it types the second text — `typeSpeed` frames for the first character with every following gap shrinking, one accelerando to the finish — growing rightward from the anchor while drifting left to end centered. After the last character the caret blinks. All timings measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CaretSwap } from "@/components/remocn/caret-swap";

const CaretSwapScene = () => (
  <CaretSwap
    fromText="Executing it?"
    toText="That's where everyone quits"
  />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

```tsx
import { Composition } from "remotion";
import { CaretSwap } from "@/components/remocn/caret-swap";
import { Backdrop } from "@/components/remocn/backdrop";

const CaretSwapScene = () => (
  <Backdrop fill={{ type: "color", value: "#fdf6f0" }}>
    <CaretSwap
      fromText="Executing it?"
      toText="That's where everyone quits"
    />
  </Backdrop>
);

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

### Syncing

The exported `caretSwapLength(toText, swapAt, typeSpeed)` helper returns the frame on which the last character lands — use it as the lower bound of the `Sequence`, plus whatever hold you want for the blinking caret.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The phrase shown first and consumed by the caret block |
| `toText` (required) | `string` | — | The phrase typed out after the swap |
| `fontSize` | `number` | `72` | Font size in pixels; caret and block scale with it |
| `swapAt` | `number` | `20` | Frame at which the caret starts expanding into the block; the caret itself appears seven frames earlier |
| `typeSpeed` | `number` | `1` | Frames for the first typed character; every next gap shrinks by a fixed ratio so the typing accelerates toward the end |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `caretColor` | `string` | `"#FF4DAA"` | Top color of the caret gradient |
| `caretColorEnd` | `string` | `"#8A5CF6"` | Bottom color of the caret gradient |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- One phrase should be replaced by another through a caret gesture: the cursor swells into a block that eats the old text, collapses back and types the new one.
- You want a typewriter beat mid-scene without clearing to an empty frame — the swap carries the eye through the whole replace.
- The gradient caret should read as a character of its own, matching editor or AI-tool aesthetics.

## Don't use when
- You only need one phrase typed from empty — use `typewriter`.
- The swap should happen word by word rather than through a caret block — use `word-stream` or `value-swap`.
- You need a full-frame scene transition driven by a caret — use the `caret-wipe` transition.

---

# Case Flip
URL: https://remocn.dev/docs/typography/case-flip

A headline flips glyph by glyph from lowercase to uppercase and back to its final casing

- Install: `npx shadcn@latest add @remocn/case-flip`
- Vibe: clean
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/case-flip
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CaseFlip } from "@/components/remocn/case-flip";

const CaseFlipScene = () => (
  <CaseFlip text="Make it LOUD" accentWord="LOUD" stagger={2} />
);

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

Every glyph starts lowercase, then a wave flips them to uppercase one by one with a squash-and-spring, and a second wave flips each to its final casing. The accent word then fills with a gradient while the baseline and x-height guides fade out. Pass `text` in its final casing and `accentWord`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Launch it LOUD"` | The headline in its final casing. |
| `accentWord` | `string` | `"LOUD"` | Word from `text` that lands in the accent gradient. |
| `stagger` | `number` | `2` | Frames between neighboring glyphs in each wave. |
| `showGuides` | `boolean` | `true` | Show the baseline and x-height guide lines. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the highlighted word. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A headline beat where the casing itself is the joke, such as a quiet word turning LOUD.
- A title that should land with a word picked out in a gradient accent color.
- A typographic intro that benefits from baseline and x-height guides showing the glyph change.

## Don't use when
- You want letters decoding from random characters instead of flipping case — use `matrix-decode`.
- The text should simply fade up with no casing gag — use `staggered-fade-up`.
- You want one smooth morph between two phrases — use `kinetic-morph-text`.

---

# Centered Word Build
URL: https://remocn.dev/docs/typography/centered-word-build

Words appear sharply from below while the centered phrase pushes closer on every beat

- Install: `npx shadcn@latest add @remocn/centered-word-build`
- Vibe: clean
- Natural length: 63f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/centered-word-build
```

## Usage

The visible prefix is laid out as one centered line. Each word becomes fully visible on a hard cut `rise` em below the baseline and settles upward over `settleFrames`; opacity is never animated. In the same frame, the whole phrase starts another cumulative `zoomStep` push-in and holds the closer scale until the next word. The first two word gaps establish the rhythm; later gaps are multiplied by `accel` to tighten the cadence. At `exitAt`, a broad opacity mask wipes through the completed phrase from left to right. All timings were measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CenteredWordBuild } from "@/components/remocn/centered-word-build";

const CenteredWordBuildScene = () => (
  <CenteredWordBuild text="everything we learn from" />
);

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

### With Backdrop

The component is transparent. Add the scene color separately with `Backdrop`; the reference pairs warm white text with an orange radial glow.

```tsx
import { Composition } from "remotion";
import { CenteredWordBuild } from "@/components/remocn/centered-word-build";
import { Backdrop } from "@/components/remocn/backdrop";

const CenteredWordBuildScene = () => (
  <Backdrop
    fill={{
      type: "gradient",
      value:
        "radial-gradient(circle at 50% 108%, #ffd77a 0%, #ff6840 31%, #f13d21 78%)",
    }}
  >
    <CenteredWordBuild text="everything we learn from" />
  </Backdrop>
);

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

### Syncing

With the defaults, a four-word phrase reveals on frames 0, 11, 22, and 30, reaching cumulative scales of 1, 1.035, 1.07, and 1.105. The exported `centeredWordBuildLength(text, wordGap, accel, settleFrames, exitAt, exitFrames)` helper returns the frame on which all motion finishes.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The phrase to build word by word |
| `fontSize` | `number` | `52` | Font size in pixels |
| `color` | `string` | `"#fff3df"` | Text color (any valid CSS color) |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `wordGap` | `number` | `11` | Frames between each of the first two word additions |
| `accel` | `number` | `0.75` | Multiplier applied to each later word gap; lower values accelerate more strongly |
| `rise` | `number` | `0.18` | Starting vertical offset of each new word in em |
| `zoomStep` | `number` | `0.035` | Cumulative scale added to the whole visible phrase after each new word |
| `settleFrames` | `number` | `9` | Frames used by the synchronized word rise and whole-phrase push-in |
| `exitAt` | `number` | `51` | Frame on which the left-to-right opacity wipe begins |
| `exitFrames` | `number` | `12` | Duration of the opacity wipe in frames |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the text span |

## Use when
- A short statement should assemble one word at a time while every visible prefix stays centered and pushes closer.
- You want beat-synced typography where words appear sharply but still travel up into place.
- The completed line should leave through a soft left-to-right opacity wipe.

## Don't use when
- Each new word should physically drive the existing line aside — use `word-push`.
- Words should replace one another in the same fixed slot — use `per-word-crossfade`.
- You need character-by-character input with a caret — use `typewriter`.

---

# Changed Mind
URL: https://remocn.dev/docs/typography/changed-mind

A big serif pull quote, "The only tool I use now.", with a solo-founder attribution

- Install: `npx shadcn@latest add @remocn/changed-mind`
- Vibe: premium
- Natural length: 140f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/changed-mind
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChangedMind } from "@/components/remocn/changed-mind";

const ChangedMindScene = () => <ChangedMind name="Ines Vargas, solo founder" steps={[{ quote: "Another tool I won’t use.", when: "on day one" }, { quote: "The only tool I use now.", when: "two months in" }]} />;

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

A big serif quote types in word by word, then twice rewrites itself: shared words glide to their new spots while changed words swap and glow in the accent color, with the time tag under the attribution updating each time. Pass `steps` (quote and when pairs) and `name`; it ships light and dark, and spaces the steps to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `ChangedMindStep[]` | `DEFAULT_STEPS` | Quotes with a time tag each; shared words carry across. |
| `name` | `string` | `"Ines Vargas, solo founder"` | Attribution line shown under the quote. |
| `accent` | `string` | — | Color for the words that changed; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A testimonial that shows a customer's opinion evolving over time, with one quote edited in place.
- A before-and-after claim where only a few words change between versions.
- A founder or user story beat in a launch film, set in an editorial serif.

## Don't use when
- You have several different testimonials from different people — use `quote-hero`.
- You only need one static pull quote with an attribution — use `said-who`.
- The quotes share almost no words, so nothing carries over between steps — use `overheard`.

---

# Changelog Scroll
URL: https://remocn.dev/docs/typography/changelog-scroll

A changelog list scrolls and one row enlarges into a highlighted headline entry

- Install: `npx shadcn@latest add @remocn/changelog-scroll`
- Vibe: tech
- Natural length: 108f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/changelog-scroll
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChangelogScroll } from "@/components/remocn/changelog-scroll";

const ChangelogScrollScene = () => <ChangelogScroll title="Changelog" url="remocn.dev/changelog" focus={9} />;

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

A tall changelog list scrolls fast then eases to a stop on one row, which enlarges into a highlighted entry on a glowing panel while the title and URL chrome fade in. Pass `entries` (date, text and optional version), `focus` for the row index to enlarge, `title` and `url`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `entries` | `ChangelogEntry[]` | `DEFAULT_ENTRIES` | Changelog rows with date, text and an optional version. |
| `focus` | `number` | `9` | Index of the entry that enlarges into the headline. |
| `title` | `string` | `"Changelog"` | Heading shown once the entry expands. |
| `url` | `string` | `"remocn.dev/changelog"` | Address shown in the chrome after the expand. |
| `logo` | `React.ReactNode` | — | Custom logo node; defaults to the Remocn logo. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the focused entry panel. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A what's-new beat that shows a long history of releases and zooms into the latest one.
- A release-notes video where one entry deserves the headline treatment.
- A sense-of-momentum shot showing how often a product ships.

## Don't use when
- You want a live terminal-style log instead of a list — use `terminal-simulator`.
- You want a short numbered feature list — use `index-list`.
- You have three headline benefits, not a history — use `feature-trio`.

---

# Chore Fold
URL: https://remocn.dev/docs/typography/chore-fold

A teal "Captions does all of that." folds the chore away, "You just talk." beneath

- Install: `npx shadcn@latest add @remocn/chore-fold`
- Vibe: clean
- Natural length: 146f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/chore-fold
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChoreFold } from "@/components/remocn/chore-fold";

const ChoreFoldScene = () => <ChoreFold steps={["Export the audio.", "Fix every timestamp by hand."]} name="Captions" result="does all of that." payoff="You just talk." />;

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

A list of tedious manual steps appears line by line, then folds away from the outside in until the middle is left, and the hero sentence swaps in with the tool name highlighted before the payoff line lands. Pass `steps`, `label`, `name`, `result` and `payoff`; it fits the read time to the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `string[]` | `DEFAULT_STEPS` | The manual chores shown first, one per line. |
| `label` | `string` | `"By hand"` | Small label above the list of chores. |
| `name` | `string` | `"Captions"` | Product or tool name highlighted in the hero line. |
| `result` | `string` | `"does all of that."` | Rest of the hero sentence after the name. |
| `payoff` | `string` | `"You just talk."` | Short closing line shown beneath the hero. |
| `accent` | `string` | — | Color of the highlighted name; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A before-and-after beat where a list of chores is replaced by one product line.
- A pain-point montage that ends on the benefit in one short sentence.
- A launch scene where the tool name is the hero and the payoff is a two-word promise.

## Don't use when
- You want pain points to dim toward one claim rather than fold away — use `what-sticks`.
- The objections need answers one at a time — use `exactly`.
- You want a simple three-item benefit list — use `feature-trio`.

---

# Chromatic Wave
URL: https://remocn.dev/docs/typography/chromatic-wave

A soft wave travels down through the type; where it crosses, the letters ripple and split into RGB fringes, then settle back to white

- Install: `npx shadcn@latest add @remocn/chromatic-wave`
- Vibe: tech
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/chromatic-wave
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChromaticWave } from "@/components/remocn/chromatic-wave";

const ChromaticWaveScene = () => (
  <ChromaticWave headline="MUSIC" kicker="APPLES" />
);

export const RemotionRoot = () => (
  <Composition
    id="ChromaticWave"
    component={ChromaticWaveScene}
    durationInFrames={100}
    fps={30}
    width={1920}
    height={1080}
  />
);
```

Three copies of the type are displaced by the same traveling wave at three
different depths — one per color channel — and summed back together with
`screen` blending. Where the copies still coincide the sum is white; where the
depths pull them apart, red, green and blue fringes appear. The component
paints its own `background` (default black) because the reassembly is only
exact over black.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | `"MUSIC"` | The large center line |
| `kicker` | `string` | `"APPLES"` | The small tracked line, repeated above and below the headline |
| `headlineFontFamily / kickerFontFamily` | `string` | `Helvetica stack` | Fonts of the two lines |
| `headlineFontSize / kickerFontSize` | `number` | `174 / 52` | Font sizes in comp pixels |
| `kickerTracking` | `number` | `32` | Letter spacing of the kicker lines |
| `headlineBaselineY / kickerBaselines` | `number / [number, number]` | `601 / [444, 670]` | Baselines of the three lines in comp pixels |
| `textCenterX` | `number` | `960` | Horizontal center of the type |
| `fill` | `string` | `"#ffffff"` | Color of the type before the split |
| `background` | `string` | `"#000000"` | Painted stage background. Keep it dark — the channel reassembly is only exact over black |
| `width / height` | `number` | `1920 / 1080` | Coordinate space of the composition |
| `bandHeight / bandCopies / bandPitch` | `number` | `147.1 / 7 / 750` | Geometry of the traveling distortion bands |
| `mapStartY / mapEndY / mapTravelFrames` | `number` | `31 / 1560 / 150` | The bands' travel. Deliberately linear — an ease reads as the ripple hesitating inside the word |
| `waveHeight / waveWidth / waveSpeed` | `number` | `28 / 272 / 1` | The sine ripple on each band's edges |
| `turbulentAmount / turbulentSize` | `number` | `130 / 163` | Turbulent displacement breaking the wave's regular rhythm |
| `evolutionPerSecond` | `number` | `50` | How fast the turbulence field pans |
| `mapBlurRadius / mapBlurIterations` | `number` | `13 / 6` | Blur on the displacement map — without it the map's edges tear the output |
| `glassDisplacement / maxDisplacementPx` | `number` | `100 / 39` | Displacement strength, and the pixel span it maps to |
| `glassPasses` | `number` | `3` | How many depth passes — also how many channels split |
| `channelOrder` | `("red" \| "green" \| "blue")[]` | `["blue", "green", "red"]` | Which channel rides which depth, shallowest first |
| `className` | `string` | — | Optional className passed to the wrapper |

Inspired by [5 Clean Text Animations](https://www.youtube.com/watch?v=Nmi7cE2wT54) by Mapal.

## Use when
- A held title — an album cover, a poster hold, a loop — needs slow, ambient distortion instead of a one-shot entrance.
- The aesthetic is music-video or vaporwave: rippling glass with red, green and blue fringes at the distortion edges.
- The type can sit on a dark background — the channel split sums back to white via screen blending, which is only exact over black.

## Don't use when
- You need a quick glitch accent rather than a five-second traveling wave — use `rgb-glitch-text`.
- The background is light — the screen blend that reassembles the channels breaks over anything but dark fills.
- The copy changes or enters mid-scene — the type is static; this is a treatment, not a reveal; use `soft-blur-in` first.

---

# 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`.

---

# Column Reflow
URL: https://remocn.dev/docs/typography/column-reflow

A justified paragraph reflows its column width, redistributing lines with even word spacing

- Install: `npx shadcn@latest add @remocn/column-reflow`
- Vibe: paper
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/column-reflow
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ColumnReflow } from "@/components/remocn/column-reflow";

const ColumnReflowScene = () => <ColumnReflow text="Good motion starts with good typography." accentWord="typography" direction="widen" />;

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

A justified serif paragraph sits in a column, then the column widens (or narrows) while words glide to new lines and the spacing is redistributed evenly, ending with one accent word in italic. Pass `text`, `accentWord` and `direction`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `DEFAULT_TEXT` | The paragraph to set and reflow. |
| `accentWord` | `string` | `"room"` | Word set in accent color and italic. |
| `direction` | `"widen" \| "narrow"` | `"widen"` | Whether the column starts narrow and widens, or the reverse. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `accent` | `string` | — | Color of the accent word; also tints the glow. |

## Use when
- A beat about layout, responsiveness or editorial typography where the text itself reflows.
- A paragraph that should demonstrate how content adapts to a new width.
- A calm body-text moment with one emphasized word.

## Don't use when
- You need a short punchy headline rather than a paragraph — use `soft-blur-in`.
- You want a paragraph to set itself into a column once — use `tagline-justify`.
- The text should be revealed line by line — use `line-by-line-slide`.

---

# Comet Headline
URL: https://remocn.dev/docs/typography/comet-headline

A headline and subhead arrive while a comet streaks arcs behind each word, with one phrase highlighted.

- Install: `npx shadcn@latest add @remocn/comet-headline`
- Vibe: premium
- Natural length: 81f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/comet-headline
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CometHeadline } from "@/components/remocn/comet-headline";

const CometHeadlineScene = () => (
  <CometHeadline
    eyebrow="New in remocn"
    headline="Every launch beat, already in orbit."
    highlight="in orbit"
    accent="#3B5BFD"
  />
);

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

An eyebrow fades in, then the headline words fly in one after another on comet arcs and cool into place, and the subhead follows. Pass `eyebrow`, `headline`, `highlight` and `subhead` to make it yours; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `eyebrow` | `string` | `"New in remocn"` | Small label above the headline; empty to hide |
| `headline` | `string` | `"Every launch beat, already in orbit."` | Main headline; words arrive one by one |
| `highlight` | `string` | `"in orbit"` | Phrase inside the headline shown in the accent color |
| `subhead` | `string` | `"Reveals, feature heads and stats as drop-in Remotion scenes."` | Supporting line under the headline; empty to hide |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A feature announcement where each word of the headline should be delivered with a trailing light.
- A hero beat with an eyebrow, a headline, one highlighted phrase and a subhead.

## Don't use when
- The headline is a single short word - use `spring-scale-in`.
- You want calm, text-only motion with no streaks - use `staggered-fade-up`.
- The scene is just a typed line - use `typewriter`.

---

# Cool Down
URL: https://remocn.dev/docs/typography/cool-down

A short statement, 'Runs cool.', settles in large over a faint grid with a mono caption

- Install: `npx shadcn@latest add @remocn/cool-down`
- Vibe: tech
- Natural length: 92f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cool-down
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CoolDown } from "@/components/remocn/cool-down";

const CoolDownScene = () => <CoolDown title="Runs cool." label="a full launch film rendered, fans silent" />;

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

A short statement rises into place in large type, glowing in the accent color and cooling to the text color while a faint grid and heat shimmer calm down behind it, ending on a still frame with a small mono caption. Pass `title` and `label`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Runs cool."` | Short statement set large. |
| `label` | `string` | `"a full launch film rendered, fans silent"` | Small mono caption under the title. |
| `accent` | `string` | — | Hot color the title and caption start in before cooling to the text color. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A performance or efficiency claim where the visuals should feel calm and settled.
- A short two-word statement with a technical caption underneath.
- A developer-focused beat about speed, stability or low resource use.

## Don't use when
- You want to show a number counting up — use `rolling-number`.
- The claim needs a code-style reveal — use `uncomment-line`.
- You need a longer line with several words animating in — use `staggered-fade-up`.

---

# Cooling Type
URL: https://remocn.dev/docs/typography/cooling-type

A sentence types out glowing hot and cools to ink, ending on an italic serif word and a caret.

- Install: `npx shadcn@latest add @remocn/cooling-type`
- Vibe: premium
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cooling-type
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CoolingType } from "@/components/remocn/cooling-type";

const CoolingTypeScene = () => (
  <CoolingType
    text="What if your launch video could write itself?"
    accentWord="itself?"
    charFrames={1.6}
  />
);

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

Characters type in with a slightly irregular rhythm, each one starting in a hot color and cooling to the ink color; the accent word breathes in as serif italic and a caret finishes the line. Pass `text` and `accentWord`, and tune `charFrames` and `coolFrames` for pace; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"What if your launch video could write itself?"` | Sentence to type out |
| `accentWord` | `string` | `"itself?"` | Word in the text set in serif italic |
| `hot` | `string` | — | Color of freshly typed characters |
| `accent` | `string` | — | Color of the accent word and caret |
| `ink` | `string` | — | Settled text color |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `ground` | `GshPresetId` | — | Gradient ground preset id |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters to tune the ground |
| `startAt` | `number` | `BEAT.start` | Frame the first character appears |
| `charFrames` | `number` | `1.6` | Frames per character before pacing variation |
| `coolFrames` | `number` | `20` | Frames for a character to cool from hot to ink |
| `seed` | `number` | `5` | Seed for the typing rhythm jitter |

## Use when
- A question or hook line that should feel written live, ending on an emphasized word.
- A cinematic title beat over a gradient ground where typing energy matters more than speed.

## Don't use when
- You want a plain typed line with a blinking caret - use `typewriter`.
- You want every letter to land with a bounce - use `per-character-rise`.
- The text is a short label, not a sentence - use `tracking-in`.

---

# Counter Reveal
URL: https://remocn.dev/docs/typography/counter-reveal

A huge front word reveals a second line through the counters of its letters over a gradient.

- Install: `npx shadcn@latest add @remocn/counter-reveal`
- Vibe: clean
- Natural length: 128f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/counter-reveal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CounterReveal } from "@/components/remocn/counter-reveal";

const CounterRevealScene = () => (
  <CounterReveal word="Beta" line="Out now." accent="#3B5BFD" />
);

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

A giant front word rises letter by letter, then shrinks and drifts away so its counters open onto the second line behind it, which settles in. Pass `word` for the big text and `line` for the revealed line; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Beta"` | Large front word whose counters reveal the line |
| `line` | `string` | `"Out now."` | Secondary line shown behind the word |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A bold one-word status beat such as Beta or Live that hides a secondary line inside its letters.
- An announcement where a giant word shrinks away to reveal the detail behind it.

## Don't use when
- The front word has few closed letterforms to reveal through - use `mask-reveal-up`.
- You want both lines visible at once - use `staggered-fade-up`.
- You need a simple word-by-word exit - use `blur-out-up`.

---

# Cover Ring
URL: https://remocn.dev/docs/typography/cover-ring

An audio-style bar meter appears above a headline line that collapses into a closing caption over green light.

- Install: `npx shadcn@latest add @remocn/cover-ring`
- Vibe: premium
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cover-ring
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CoverRing } from "@/components/remocn/cover-ring";

const CoverRingScene = () => (
  <CoverRing
    images={[staticFile("shots/one.jpg"), staticFile("shots/two.jpg")]}
    line="Launch videos aren't edited anymore"
    caption="They're composed."
  />
);

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

Photo tiles flip in around a setup line, the line blurs away as the tiles collapse into a bar meter, and the caption lands with a pulse. Pass `images` with your own image paths (the defaults only exist in the Remocn repo), plus `line` and `caption`; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `images` | `string[]` | — | Image URLs for the tiles; pass your own, defaults are remocn-only |
| `line` | `string` | `"Launch videos aren't edited anymore"` | Setup line shown over the tiles |
| `caption` | `string` | `"They're composed."` | Closing caption shown after the collapse |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `background` | `string` | — | Overrides the theme's stage color |
| `ink` | `string` | — | Text color override |
| `accent` | `string` | — | Accent color (any valid CSS color) |
| `fog` | `string[]` | — | Gradient colors for the ground; overrides the theme |
| `ground` | `GshPresetId` | — | Gradient ground preset id |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters to tune the ground |

## Use when
- A launch statement over a collage of product photos that collapses into a punchline caption.
- A beat that moves from a long setup line to a short payoff with an audio-style meter.

## Don't use when
- You have no photos and want text only - use `staggered-fade-up`.
- You want a typed caption instead of a collapse - use `cooling-type`.
- The scene is a single line with no setup - use `tracking-in`.

---

# Coy Denial
URL: https://remocn.dev/docs/typography/coy-denial

A huge "Don't check the site at nine." with a sheepish "(Do.)" tucked into the corner

- Install: `npx shadcn@latest add @remocn/coy-denial`
- Vibe: playful
- Natural length: 144f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/coy-denial
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CoyDenial } from "@/components/remocn/coy-denial";

const CoyDenialScene = () => <CoyDenial rounds={[{ say: "Nothing is launching on Thursday.", aside: "(Something is.)" }]} />;

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

A big statement builds word by word, then a sheepish parenthetical aside appears in the corner that contradicts it; the round exits and the next one follows. Pass `rounds` (say and aside pairs); it fits the pace to the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `rounds` | `CoyDenialRound[]` | `DEFAULT_ROUNDS` | Statement and aside pairs, played in turn. |
| `accent` | `string` | — | Color of the corner aside; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A teaser where a loud denial is quietly undone by a tiny aside.
- A comedic beat in a launch video, pairing a statement with its contradiction.
- A short back-to-back sequence of two or three denial and aside pairs.

## Don't use when
- The punchline is an attribution below a quote — use `deadpan-box`.
- You want the answer to come first, big — use `answer-first`.
- You need a hesitant start answered by a bold reply — use `no-buts`.

---

# Crew of One
URL: https://remocn.dev/docs/typography/crew-of-one

A credits roll, Written by / Directed by / Shipped by, all pointing at a big "you"

- Install: `npx shadcn@latest add @remocn/crew-of-one`
- Vibe: playful
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/crew-of-one
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CrewOfOne } from "@/components/remocn/crew-of-one";

const CrewOfOneScene = () => <CrewOfOne roles={["Written by", "Directed by", "Shipped by"]} name="you" />;

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

Credit-style role lines roll upward in turn, then gather into place under a large name that has been waiting at the center. Pass `roles` (one string per credit) and `name`; it spaces the roll to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `roles` | `string[]` | — | Credit lines such as Written by, rolled in order. |
| `name` | `string` | `"you"` | The big name all roles point at. |
| `accent` | `string` | — | Color of the name; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A credits-roll joke where one person plays every role, ending on who they are.
- A solo-builder message that lists the jobs a tool takes off your plate.
- A closing credits beat for a launch or demo video.

## Don't use when
- You want a list of benefits rather than credits — use `feature-trio`.
- The list should end on the audience, not a name — use `and-you`.
- You want the viewer addressed in several lines — use `they-are-you`.

---

# Crunch
URL: https://remocn.dev/docs/typography/crunch

A timestamped story line, "It shipped, with time to ...", fades in over a dark brown ground

- Install: `npx shadcn@latest add @remocn/crunch`
- Vibe: paper
- Natural length: 170f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/crunch
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Crunch } from "@/components/remocn/crunch";

const CrunchScene = () => <Crunch setup={{ slug: "Monday, 10:00 AM", line: "Maya had a launch on Friday." }} snag={{ slug: "Thursday, 11:40 PM", line: "Nine hours left, and still no video." }} />;

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

A timestamped story plays in three beats: a setup line fades out, a tense snag line sits in a column that squeezes tighter and tighter, then the walls release and a calm resolution line arrives. Pass `setup`, `snag` and `resolution`, each with a `slug` (timestamp) and `line`; beats stretch with the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `setup` | `StoryBeat` | `DEFAULT_SETUP` | First beat: a timestamp slug and a line. |
| `snag` | `StoryBeat` | `DEFAULT_SNAG` | Middle beat shown in the squeezing column. |
| `resolution` | `StoryBeat` | `DEFAULT_RESOLUTION` | Final beat that arrives after the release. |
| `accent` | `string` | — | Color for the slug and resolution; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A short story beat about a deadline, told in timestamped lines that build pressure.
- A problem-to-relief arc where the middle line should feel cramped.
- A narrative intro to a product where the last line is the resolution.

## Don't use when
- You want several timestamped lines drifting past rather than one squeeze — use `story-dip`.
- The story is a single dated line — use `overnight`.
- You need a plain statement with no narrative arc — use `soft-blur-in`.

---

# Cursor Frame
URL: https://remocn.dev/docs/typography/cursor-frame

A selection frame with handles and a size badge is dragged and resized around a headline, rewrapping it.

- Install: `npx shadcn@latest add @remocn/cursor-frame`
- Vibe: clean
- Natural length: 184f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cursor-frame
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CursorFrame } from "@/components/remocn/cursor-frame";

const CursorFrameScene = () => (
  <CursorFrame title="Launch videos, in code." theme="light" accent="#3B5BFD" />
);

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

Words fade in, a cursor presses and drags a selection frame over them, then resizes it so the headline rewraps onto two lines before the frame clears. Pass `title` for the headline; it ships light and dark through `theme` and defaults to light.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Launch videos, in code."` | Headline that gets selected and rewrapped |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"light"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A design-tool style beat where the headline is selected, moved and resized live.
- A product video about layout or editing that should show the text responding to a frame.

## Don't use when
- You want the headline to just appear - use `staggered-fade-up`.
- You want a typing effect rather than a drag interaction - use `typewriter`.
- You want a highlighter pass over a phrase - use `marker-highlight`.

---

# Cut Off
URL: https://remocn.dev/docs/typography/cut-off

A line is cut off by a white reply card: "Or let the code cut it."

- Install: `npx shadcn@latest add @remocn/cut-off`
- Vibe: playful
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cut-off
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CutOff } from "@/components/remocn/cut-off";

const CutOffScene = () => <CutOff line="So first I export the clips, redo all the captions, then line up the mus" reply="Or let the code cut it." highlight="the code" />;

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

A line types in word by word and breaks off mid-word with a dash, then a card cuts in and the reply words land on it in a hard hit, with one phrase highlighted. Pass `line` (the sentence that gets cut off), `reply` and `highlight`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `line` | `string` | `"So first I export the clips, redo all the captions, then line up the mus"` | The sentence that is cut off; its last word is broken mid-word. |
| `reply` | `string` | `"Or let the code cut it."` | The words that land on the card after the cut. |
| `highlight` | `string` | `"the code"` | Phrase in the reply set in the accent color. |
| `accent` | `string` | — | Color for the highlighted phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A joke where a long, tedious explanation is interrupted by a short, better answer.
- A before-and-after beat showing a slow workflow cut short by a simple one.
- A two-part message where the second half should land as a hard hit.

## Don't use when
- The setup should be answered with a sheepish aside, not a hard cut — use `coy-denial`.
- You want a hesitant start answered by a bold reply — use `no-buts`.
- You need a shutter-style cut off of a line — use `peek-shut`.

---

# Deadpan Box
URL: https://remocn.dev/docs/typography/deadpan-box

A flat, deadpan quote in a blue box with a small attribution line

- Install: `npx shadcn@latest add @remocn/deadpan-box`
- Vibe: clean
- Natural length: 126f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/deadpan-box
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DeadpanBox } from "@/components/remocn/deadpan-box";

const DeadpanBoxScene = () => <DeadpanBox quote="Nobody watches launch videos." attribution="Founder. Nobody watched the launch." brand="remocn" />;

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

A small box showing the brand logo grows to hug a flat quote, which holds for a deadpan beat; then the box floods the whole frame and the attribution line lands the joke before a brand sign-off. Pass `quote`, `attribution` and `brand` ("remocn" renders the real logo, anything else is set as a wordmark).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `quote` | `string` | `"Nobody watches launch videos."` | The setup, without quote marks: curly marks are added and hung for you. |
| `attribution` | `string` | `"Founder. Nobody watched the launch."` | The deadpan attribution that lands the joke after a pause. |
| `brand` | `string` | `"remocn"` | Brand name; "remocn" renders the real logo, anything else a wordmark. |
| `accent` | `string` | `"#3B5BFD"` | Main color of the gradient field inside the box. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A joke or punchline beat where a quiet setup is flipped by the attribution that follows.
- A bold, minimal quote card that should end with the brand signing off.
- A social-style card that starts as a masthead and expands into a full-frame statement.

## Don't use when
- The quote is sincere praise from a real customer — use `quote-hero`.
- You want a quick one-line reveal with no setup and punchline — use `soft-blur-in`.
- The setup needs a follow-up aside in a corner rather than a flood — use `coy-denial`.

---

# Depth Headline
URL: https://remocn.dev/docs/typography/depth-headline

A huge serif headline sits behind a gradient sphere that slides in front of it for a sense of depth.

- Install: `npx shadcn@latest add @remocn/depth-headline`
- Vibe: premium
- Natural length: 62f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/depth-headline
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DepthHeadline } from "@/components/remocn/depth-headline";

const DepthHeadlineScene = () => (
  <DepthHeadline title="Studio" caption="Studio" showLogo accent="#3B5BFD" />
);

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

The headline opens and rises behind a sphere that glides across the frame, with a caption and logo fading in underneath. Pass `title` and `caption`, and pass `src` with a transparent cutout image to replace the default sphere; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Studio"` | Large headline placed behind the subject |
| `src` | `string` | — | Cutout image shown in front of the title; defaults to a sphere |
| `caption` | `string` | `"Studio"` | Small caption beside the logo |
| `showLogo` | `boolean` | `true` | Show the logo mark next to the caption |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A product name or hero word that should feel layered with an object in front of it.
- An opening title where a subject, such as a cutout image, passes in front of the type.

## Don't use when
- The headline needs to read clearly with nothing overlapping it - use `staggered-fade-up`.
- You want letters to rise individually - use `per-character-rise`.
- You want a calm blur-in title - use `soft-blur-in`.

---

# Diff Swap
URL: https://remocn.dev/docs/typography/diff-swap

A code-diff style edit rewrites a before line into the after line with the changed part highlighted.

- Install: `npx shadcn@latest add @remocn/diff-swap`
- Vibe: tech
- Natural length: 102f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/diff-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DiffSwap } from "@/components/remocn/diff-swap";

const DiffSwapScene = () => (
  <DiffSwap before="Keyframe every frame by hand." after="Install the scene. Edit the props." highlight="Edit the props." />
);

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

The `before` line is struck through as a deletion while the `after` line appears as an addition, with `highlight` marked in the accent color. Pass `before`, `after` and `highlight`. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Keyframe every frame by hand."` | Line shown as the removed text. |
| `after` | `string` | `"Install the scene. Edit the props."` | Line shown as the added text. |
| `highlight` | `string` | `"Edit the props."` | Part of `after` marked in the accent color. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A dev-tool beat showing the old painful way replaced by the new one.
- A changelog scene presenting one line removed and one added.
- A before-and-after claim that should look like a version-control change.

## Don't use when
- The change is a single word inside a sentence — use `strikethrough-replace`.
- Text should be selected then retyped like an editor — use `select-replace`.
- The audience is non-technical and a diff would confuse — use `layout-swap`.

---

# Dot Type
URL: https://remocn.dev/docs/typography/dot-type

Words are drawn from a field of round dots in a gradient, with the last word set in the accent.

- Install: `npx shadcn@latest add @remocn/dot-type`
- Vibe: tech
- Natural length: 158f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/dot-type
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DotType } from "@/components/remocn/dot-type";

const DotTypeScene = () => (
  <DotType words={["Think.", "Make.", "Ship."]} count={1500} accent="#3B5BFD" />
);

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

A dot field collapses into the first word, then each next word reforms from the same dots in turn; the final word can take the accent color. Pass `words` and tune `count` for dot density; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `DEFAULT_WORDS` | Words shown in order, each formed from the dots |
| `accentLast` | `boolean` | `true` | Color the final word with the accent |
| `count` | `number` | `1500` | Number of dots in the field; minimum 300 |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A rapid sequence of single words such as Think, Make, Ship, each formed from dots.
- A tech-flavored title card where type should assemble from a particle field.

## Don't use when
- The words must stay readable at small sizes - use `typewriter`.
- You want a glitchy decode instead of dots - use `matrix-decode`.
- You want one word swapping through options - use `slot-machine-roll`.

---

# Double Take
URL: https://remocn.dev/docs/typography/double-take

"Read that again." above an oversized pink "One person" on blue

- Install: `npx shadcn@latest add @remocn/double-take`
- Vibe: playful
- Natural length: 134f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/double-take
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DoubleTake } from "@/components/remocn/double-take";

const DoubleTakeScene = () => <DoubleTake text="One person wrote this entire launch video over a single lunch break." focus="One person" cue="Read that again." />;

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

A line crawls in word by word, stops, then rewinds and zooms back onto one phrase, which lights up in the accent color over a small cue line. Pass `text`, `focus` (the phrase to land on) and `cue`; it compresses to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"One person wrote this entire launch video over a single lunch break."` | The full sentence that crawls in. |
| `focus` | `string` | `"One person"` | Phrase the view rewinds and zooms to. |
| `cue` | `string` | `"Read that again."` | Small line shown above the highlighted phrase. |
| `accent` | `string` | — | Color of the highlighted phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A surprising claim that deserves a second look, such as a team-size or time-to-make stat.
- A sentence where one phrase is the whole point and should be highlighted after a rewind.
- A playful beat that tells the viewer to read it again.

## Don't use when
- The surprise is the answer to a question — use `answer-first`.
- You want a phrase lifted out of a sentence as a title — use `hidden-word`.
- The line should rewrite itself instead of rewinding — use `changed-mind`.

---

# Drop Timer
URL: https://remocn.dev/docs/typography/drop-timer

A countdown to a drop ends in a huge gradient 'LIVE NOW' with a URL and logo

- Install: `npx shadcn@latest add @remocn/drop-timer`
- Vibe: playful
- Natural length: 111f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/drop-timer
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DropTimer } from "@/components/remocn/drop-timer";

const DropTimerScene = () => (
  <DropTimer label="DROPS IN" from={5} live="LIVE NOW" url="acme.dev" />
);

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

A clock counts down from `from` seconds, one film second per `tick` frames, and at zero it smashes into a full-bleed gradient payoff with your name, URL and a live dot. Pass `label`, `from`, `live`, `name` and `url`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"DROPS IN"` | Small line over the countdown. |
| `from` | `number` | `5` | Seconds on the clock when the shot opens; it counts down to zero. |
| `tick` | `number` | `14` | Frames per counted second (a film second, not a real one). |
| `units` | `[string, string, string]` | `["HRS", "MIN", "SEC"]` | Unit captions under the three digit pairs. |
| `live` | `string` | `"LIVE NOW"` | What the clock smashes into at zero, set full-bleed. |
| `name` | `string` | `"remocn"` | Brand over the payoff; "remocn" renders the real logo. |
| `logo` | `React.ReactNode` | — | Replaces the logo / name over the payoff. |
| `url` | `string` | `"remocn.dev"` | Line under the payoff. |
| `accent` | `string` | `"#3B5BFD"` | The small "live" dot beside the url. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A product drop or launch teaser that counts down and smashes into a huge LIVE NOW payoff.
- A release-day video that ends on a URL and your logo.

## Don't use when
- You want an escalating word sequence instead of a clock — use `escalate-cards`.
- You want a rolling number, not a countdown — use `rolling-number`.

---

# Echo Stack
URL: https://remocn.dev/docs/typography/echo-stack

A word focuses in at the center while outline copies of it unfold above and below and keep drifting, like the one clear line on a spinning drum

- Install: `npx shadcn@latest add @remocn/echo-stack`
- Vibe: premium
- Natural length: 26f @ 30fps

## Installation

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

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { EchoStack } from "@/components/remocn/echo-stack";

const Beat = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <EchoStack text="Bold." />
  </AbsoluteFill>
);

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

The word focuses in over 14 frames. From frame 8 the echoes unfold out of it:
the column starts compressed and opens to its full pitch by frame 26. After
that the column keeps scrolling one row every `cycle` frames in `direction`,
and loops without a seam. Echoes are hidden while they pass behind the word
and fade out toward the edges, so only about `echoes` rows show on each side.

The echo outline is built from the filled glyphs with an SVG filter rather than
a text stroke. Variable fonts keep overlapping contours inside letters like M
and K, and a text stroke draws them. The component paints no background and
centers the word in its parent. Sizes scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Bold."` | The word at the center |
| `fontSize` | `number` | `170` | Font size in reference px at 720p |
| `fontWeight` | `number` | `800` | Font weight |
| `fontFamily` | `string` | `Inter` | Font family |
| `color` | `string` | `"#fafafa"` | Color of the main word |
| `echoColor` | `string` | `same as color` | Outline color of the echoes |
| `echoes` | `number` | `3` | Echo rows on each side before they fade out |
| `echoOpacity` | `number` | `0.35` | Opacity of the nearest echo |
| `strokeWidth` | `number` | `1.5` | Echo outline width in reference px |
| `direction` | `"up" \| "down"` | `"up"` | Which way the column drifts |
| `cycle` | `number` | `60` | Frames for the column to move one row |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A one-word statement (a value, a promise) should hold the screen for a while and still feel alive.
- You want repetition to add weight to a word without adding any other text.
- A beat in a sequence of single words, where each word gets the same treatment and only the text changes.

## Don't use when
- The word should just appear and stay still — use `focus-blur-resolve`.
- The repeats should run sideways as a strip of text — use `infinite-marquee`.
- The screen should fill with rows of text rather than a column around one word — use `type-wall`.

---

# Edge Fit
URL: https://remocn.dev/docs/typography/edge-fit

A single huge cream word, 'recaps', fills the frame edge to edge with a caption and logo

- Install: `npx shadcn@latest add @remocn/edge-fit`
- Vibe: playful
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/edge-fit
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EdgeFit } from "@/components/remocn/edge-fit";

const EdgeFitScene = () => (
  <EdgeFit words={["intros", "teasers", "recaps"]} caption="Fresh from the registry" />
);

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

Each word is fitted to the full frame width and its letters rise in, one word after another, with a caption and logo beneath. Pass `words`, `caption` and your own `logo`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["intros", "teasers", "recaps"]` | Words shown one at a time, each fitted edge to edge. |
| `caption` | `string` | `"Fresh from the registry"` | Small line under the word. |
| `logo` | `React.ReactNode \| null` | — | Logo node under the word; null hides it. |
| `letterGap` | `number` | `3` | Frames between each letter rising in. |
| `hold` | `number` | `14` | Frames the text holds before the next beat. |
| `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 rapid word montage where each word fills the frame edge to edge.
- A closing beat that names the kinds of things you can make, with a caption and logo.

## Don't use when
- You want a stacked multi-word slogan — use `chunk-stack`.
- You want hard slams with condensed caps — use `full-bleed-type`.

---

# Edit Ripple
URL: https://remocn.dev/docs/typography/edit-ripple

"Change your mind, render it again." with the second line indented and ripple-coloured

- Install: `npx shadcn@latest add @remocn/edit-ripple`
- Vibe: clean
- Natural length: 196f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/edit-ripple
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EditRipple } from "@/components/remocn/edit-ripple";

const EditRippleScene = () => <EditRipple pairs={[{ cause: "Change one word,", effect: "every scene follows." }, { cause: "Swap the color,", effect: "every shot repaints." }]} />;

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

Each pair appears as a cause line followed by an effect line, and the effect words recolor in a ripple from left to right; then the pair exits and the next pair follows. Pass `pairs` (cause and effect strings); it spaces the pairs to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `pairs` | `EditRipplePair[]` | `DEFAULT_PAIRS` | Cause and effect lines, played one pair at a time. |
| `accent` | `string` | — | Color of the effect words as the ripple passes. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A beat about cause and effect, such as one edit changing the whole video.
- Two or three short if-this-then-that statements in a row.
- A feature explanation where the second line is the payoff of the first.

## Don't use when
- You want objections each answered in turn — use `exactly`.
- You need one sentence to edit itself in place — use `changed-mind`.
- You want a word-by-word diff of before and after — use `diff-swap`.

---

# Ellipsis Resolve
URL: https://remocn.dev/docs/typography/ellipsis-resolve

Three pulsing dots resolve into a gradient word and a closing period.

- Install: `npx shadcn@latest add @remocn/ellipsis-resolve`
- Vibe: clean
- Natural length: 94f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ellipsis-resolve
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EllipsisResolve } from "@/components/remocn/ellipsis-resolve";

const EllipsisResolveScene = () => (
  <EllipsisResolve word="Shipped" accent="#3B5BFD" />
);

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

Three dots pulse in turn, stretch apart, and a gradient sweep turns them into the letters of the word, ending on a period. Pass `word` to set the result; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Shipped"` | Word the three dots resolve into |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A loading-to-done beat where a thinking indicator turns into a result word like Shipped.
- A punchy one-word payoff that should follow a short build-up.

## Don't use when
- The payoff is a full sentence - use `typewriter`.
- You want a swap between two words - use `slot-machine-roll`.
- You want letters to stagger in with no dots - use `per-character-rise`.

---

# Embargo Lift
URL: https://remocn.dev/docs/typography/embargo-lift

"remocn is free, open source and out today" in condensed type with a green accent

- Install: `npx shadcn@latest add @remocn/embargo-lift`
- Vibe: clean
- Natural length: 102f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/embargo-lift
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EmbargoLift } from "@/components/remocn/embargo-lift";

const EmbargoLiftScene = () => <EmbargoLift lines={["remocn is [free],", "[open source]", "and [out today]."]} slug="Embargoed until 9:00 a.m." liftedSlug="Embargo lifted, 9:00 a.m." />;

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

The lines show with bracketed phrases hidden behind redaction bars under an embargo slug; the slug flips to the lifted version and the bars lift one at a time to reveal the words. Mark hidden phrases in `lines` with square brackets, and pass `slug`, `liftedSlug` and `highlight` (the bar that gets the accent).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Lines of text; wrap phrases in square brackets to hide them behind bars. |
| `slug` | `string` | `"Embargoed until 9:00 a.m."` | Label shown while the bars are still down. |
| `liftedSlug` | `string` | `"Embargo lifted, 9:00 a.m."` | Label shown once the embargo lifts. |
| `highlight` | `number` | — | Index of the bar that takes the accent; defaults to the last. |
| `accent` | `string` | — | Color of the highlighted bar; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A launch-day announcement where the key facts are revealed from behind redaction bars.
- A press-embargo style teaser for a release date.
- A three-line statement where the important words are uncovered one by one.

## Don't use when
- You want a plain one-line reveal with no redaction look — use `mask-reveal-up`.
- You are thanking testers instead of announcing — use `beta-thanks`.
- The reveal should come from a transition between two scenes — use `fade-through`.

---

# Enhance Count
URL: https://remocn.dev/docs/typography/enhance-count

A blurred, thin line sharpens in place into a heavier weight, with the last word in the accent.

- Install: `npx shadcn@latest add @remocn/enhance-count`
- Vibe: clean
- Natural length: 87f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/enhance-count
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EnhanceCount } from "@/components/remocn/enhance-count";

const EnhanceCountScene = () => (
  <EnhanceCount text={"Draft it fast.\nFinish it sharp."} highlight="sharp." />
);

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

The text enters thin and blurred, then each glyph sharpens and gains weight in a quick sweep so the line reads as finished. Pass `text` (use a newline for a second line) and `highlight` for the accented words; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Draft it fast.\nFinish it sharp."` | Text to show; newline starts a new line |
| `highlight` | `string` | `"sharp."` | Word or words shown in the accent color |
| `accent` | `string` | — | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A before and after message about quality, such as a rough draft becoming a finished piece.
- A two-line statement where the second line is the payoff.

## Don't use when
- You want a blur-in entrance only - use `focus-blur-resolve`.
- You need the text to change content, not weight - use `strikethrough-replace`.
- You want a simple fade-up - use `staggered-fade-up`.

---

# Escalate Cards
URL: https://remocn.dev/docs/typography/escalate-cards

Cards flash one word each, accelerating until the last word fills the frame over a date

- Install: `npx shadcn@latest add @remocn/escalate-cards`
- Vibe: premium
- Natural length: 65f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/escalate-cards
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EscalateCards } from "@/components/remocn/escalate-cards";

const EscalateCardsScene = () => (
  <EscalateCards words={["ONE", "CODEBASE", "EVERY", "LAUNCH"]} date="OCTOBER 30" accel={0.6} />
);

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

One word per card flashes in, each card shorter than the last, until the final word fills the frame and a date cuts in under it. Pass `words`, `date`, `firstBeat` and `accel`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["ONE", "CODEBASE", "EVERY", "LAUNCH"]` | One word per card, smallest first. The last one fills the frame and holds. |
| `date` | `string` | `"OCTOBER 30"` | Small line that cuts in under the last card. Pass "" to hide. |
| `firstBeat` | `number` | `26` | Length of the first card in frames. Every next card is shorter. |
| `accel` | `number` | `0.6` | Each card lasts this share of the one before: below 1 the cuts accelerate. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A rapid build-up where single words flash on cards, faster each time, until the last fills the frame.
- A date reveal under a final word for a launch announcement.

## Don't use when
- You want a countdown clock — use `drop-timer`.
- You want slams of condensed caps without cards — use `full-bleed-type`.

---

# Exactly
URL: https://remocn.dev/docs/typography/exactly

A yellow "Exactly." lands first, then "It's just code." completes the answer

- Install: `npx shadcn@latest add @remocn/exactly`
- Vibe: playful
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/exactly
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Exactly } from "@/components/remocn/exactly";

const ExactlyScene = () => <Exactly rounds={[{ objection: "It’s just code.", reply: "Exactly." }]} />;

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

Each round types an objection, which drops away as the reply lands beside it and reflows into the final answer; the next round follows. Pass `rounds` (objection and reply pairs); it compresses to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `rounds` | `ExactlyRound[]` | `DEFAULT_ROUNDS` | Objection and reply pairs, played in order. |
| `accent` | `string` | — | Color of the reply; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A beat that answers common objections with a one-word agreement.
- A short back-and-forth where the reply turns the objection into a selling point.
- A two-round sequence of doubt followed by confirmation.

## Don't use when
- You want the answer to appear before the question — use `answer-first`.
- The reply is a hard cut over the objection — use `cut-off`.
- The objections are small and the answer is one big sentence — use `in-proportion`.

---

# Extrude Pop
URL: https://remocn.dev/docs/typography/extrude-pop

A flat word pops up out of the plane on a solid colored 3D body, no camera involved

- Install: `npx shadcn@latest add @remocn/extrude-pop`
- Vibe: playful
- Natural length: 48f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/extrude-pop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ExtrudePop } from "@/components/remocn/extrude-pop";

const ExtrudePopScene = () => (
  <ExtrudePop letter="WIN" bodyColor="#e8192b" faceColor="#ffffff" />
);

export const RemotionRoot = () => (
  <Composition
    id="ExtrudePop"
    component={ExtrudePopScene}
    durationInFrames={90}
    fps={30}
    width={1920}
    height={1080}
  />
);
```

The body is the same glyph swept along the extrusion vector — a morphological
dilation drawn as stacked copies, back-to-front, with the white face riding the
near end. Face travel and extrusion depth are keyframed together, which is what
makes the word read as lifting off a plane rather than growing a shadow.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `letter` | `string` | `"WIN"` | The text to extrude — one short word reads best |
| `bodyColor` | `string` | `"#e8192b"` | Color of the extruded body |
| `faceColor` | `string` | `"#ffffff"` | Color of the front face |
| `fontFamily` | `string` | `"'Helvetica Neue', Helvetica, Arial, sans-serif"` | Font family of the glyph |
| `fontWeight` | `number \| string` | `700` | Font weight |
| `fontSize` | `number` | `603` | Font size in comp pixels |
| `maxTextWidth` | `number` | `1660` | Longer text auto-shrinks (font size and extrusion depth together) to fit this width in comp pixels |
| `basePosition` | `[number, number]` | `[959.2, 752.5]` | Baseline anchor of the body layer in comp pixels |
| `minimaxRadius` | `number` | `80` | Dilation radius. The extrusion depth is twice this |
| `extrudeAngleDeg` | `number` | `-58.6` | Direction of the extrusion in degrees |
| `extrudeSteps` | `number` | `200` | Copies making up the body — above the depth in pixels it is seamless |
| `extrudeStartFrame / extrudeEndFrame` | `number` | `0 / 48` | The pop window. The extrusion eases out and holds after the end frame |
| `width / height` | `number` | `1920 / 1080` | Coordinate space of the composition |
| `className` | `string` | — | Optional className passed to the wrapper |

Inspired by [5 Clean Text Animations](https://www.youtube.com/watch?v=Nmi7cE2wT54) by Mapal.

## Use when
- A short punchy word — a score, a verdict, a CTA — should land with physical weight, like a stamp rising off the page.
- You want a faux-3D pop without touching cameras or 3D transforms — it's a 2D extrusion that renders identically everywhere.
- The scene has a flat poster aesthetic where a solid-color body reads as intentional design, not as a shadow.

## Don't use when
- The text is long or small — the extruded body doubles the ink and turns a sentence into mush; keep it to one short word.
- You need real perspective or a moving camera — the extrusion angle is fixed; this sells one static viewpoint.
- The style is minimal or elegant — the effect is loud by design; use `spring-scale-in` for a softer pop.

---

# Factor Out
URL: https://remocn.dev/docs/typography/factor-out

Three short imperatives stack above a big blue "in your editor."

- Install: `npx shadcn@latest add @remocn/factor-out`
- Vibe: clean
- Natural length: 153f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/factor-out
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FactorOut } from "@/components/remocn/factor-out";

const FactorOutScene = () => <FactorOut heads={["Write the scenes", "Pick the colors", "Fix the typos"]} tail="in your editor." />;

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

Short imperative lines enter one by one and align, then the shared tail merges out of them: lines collapse one at a time until a single stack sits above a big tail phrase. Pass `heads` (the repeated beginnings) and `tail` (the shared ending).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `heads` | `string[]` | `DEFAULT_HEADS` | Short repeated lines that stack, one per row. |
| `tail` | `string` | `DEFAULT_TAIL` | Shared ending shown large after the lines merge. |
| `accent` | `string` | — | Color of the tail phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A feature beat where several actions share one location, tool or result.
- A list of three short imperatives that should resolve into one claim.
- A where-it-happens line, such as in your editor or in your repo.

## Don't use when
- The lines are separate claims to be dimmed toward one — use `what-sticks`.
- You want three single feature words with notes — use `feature-trio`.
- You need a long list of steps to be folded away — use `chore-fold`.

---

# Fade Through
URL: https://remocn.dev/docs/typography/fade-through

Old text fades out as new fades in with a soft delay, Material-style

- Install: `npx shadcn@latest add @remocn/fade-through`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/fade-through
```

## Usage

```tsx
// src/Root.tsx
import { Composition, Sequence } from "remotion";
import { FadeThrough } from "@/components/remocn/fade-through";

const FadeThroughScene = () => (
  <>
    <Sequence durationInFrames={40}>
      <FadeThrough fromText="Calm transitions." toText="Fade through content." />
    </Sequence>
    <Sequence from={40} durationInFrames={40}>
      <FadeThrough fromText="Fade through content." toText="Focus shifts smoothly." />
    </Sequence>
  </>
);

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

Chaining two instances in back-to-back `Sequence`s walks through a full phrase chain — the second transition reuses the first's `toText` as its `fromText`, so the text flows A → B → C. The component transitions from one phrase to another with a Material-style fade-through. The old phrase fades and lifts away, then the new phrase fades up into the same slot with a soft scale and blur settle—no directional meaning, good for same-level content swaps.

### Chained example

This is the two-`Sequence` chain above rendered on an 80-frame timeline:

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { FadeThrough } from "@/components/remocn/fade-through";
import { Backdrop } from "@/components/remocn/backdrop";

const FadeThroughScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <FadeThrough
      fromText="Calm transitions."
      toText="Fade through content."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The outgoing phrase, shown first then fades out. |
| `toText` (required) | `string` | — | The incoming phrase that fades through to replace it. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- One label, stat, or short phrase needs to swap cleanly into another in the same slot.
- The transition should be neutral and unobtrusive — content changes, nothing moves.
- You're following Material motion guidelines where the gap between out and in reinforces the content change.

## Don't use when
- You want the incoming words to arrive one by one — use `per-word-crossfade` for a sequential word-level fade instead.
- The A→B swap should carry kinetic weight or directional momentum — use `line-by-line-slide` (slide direction) or `blur-out-up` (upward drift).
- There is no outgoing text (first entrance only) — skip the "from" slot and use `micro-scale-fade` or `mask-reveal-up` for a single entrance.

---

# Feather Settle
URL: https://remocn.dev/docs/typography/feather-settle

Words drift down and sway like feathers before settling into a sentence, with one phrase highlighted.

- Install: `npx shadcn@latest add @remocn/feather-settle`
- Vibe: clean
- Natural length: 111f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/feather-settle
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FeatherSettle } from "@/components/remocn/feather-settle";

const FeatherSettleScene = () => (
  <FeatherSettle text="Your launch, landing softly." highlight="softly" stagger={13} />
);

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

Each word falls from above with a gentle side-to-side sway and tilt, staggered in order, and settles into the sentence; `highlight` is set in the accent. Pass `text`, `stagger`, `fall` and `sway` to tune the drift; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Your launch, landing softly."` | Sentence whose words fall in one by one |
| `highlight` | `string` | `"softly"` | Word or phrase shown in the accent color |
| `stagger` | `number` | `13` | Frames between words starting to fall |
| `fall` | `number` | `68` | Frames each word takes to fall into place |
| `sway` | `number` | `1` | Side-to-side drift multiplier; 0 falls straight |
| `accent` | `string` | — | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A calm, reassuring closing line such as a soft landing or a gentle sign-off.
- A beat where words should arrive slowly and organically rather than snap in.

## Don't use when
- You need a fast, energetic entrance - use `rush-type`.
- You want words to drop and bounce rather than float - use `baseline-drop`.
- You want a controlled blur reveal - use `soft-blur-in`.

---

# Feature Chips Flow
URL: https://remocn.dev/docs/typography/feature-chips-flow

Rows of feature pills stream by, then snap into a cluster around the logo

- Install: `npx shadcn@latest add @remocn/feature-chips-flow`
- Vibe: playful
- Natural length: 108f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/feature-chips-flow
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FeatureChipsFlow } from "@/components/remocn/feature-chips-flow";

const FeatureChipsFlowScene = () => (
  <FeatureChipsFlow features={["Captions", "Transitions", "Templates", "Export"]} name="Acme" />
);

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

Rows of feature chips stream across the frame, the first ones converge and snap into a cluster around the logo, and the rest dissolve. Pass `features` (strings or chips with icon and variant), `name` and your own `logo`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `features` | `(string \| FeatureChip)[]` | `DEFAULT_FEATURES` | The first ~22 land in the cluster; the rest stream by and dissolve. |
| `name` | `string` | `"remocn"` | "remocn" (default) renders the real remocn.dev logo; anything else is set as type. |
| `logo` | `React.ReactNode` | — | Shown before a custom `name` (ignored for the built-in logo). |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A feature overview where rows of pills stream past and then snap into a cluster around the product logo.
- A closing montage that shows breadth: many small capabilities converging on the brand.

## Don't use when
- You only have three features to show properly — use `feature-trio`.
- You want features as a list that scrolls — use `index-list`.

---

# Feature Headline
URL: https://remocn.dev/docs/typography/feature-headline

A tag pill opens from the left, then a headline rises word by word with a supporting subhead.

- Install: `npx shadcn@latest add @remocn/feature-headline`
- Vibe: premium
- Natural length: 39f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/feature-headline
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FeatureHeadline } from "@/components/remocn/feature-headline";

const FeatureHeadlineScene = () => (
  <FeatureHeadline
    tag="New"
    label="Captions"
    headline="Captions that move with every word."
    highlight="every word"
  />
);

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

A pill with a tag and label opens, the headline words rise in turn with `highlight` in the accent, and the subhead fades in; with `exit` on, everything lifts away in the last frames of the Sequence. Pass `tag`, `label`, `headline`, `highlight` and `subhead`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `tag` | `string` | `"New"` | Short badge text inside the pill, such as New |
| `label` | `string` | `"Captions"` | Pill label; empty hides the pill |
| `headline` | `string` | `"Captions that move with every word."` | Main headline; words rise in one by one |
| `highlight` | `string` | `"every word"` | Phrase inside the headline shown in the accent color |
| `subhead` | `string` | `"31 transcript-driven caption styles, ready to drop into any video."` | Supporting line under the headline; empty to hide |
| `align` | `"left" \| "center"` | `"left"` | Text alignment: left or center |
| `exit` | `boolean` | `true` | Play an exit animation in the last frames |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A feature spotlight with a New tag, a one-line headline and a short subhead.
- A chapter title in a product tour that should enter and leave cleanly.

## Don't use when
- You need a centered cinematic title with no tag - use `tracking-in`.
- You want only a bare text exit - use `blur-out-up`.
- The headline needs a typed feel - use `typewriter`.

---

# Feature Trio
URL: https://remocn.dev/docs/typography/feature-trio

Three feature words, 'Fast. Composable. Open source.', rise from masks with progress ticks and notes

- Install: `npx shadcn@latest add @remocn/feature-trio`
- Vibe: clean
- Natural length: 133f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/feature-trio
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FeatureTrio } from "@/components/remocn/feature-trio";

const FeatureTrioScene = () => <FeatureTrio items={[{ title: "Fast.", description: "Drop in a scene and render it in minutes." }, { title: "Composable.", description: "Every piece is a React component you can remix." }]} />;

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

Each feature title rises from a mask with a note beneath it while progress ticks advance, and at the end all titles resolve into a compact row with their descriptions. Pass `items` (two to four title and description pairs); it spaces the beats to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `FeatureTrioItem[]` | `DEFAULT_ITEMS` | 2–4 short benefits. |
| `accent` | `string` | `"#3B5BFD"` | Color of the progress ticks and highlights. |
| `background` | `string` | — | Stage fill. "transparent" drops the stage and its glow. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A three-benefit summary beat for a product, one short word per benefit.
- A features recap near the end of a launch video that resolves into a tidy row.
- A list of two to four benefits where each needs a one-line note.

## Don't use when
- Each feature needs a screenshot or UI view — use `feature-headline`.
- The benefits are a numbered how-it-works flow — use `three-steps`.
- You want a numbered index of features with hairline rows — use `index-list`.

---

# Filler Cut
URL: https://remocn.dev/docs/typography/filler-cut

A transcript has its filler words cut, leaving a clean line, 'Ship your launch video today.'

- Install: `npx shadcn@latest add @remocn/filler-cut`
- Vibe: premium
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/filler-cut
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FillerCut } from "@/components/remocn/filler-cut";

const FillerCutScene = () => <FillerCut transcript="So, um, ship your, like, launch video, uh, today. You know?" keep="Ship your launch video today." highlight="today." />;

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

A spoken-style transcript appears with filler words marked, the filler is cut out one phrase at a time with a timecode, and the remaining words reflow and set into a clean headline with the last word highlighted. Pass `transcript` (the messy text), `keep` (the clean line) and `highlight`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `transcript` | `string` | `"So, um, ship your, like, launch video, uh, today. You know?"` | The raw spoken text, including the filler words. |
| `keep` | `string` | `"Ship your launch video today."` | The clean line; words not in it are cut. |
| `highlight` | `string` | `"today."` | Phrase in the clean line set in the accent color. |
| `showTime` | `boolean` | `true` | Show the running timecode while words are cut. |
| `accent` | `string` | `"#3B5BFD"` | End color of the gradient fill on the clean headline. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A captions or editing-tool demo that shows filler words being removed from speech.
- A before-and-after of a messy sentence becoming a clean message.
- A beat showing automatic clean-up of a spoken line.

## Don't use when
- You want a before line diffed into an after line — use `diff-swap`.
- A misspelled word should be corrected in place — use `typo-fix`.
- You want a block to overwrite each line with the next — use `block-swap`.

---

# Fine Print Up
URL: https://remocn.dev/docs/typography/fine-print-up

"No account and no watermark. Ever." in a big serif with tiny fine print at the bottom

- Install: `npx shadcn@latest add @remocn/fine-print-up`
- Vibe: premium
- Natural length: 221f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/fine-print-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FinePrintUp } from "@/components/remocn/fine-print-up";

const FinePrintUpScene = () => <FinePrintUp lines={["Every component you install is a file you own.", "No account and no watermark. Ever."]} closing="That’s all the fine print." />;

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

Each line is set big in turn with a star mark, then shrinks and travels down to the fine print at the bottom of the frame, and finally the closing line lands big. Pass `lines` (the claims) and `closing`; it spaces the lines to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `DEFAULT_LINES` | Claims set big first, then moved to the fine print. |
| `closing` | `string` | `"That’s all the fine print."` | Final big line shown after the fine print is built. |
| `accent` | `string` | — | Color of the star marks; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A terms or licensing beat where each promise turns into a line of fine print.
- A reassurance sequence that ends with a short, confident closing line.
- A list of three short claims that should be remembered, then archived.

## Don't use when
- You want claims to dim toward one highlight instead of moving to the footer — use `what-sticks`.
- You have a single license promise in big type — use `plain-license`.
- The claims are three benefit words — use `feature-trio`.

---

# Flank Roll Swap
URL: https://remocn.dev/docs/typography/flank-roll-swap

Two flanking words roll into new words around a photo placed in the middle of the line.

- Install: `npx shadcn@latest add @remocn/flank-roll-swap`
- Vibe: premium
- Natural length: 88f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/flank-roll-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FlankRollSwap } from "@/components/remocn/flank-roll-swap";

const FlankRollSwapScene = () => (
  <FlankRollSwap from={["Remocn", "Studio"]} to={["Out now", "on remocn.dev"]} accentWord="remocn.dev" images={["/photos/hero.jpg"]} />
);

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

A two-part line sits on either side of an image, then each side rolls letter by letter into the `to` pair while the pictures cycle. The default photos use `staticFile(...)` paths that only exist in the Remocn repo, so pass your own URLs in `images`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `[string, string]` | `["Remocn", "Studio"]` | Left and right words shown first. |
| `to` | `[string, string]` | `["Out now", "on remocn.dev"]` | Left and right words they roll into. |
| `accentWord` | `string` | `"remocn.dev"` | Word in `to` tinted with the accent color. |
| `images` | `string[]` | — | Image URLs cycled in the middle; defaults to repo-only files. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `ink` | `string` | — | Text color override; falls back to the theme ink. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `ground` | `GshPresetId` | — | Gradient ground preset id for the backdrop. |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters that tweak the chosen ground preset. |

## Use when
- A release announcement that swaps a studio name for an out-now line around a hero image.
- A brand beat that needs a picture inside the sentence, not behind it.
- A launch-day title card with a call to a URL.

## Don't use when
- You have no images and want a plain text swap — use `width-lock`.
- The photo should sit behind the text as a fill — use `photo-fill-type`.
- You want the headline to change by shifting layout, not rolling — use `layout-swap`.

---

# Flick Swap
URL: https://remocn.dev/docs/typography/flick-swap

A headline flicks up on a scrolling rail to swap between items, each with a label and a highlighted phrase.

- Install: `npx shadcn@latest add @remocn/flick-swap`
- Vibe: premium
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/flick-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FlickSwap } from "@/components/remocn/flick-swap";

const FlickSwapScene = () => (
  <FlickSwap
    items={[
      { label: "Captions", headline: "Every word lands on the beat.", highlight: "on the beat" },
      { label: "Transitions", headline: "Cuts that feel expensive.", highlight: "expensive" },
    ]}
    dwell={28}
  />
);

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

A rail on the side marks position while headlines scroll upward with a quick flick and settle, holding for `dwell` frames each. Pass `items` as label, headline and highlight objects; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `FlickSwapItem[]` | `DEFAULT_ITEMS` | List of items with label, headline and highlight phrase |
| `dwell` | `number` | `28` | Frames each item stays still between flicks |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A feature rundown where several one-line claims cycle through in one scene.
- A beat that lists categories, each with its own headline, without cutting between scenes.

## Don't use when
- You only have a single headline - use `feature-headline`.
- You want items to change in place with a crossfade - use `per-word-crossfade`.
- You want one word to roll through options - use `slot-machine-roll`.

---

# Focus Blur Resolve
URL: https://remocn.dev/docs/typography/focus-blur-resolve

A premium focus pull from heavy blur to crisp text, then a soft blur-out exit

- Install: `npx shadcn@latest add @remocn/focus-blur-resolve`
- Vibe: premium
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/focus-blur-resolve
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FocusBlurResolve } from "@/components/remocn/focus-blur-resolve";

const FocusBlurResolveScene = () => (
  <FocusBlurResolve text="Focus resolves clearly." blur={14} />
);

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

The text pulls from a heavy blur into sharp focus, holds steady in the middle of the composition, then softly blurs out near the end—so the duration should leave room for the exit animation.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { FocusBlurResolve } from "@/components/remocn/focus-blur-resolve";
import { Backdrop } from "@/components/remocn/backdrop";

const FocusBlurResolveScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <FocusBlurResolve text="Focus resolves clearly." blur={14} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `blur` | `number` | `14` | Initial blur radius in pixels the text resolves from. The exit blurs back out automatically. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A hero word or short phrase should feel like a camera lens pulling into focus.
- The scene calls for a full in-and-out arc in a single component without composing separate entrance and exit clips.
- Premium cinematic aesthetics are required — the blur depth conveys intentional production quality.

## Don't use when
- You want a clean departure upward after a crisp entrance — that arc belongs to `blur-out-up`, which arrives clean and exits with upward blur.
- The text is multiple lines or a paragraph — the blur radius is designed for a single short phrase; use `mask-reveal-up` or `line-by-line-slide` for multi-line reveals.
- The entrance should be sharp from frame one — use `kinetic-center-build` or `per-character-rise` when there should be no blurry opener.
- You want a blur entrance that holds crisp with no exit — `focus-blur-resolve` forces a blur-out departure; use `soft-blur-in` for an entrance-only blur reveal.

---

# Focus Front Swap
URL: https://remocn.dev/docs/typography/focus-front-swap

A headline pulls focus from line to line, blurring one out as the next comes forward, then ends on a logo.

- Install: `npx shadcn@latest add @remocn/focus-front-swap`
- Vibe: premium
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/focus-front-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FocusFrontSwap } from "@/components/remocn/focus-front-swap";

const FocusFrontSwapScene = () => (
  <FocusFrontSwap lines={["Remocn knows the beat", "You describe it once", "Ship it {tonight}."]} logo={false} />
);

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

Each line in `lines` sharpens into focus while the previous one blurs back, and a mark appears under the final line. Wrap a word in `{}` such as `{tonight}` to accent it, and set `logo={false}` to drop the mark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Headlines in order; wrap a word in curly braces to accent it. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `ink` | `string` | — | Text color override; falls back to the theme ink. |
| `logo` | `boolean` | `true` | Show the logo mark after the last line. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `ground` | `GshPresetId` | — | Gradient ground preset id for the backdrop. |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters that tweak the chosen ground preset. |
| `swap` | `number` | `BEAT.swap` | Frames between focus pulls. |
| `blur` | `number` | `18` | Maximum blur radius in pixels for out-of-focus lines. |

## Use when
- A rhythmic three-line pitch that ends on a call to ship now.
- A cinematic headline sequence over a soft gradient ground.
- A launch hook where each line builds on the last and the final word should pop.

## Don't use when
- Lines should swap by shifting layout rather than depth — use `layout-swap`.
- You need an object sweeping across the frame — use `pass-swap`.
- You want one word changed while the rest stays put — use `pinned-word`.

---

# Focus Pan Text
URL: https://remocn.dev/docs/typography/focus-pan-text

Earlier lines stack up blurred as focus pans down line by line to a final sentence and a small toolbar.

- Install: `npx shadcn@latest add @remocn/focus-pan-text`
- Vibe: premium
- Natural length: 113f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/focus-pan-text
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FocusPanText } from "@/components/remocn/focus-pan-text";

const FocusPanTextScene = () => (
  <FocusPanText
    lines={["The scan is clean.", "All 48 checks passed.", "You're ready to launch."]}
    meta="Just now"
  />
);

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

Each line is read in turn while earlier lines fall out of focus above; focus lands on the final line, the accent word lights up and a toolbar with `meta` text appears. Pass `lines` and `accentWord`; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `DEFAULT_LINES` | Lines shown in order; the last one is the payoff |
| `accentWord` | `string` | — | Word in the last line shown in the accent color |
| `meta` | `string` | `"Just now"` | Text in the toolbar after the final line |
| `accent` | `string` | — | Color of the accent word |
| `ink` | `string` | — | Text color override |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `ground` | `GshPresetId` | — | Gradient ground preset id |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters to tune the ground |
| `firstHold` | `number` | `30` | Frames the first line is held before panning on |

## Use when
- A step-by-step status sequence, such as checks passing, ending on a ready message.
- A narrative beat where several short lines build to one final statement.

## Don't use when
- You have only one sentence - use `focus-blur-resolve`.
- You want the lines to be typed - use `typewriter`.
- You want lines to replace each other in place - use `per-word-crossfade`.

---

# Fog Rise
URL: https://remocn.dev/docs/typography/fog-rise

Display text resolves out of fog center-out, sharpening from heavy blur with vertical streaks

- Install: `npx shadcn@latest add @remocn/fog-rise`
- Vibe: premium
- Natural length: 27f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/fog-rise
```

## Usage

The word starts lying face-down — rotated back around its baseline inside a real CSS perspective — and is thrown upright by a configurable spring (mass, stiffness, damping), travelling up as it stands while each character dissolves in from translucent blur. Characters start slightly spread apart and pull together on the same spring. The choreography has three phases, matching the reference: the enter — spring stand-up, lift and blur dissolve; a slow perpetual `drift` upward so the word never freezes; and at `exitAt` the exit, accelerating the word upward with no fade, meant to be hard-cut by the next scene. The reveal order runs center-out via `stagger`. Motion profile measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FogRise } from "@/components/remocn/fog-rise";

const FogRiseScene = () => <FogRise text="Remocn" />;

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. The reference look pairs a light text color with a dark-to-blue vertical gradient so the word reads as embedded in fog.

```tsx
import { Composition } from "remotion";
import { FogRise } from "@/components/remocn/fog-rise";
import { Backdrop } from "@/components/remocn/backdrop";

const FogRiseScene = () => (
  <Backdrop
    fill={{
      type: "gradient",
      value: "linear-gradient(180deg, #04070f 30%, #1e4f8f 100%)",
    }}
  >
    <FogRise text="Remocn" color="#eaf2ff" />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The display text |
| `fontSize` | `number` | `304` | Font size in pixels; blur, rise and streaks scale with it |
| `stagger` | `number` | `5` | Frames between each center-out ring of characters starting to resolve |
| `blur` | `number` | `0.17` | Starting blur of each character in em, dissolving linearly to sharp over resolveFrames |
| `tilt` | `number` | `55` | Starting rotateX in degrees — the word lies face-down at this angle and stands up to face the camera |
| `depth` | `number` | `5` | CSS perspective distance in multiples of fontSize; smaller is more dramatic foreshortening |
| `lift` | `number` | `0.85` | How far below its resting spot the word starts, in em — it travels up while standing up |
| `drift` | `number` | `0.005` | Slow upward crawl in em per frame between the enter settling and the exit — the word never freezes, matching the reference choreography |
| `exitAt` | `number` | `60` | Frame at which the exit starts: the word accelerates upward with no fade, meant to be hard-cut by the next scene. 0 disables the exit. |
| `exitAccel` | `number` | `0.04` | Upward exit acceleration in em per frame squared |
| `mass` | `number` | `1.3` | Spring mass of the stand-up motion — more mass, more inertia |
| `stiffness` | `number` | `60` | Spring force of the stand-up motion |
| `damping` | `number` | `13` | Spring damping — lower values overshoot with a visible bounce |
| `spreadGap` | `number` | `0.07` | Extra starting gap between characters in em, collapsing to zero as the word converges |
| `tracking` | `number` | `-0.07` | Resting letter-spacing in em |
| `resolveFrames` | `number` | `22` | Frames the blur dissolve takes; the stand-up motion itself is spring-driven |
| `fadeFrames` | `number` | `18` | Frames each character takes to fade in |
| `color` | `string` | `"#004CFF"` | Text color (any valid CSS color) |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A big display word should materialize out of atmosphere — already at its size and position, resolving from heavy blur as if rising along the z-axis.
- You want the center characters to resolve first and the edges to follow, each scaling up around its own centroid.
- The scene has a foggy or gradient backdrop the text should feel physically embedded in.

## Don't use when
- The whole line should sharpen at once without per-character order — use `focus-blur-resolve`.
- Characters should travel up from below the baseline — use `per-character-rise` or `bottom-up-letters`.
- You need a soft, small-scale heading entrance — use `soft-blur-in`; fog-rise is tuned for large display sizes.

---

# Font Cycle
URL: https://remocn.dev/docs/typography/font-cycle

One word rapidly cycles through typefaces, each labeled, before settling in its final face

- Install: `npx shadcn@latest add @remocn/font-cycle`
- Vibe: playful
- Natural length: 102f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/font-cycle
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FontCycle } from "@/components/remocn/font-cycle";

const FontCycleScene = () => (
  <FontCycle word="Shipped" passes={2} showLabel />
);

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

The word swaps through the `fonts` list for `passes` rounds, starting fast and slowing, with the font name shown as a small label under it. It then lands in the `final` face with a small settle and a gradient sheen while the guides fade. Pass `word`, and custom `fonts` or `final` only if their font families are already loaded in your project; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Launch"` | The word that cycles through the typefaces. |
| `fonts` | `FontCycleFace[]` | `DEFAULT_FONTS` | Faces to cycle through; each needs a loaded family and a label. |
| `final` | `FontCycleFace` | `FINAL_FACE` | Face the word settles into at the end. |
| `passes` | `number` | `2` | How many times the font list is cycled. |
| `showLabel` | `boolean` | `true` | Show each font's name under the word. |
| `accent` | `string` | `"#3B5BFD"` | Color of the label dot once the word lands. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A branding beat showing the same word in many typefaces before the chosen one lands.
- A type-design or customization pitch that needs a fast, decelerating font roulette.
- A hero word reveal that should end on a gradient-filled word in one clean face.

## Don't use when
- You want one family flexing in width and weight, not different faces — use `axis-flex`.
- You want a casing change rather than a typeface change — use `case-flip`.
- The word should simply land with no cycling — use `focus-blur-resolve`.

---

# Full Bleed Type
URL: https://remocn.dev/docs/typography/full-bleed-type

Huge condensed caps words slam in one at a time, the last lit by a sunrise gradient

- Install: `npx shadcn@latest add @remocn/full-bleed-type`
- Vibe: playful
- Natural length: 57f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/full-bleed-type
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FullBleedType } from "@/components/remocn/full-bleed-type";

const FullBleedTypeScene = () => (
  <FullBleedType words={["NO", "DAYS", "OFF", "SHIP"]} beat={11} />
);

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

Each word slams in huge in condensed caps, one per `beat` frames, and the last word is lit by a sunrise gradient. Pass `words` and `beat`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["NO", "DAYS", "OFF", "SHIP"]` | Words in reading order, one slam each. Set in caps; the last one is lit by the sunrise gradient. |
| `beat` | `number` | `11` | Frames between two slams. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `accent` | `string` | — | Kept for the shared draft API; the hero word takes the "rise" gradient instead. |

## Use when
- A fast slogan where huge condensed caps words slam in one at a time and the last one lights up.
- A hard-hitting beat in a social cut, like a four-word promise.

## Don't use when
- You want one word fitted edge to edge with a caption — use `edge-fit`.
- You want a softer stacked slogan with a highlighter — use `chunk-stack`.

---

# Glass Capsule
URL: https://remocn.dev/docs/typography/glass-capsule

A glass capsule slides over the focus word of a two-line headline and magnifies it in italic.

- Install: `npx shadcn@latest add @remocn/glass-capsule`
- Vibe: premium
- Natural length: 94f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/glass-capsule
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GlassCapsule } from "@/components/remocn/glass-capsule";

const GlassCapsuleScene = () => (
  <GlassCapsule lines={["Launch films", "that move."]} focus="move" accent="#3B5BFD" />
);

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

The two lines rise in, then a glass capsule glides over `focus`, magnifies it and swaps it to a serif italic while the capsule glows. Pass `lines` and `focus` (a word that appears in them); it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["Launch films", "that move."]` | Headline lines, shown top to bottom |
| `focus` | `string` | `"move"` | Word the glass capsule magnifies; must appear in lines |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A headline where one key word should be magnified and re-styled as the point.
- A premium title with a glass lens effect drawing attention to a single word.

## Don't use when
- You want a flat highlight instead of glass - use `marker-highlight`.
- You want the whole line to change - use `blur-out-up`.
- You want a simple underline - use `inline-highlight`.

---

# Glyph Anatomy
URL: https://remocn.dev/docs/typography/glyph-anatomy

A word builds as in a font editor, with metric guides, anchors along each contour and Bézier handles that pull straight segments into curves before the glyphs fill

- Install: `npx shadcn@latest add @remocn/glyph-anatomy`
- Vibe: tech
- Natural length: 66f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/glyph-anatomy
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { GlyphAnatomy } from "@/components/remocn/glyph-anatomy";

const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <GlyphAnatomy text="Glyph" />
  </AbsoluteFill>
);

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

Four guides draw across first: cap height, x-height, baseline and descender,
read from the font's own metrics. Then, letter by letter two frames apart,
anchors pop along each contour in drawing order. While they appear the
outline runs straight from anchor to anchor. Handles grow out of the anchors
next and pull each segment into its curve, overshooting a little before they
settle. The glyphs fill in around frame 40 and the points, handles and guides
fade out, leaving the clean word. `keepPoints` keeps the scaffolding.

TrueType fonts describe curves with quadratics; the component converts them to
cubics so every curve shows one handle on each end, as in Figma or Glyphs.
Static instances of variable fonts keep overlapping contours, and they show in
the outline the way they would in a font editor.

`fontUrl` defaults to Inter ExtraBold from Google Fonts' static CDN and accepts
any `.ttf`, `.otf` or `.woff` file. The labels use Inter from
`@remotion/google-fonts`. The word centers in its parent and sizes scale with
`height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Glyph"` | The word to build. Short words show the construction best |
| `fontUrl` | `string` | `Inter ExtraBold (gstatic ttf)` | URL of a .ttf, .otf or .woff file the outlines are parsed from |
| `fontSize` | `number` | `200` | Font size in reference px at 720p |
| `color` | `string` | `"#fafafa"` | Outline and fill color |
| `guideColor` | `string` | `"#0d99ff"` | Guides, anchor borders and handles |
| `guides` | `boolean` | `true` | Draw the metric guides with their labels |
| `keepPoints` | `boolean` | `false` | Keep anchors, handles and guides after the fill |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A product for designers, a type or a design tool, should show its craft: the letters are built from points and curves on screen.
- A title should feel constructed and precise, with the scaffolding visible for a moment before the clean word.
- You want to show how a letter is made, for a talk, a course or a type specimen.

## Don't use when
- The outline should simply draw itself without points or handles — use `outline-trace`.
- The design-tool feel should come from a selection box around the word instead of its construction — use `selection-snap`.
- The word only needs a quiet reveal — use `soft-blur-in`.

---

# Glyph Relay
URL: https://remocn.dev/docs/typography/glyph-relay

"Building a product" hands off between lines until a giant question mark resolves into "Launching it?"

- Install: `npx shadcn@latest add @remocn/glyph-relay`
- Vibe: premium
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/glyph-relay
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GlyphRelay } from "@/components/remocn/glyph-relay";

const GlyphRelayScene = () => (
  <GlyphRelay line1={["Building a", "product"]} line2={["is", "easy."]} line3="Launching it?" />
);

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

A phrase is handed off glyph by glyph between lines until a giant question mark resolves into the final line. Pass `line1`, `line2` (each a pair of text parts) and `line3`; it ships light and dark, over a gradient ground you can change with `ground`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `line1` | `[string, string]` | `["Building a", "product"]` | First line as a pair of text parts. |
| `line2` | `[string, string]` | `["is", "easy."]` | Second line as a pair of text parts. |
| `line3` | `string` | `"Launching it?"` | Final line the question mark resolves into. |
| `ground` | `GshPresetId` | — | Gradient preset used for the backdrop. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the gradient preset parameters. |

## Use when
- A setup-and-twist story beat where a phrase hands off between lines and ends on a giant question mark.
- A rhetorical question that resolves into the product pitch.

## Don't use when
- You only need a simple question and answer swap — use `hook-uncurl`.
- You want a straight sequence of lines — use `slide-doors`.

---

# Gooey Morph
URL: https://remocn.dev/docs/typography/gooey-morph

Bars fly in Tetris-style, land as a row, and melt into a word through a gooey blur-and-threshold morph

- Install: `npx shadcn@latest add @remocn/gooey-morph`
- Vibe: playful
- Natural length: 76f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/gooey-morph
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GooeyMorph } from "@/components/remocn/gooey-morph";

const GooeyMorphScene = () => (
  <GooeyMorph word="HELLO" fontFamily="'Bodoni Moda', Georgia, serif" />
);

export const RemotionRoot = () => (
  <Composition
    id="GooeyMorph"
    component={GooeyMorphScene}
    durationInFrames={120}
    fps={30}
    width={1920}
    height={1080}
  />
);
```

The melt works by blurring the alpha channel and pushing it through a
near-vertical threshold: where two shapes sit close, their blurred edges add up,
cross the threshold, and paint a solid neck between them. Everything that
should fuse lives inside the component's single filtered group — nearby
elements outside it never join the goo.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"HELLO"` | The word the bars melt into |
| `fill` | `string` | `"#ffffff"` | Fill color of the bars and the word |
| `fontFamily` | `string` | `"sans-serif"` | Font family of the word — heavy display faces melt best |
| `fontSize` | `number` | `237` | Font size in comp pixels |
| `tracking` | `number` | `0` | Letter spacing of the word |
| `wordCenterX / wordBaselineY` | `number` | `961.4 / 601.3` | Horizontal center and baseline of the word in comp pixels |
| `width / height` | `number` | `1920 / 1080` | Coordinate space of the composition |
| `barWidth / barHeight` | `number` | `213 / 181` | Size of each bar in comp pixels |
| `barStartPositions` | `[number, number][]` | `4 scattered points` | Where each bar starts, as `[x, y]` centers |
| `barRestPositions` | `[number, number][]` | `4 points in a row` | Where each bar lands before the melt |
| `barEntryFrames` | `number[]` | `[8, 0, 4, 13]` | Per-bar entry frames — deliberately non-monotonic so the build reads as Tetris, not a wave |
| `barTravelFrames` | `number` | `30` | Length of one bar's L-shaped move: horizontal into the column, then vertical into the row |
| `morphStartFrame / morphPeakFrame / morphEndFrame` | `number` | `50 / 63 / 76` | The melt window. Blur and displacement are zero outside it |
| `blurRadius` | `number` | `6` | Peak goo blur radius |
| `blurIterations` | `number` | `6` | Box blur passes folded into the equivalent Gaussian sigma |
| `alphaInputBlack / alphaInputWhite` | `number` | `0.4588 / 0.5098` | Alpha threshold range — the narrower, the harder the goo edge |
| `displaceAmount` | `number` | `20` | Peak turbulent displacement of the goo edge, in pixels |
| `displaceSize` | `number` | `19` | Feature size of the displacement noise |
| `displaceComplexity` | `number` | `1` | Noise octaves |
| `displaceEvolutionPerSecond` | `number` | `50` | How fast the noise field pans, per second |
| `className` | `string` | — | Optional className passed to the wrapper |

Inspired by [5 Clean Text Animations](https://www.youtube.com/watch?v=Nmi7cE2wT54) by Mapal.

## Use when
- A title reveal should feel liquid and organic — shapes fuse and hand their mass to the word instead of crossfading.
- You want a two-act entrance with a built-in rhythm: a kinetic build (bars flying in off-beat) and a payoff (the melt).
- The word is short and set in a heavy display face — the goo needs solid masses to fuse.
- Everything that should fuse can live inside this one component — the morph only affects its own SVG group.

## Don't use when
- You need a plain text entrance without the shape build-up — use `soft-blur-in` or `mask-reveal-up`.
- The text is long or thin-stroked — the blur-threshold eats thin strokes and long words don't match the four-bar row.
- The style is crisp and geometric rather than liquid — use `kinetic-center-build`.

---

# Got Em
URL: https://remocn.dev/docs/typography/got-em

A suspense line resolves into an exploded 'GOT 'EM' over a gradient sunburst

- Install: `npx shadcn@latest add @remocn/got-em`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/got-em
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GotEm } from "@/components/remocn/got-em";

const GotEmScene = () => (
  <GotEm pending="Entry submitted" title="GOT ’EM" subline="You got Acme 2.0." />
);

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

A suspense line with an animated ellipsis holds, then the payoff explodes in huge over a gradient sunburst with a subline beneath. Pass `pending`, `title`, `subline` and your own `logo`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `pending` | `string` | `"Entry submitted"` | The suspense line; an animated ellipsis follows it. |
| `title` | `string` | `"GOT ’EM"` | The payoff, exploded huge. Use a real apostrophe (’). |
| `subline` | `string` | `"You got remocn 2.0."` | Subline under the payoff. "remocn" inside it renders the real logo. |
| `logo` | `React.ReactNode` | — | Replaces the logo inside the subline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `accent` | `string` | — | Kept for the shared draft API; the rays take the "halo" gradient. |

## Use when
- A playful payoff for a giveaway or entry: a suspense line that explodes into a huge GOT EM.
- A meme-style reveal over a sunburst with a short subline and your logo.

## Don't use when
- You want a countdown build-up to the reveal — use `drop-timer`.
- You want a calm reveal with no explosion — use `blur-out-up`.

---

# Gradient Scale Cut Text
URL: https://remocn.dev/docs/typography/gradient-scale-cut-text

An oversized gradient reveal snaps to a compact blurred line that settles into focus

- Install: `npx shadcn@latest add @remocn/gradient-scale-cut-text`
- Vibe: premium
- Natural length: 36f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/gradient-scale-cut-text
```

## Usage

`GradientScaleCutText` begins with an oversized line moving left while a soft
mask uncovers a fixed orange-to-white text gradient. On frame 13 it switches to
a separate compact layer with no intermediate scale. That layer slides into its
final position while clearing its blur, then remains fixed in both position and
size as the same reveal continues across the remaining letters.
At completion, the soft mask edge travels beyond the text box so the final
letter is fully filled rather than left under the reveal fade.
The text layers use a descender-safe line box, preventing letters such as `g`,
`p`, and `y` from being clipped without moving the baseline.

The two layers never crossfade. Their opacity stays constant, and a discrete
visibility condition creates the scale cut between adjacent frames.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GradientScaleCutText } from "@/components/remocn/gradient-scale-cut-text";

const GradientScaleCutTextScene = () => (
  <GradientScaleCutText text="Introducing" />
);

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

### Tuning The Cut

`cutFrame` changes the exact frame where the giant layer is replaced. The
gradient reveal remains tied to the full component timeline, so it does not
restart after the cut. `settleTravel` controls the compact entrance distance,
`anchorOffsetX` sets its final position, and `compactBlur` controls focus.

```tsx
<GradientScaleCutText
  text="Now shipping"
  cutFrame={13}
  giantTravel={400}
  settleTravel={160}
  compactBlur={12}
  gradientStart="#f04a14"
  gradientEnd="#f3f1f1"
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Introducing"` | Single-line text shared by both scale phases |
| `giantFontSize` | `number` | `520` | Font size before the hard cut |
| `compactFontSize` | `number` | `132` | Font size after the hard cut |
| `fontWeight` | `number` | `700` | Shared CSS font-weight |
| `gradientStart` | `string` | `"#f04a14"` | Color at the left edge of the revealed text |
| `gradientEnd` | `string` | `"#f3f1f1"` | Color across the right portion of the revealed text |
| `ghostColor` | `string` | `"#170b0a"` | Color of the text ahead of the reveal boundary |
| `backgroundColor` | `string` | `"#000000"` | Full-frame background color |
| `anchorOffsetX` | `number` | `-16` | Compact line offset from the frame center |
| `giantTravel` | `number` | `400` | Leftward travel before the cut |
| `settleTravel` | `number` | `160` | Compact entrance distance before it stops at the anchor |
| `cutFrame` | `number` | `13` | First frame that renders the compact layer |
| `revealSoftness` | `number` | `14` | Width of the soft mask boundary as a percentage of the text box |
| `compactBlur` | `number` | `12` | Starting blur after the cut in pixels |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the full-frame root |

## Use when
- A title should begin at an imposing scale and resolve through a deliberately abrupt editorial cut.
- A gradient reveal needs to continue coherently across two very different framings.
- A compact product-introduction beat needs more force than a continuous scale-down animation.

## Don't use when
- The scale change must feel continuous — use `scale-down-fade` or `zoom-words`.
- The text should remain one size while a gradient passes over it — use `shimmer-sweep`.
- The background must remain transparent because the unrevealed ghost relies on a black field.

---

# Grid Cell
URL: https://remocn.dev/docs/typography/grid-cell

A grid cell lights up in a graph-paper field and a headline is typed into it with a mono label.

- Install: `npx shadcn@latest add @remocn/grid-cell`
- Vibe: tech
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/grid-cell
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GridCell } from "@/components/remocn/grid-cell";

const GridCellScene = () => (
  <GridCell title="Introducing remocn 2.0" label="v2.0" accent="#3B5BFD" />
);

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

A grid fades in from the center, cells merge into one that frames the headline, the label appears in the corner, and the title is typed in with a caret before the grid dims. Pass `title` and `label`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Introducing remocn 2.0"` | Headline typed into the cell |
| `label` | `string` | `"v2.0"` | Tiny mono label in the cell corner |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- An announcement framed as a design-tool grid cell, such as a version or product name.
- A technical beat where the headline should be typed into a cell with a label in the corner.

## Don't use when
- You want a plain typed line with no grid - use `typewriter`.
- You want the headline to appear with blur - use `focus-blur-resolve`.
- You want the text selected and resized - use `cursor-frame`.

---

# Half Built
URL: https://remocn.dev/docs/typography/half-built

A sentence of unfinished verbs shows each one as an outline that fills in as it ships.

- Install: `npx shadcn@latest add @remocn/half-built`
- Vibe: clean
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/half-built
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HalfBuilt } from "@/components/remocn/half-built";

const HalfBuiltScene = () => (
  <HalfBuilt parts={[{ text: "It cuts," }, { text: "captions,", when: "Spring" }, { text: "narrates", when: "Summer" }]} progress={1.6} />
);

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

Each part of the sentence starts hollow and fills in as `progress` advances, with optional season tags such as Summer or Later marking what is planned. Pass `parts` and set `progress` to choose how far the roadmap has filled. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `parts` | `HalfBuiltPart[]` | `DEFAULT_PARTS` | Sentence parts as `{ text, when? }`; `when` adds a season tag. |
| `progress` | `number` | `1.6` | How many parts are filled in by the end; fractions fill partially. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A roadmap beat showing what the product does now and what is coming.
- An honest status scene where some capabilities are shipped and others are planned.
- A build-in-public update that tags features by season.

## Don't use when
- Everything is shipped and you want a recap — use `week-shipped`.
- You want items listed as chips rather than inline words — use `feature-chips-flow`.
- You want text to appear complete word by word — use `word-insert`.

---

# Hand Count
URL: https://remocn.dev/docs/typography/hand-count

A number that counts up in stop-motion poses, rewritten by hand at every pose

- Install: `npx shadcn@latest add @remocn/hand-count`
- Vibe: paper
- Natural length: 54f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/hand-count
```

## Usage

Every pose the value advances and the digits are **written again** — same
number, different hand. That re-drawing is the whole illusion, and it is what
separates this from every other number in the registry: `rolling-number` and
`number-wheel` glide a mechanical typeface, which is right for a product UI and
wrong for a paper scene.

The component fills its parent with `position: absolute; inset: 0`, so give it
a frame and it centres itself inside it.

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition, Sequence } from "remotion";
import { HandCount, handCountDuration } from "@/components/remocn/hand-count";

const COUNT_AT = 12;
const COUNT_FOR = 14;
const COUNT_ENDS = handCountDuration({
  delay: COUNT_AT,
  durationSteps: COUNT_FOR,
});

const PricingScene = () => (
  <AbsoluteFill style={{ background: "#f1eee7" }}>
    <Sequence durationInFrames={COUNT_ENDS + 30}>
      <HandCount
        to={19}
        delay={COUNT_AT}
        durationSteps={COUNT_FOR}
        prefix="$"
        decimals={2}
        suffix="/mo"
      />
    </Sequence>
  </AbsoluteFill>
);

export const RemotionRoot = () => (
  <Composition
    id="HandCount"
    component={PricingScene}
    durationInFrames={COUNT_ENDS + 30}
    fps={30}
    width={1280}
    height={720}
  />
);
```

### A year-in-review stat

The affixes are written in the same hand as the digits, so a unit reads as part
of the number rather than a label stuck beside it.

```tsx
<div style={{ position: "relative", width: 720, height: 220 }}>
  <HandCount to={1284} suffix=" commits" durationSteps={18} fontSize={120} />
</div>
```

### Sizing the scene

`handCountDuration` returns the frame the number actually **settles** on, which
is not always `delay + durationSteps * step`. The stop-motion clock saturates on
the quantized frame, so an off-grid `delay` pushes the landing to the next pose
boundary — a `<Sequence>` sized by the naive sum can cut up to `step - 1` frames
before the number arrives.

```tsx
handCountDuration({ delay: 0, durationSteps: 12, step: 3 }); // 36
handCountDuration({ delay: 1, durationSteps: 12, step: 3 }); // 39, not 37
```

Keep `delay` a multiple of `step` and the two agree.

### Choosing the ease

`in-out` is the default and it is the one to keep for a headline number. It
opens on a barely-there move, does most of the counting through the middle, and
settles gently — so every pose in the run carries a visible digit change.

`out` front-loads the movement hard: at twelve poses it puts almost a quarter
of the count into the very first pose and leaves the last third of the run
barely moving. That is right when the number is a supporting detail arriving
under something else, and wrong when it is the thing being watched.

A literal spring is deliberately not on offer here. Springs start fast by
construction, which is the same problem as `out`, and the overshoot would show
a price climbing past its own figure before falling back to it.

### Landing and holding still

The value lands on `to` exactly — it never stops at 99.7 — and the jitter
freezes the moment it does. A headline number that keeps twitching for the rest
of the shot is a distraction, not a texture; ambient motion in this kit is
`paper-wobble`'s job.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `to` (required) | `number` | — | Value the count lands on, exactly |
| `from` | `number` | `0` | Value it starts at; above `to` it counts down |
| `delay` | `number` | `0` | Local frame counting starts; keep it a multiple of step |
| `durationSteps` | `number` | `18` | Poses spent counting |
| `decimals` | `number` | `0` | Decimal places; 0 never renders a decimal point |
| `prefix` | `string` | `""` | Written before the number in the same hand |
| `suffix` | `string` | `""` | Written after the number in the same hand |
| `fontSize` | `number` | `96` | Size of the written number |
| `color` | `string` | `"#26242c"` | Ink colour |
| `weight` | `400 \| 500 \| 600 \| 700` | `700` | Font weight |
| `ease` | `"in-out" \| "out" \| "linear"` | `"in-out"` | Shape of the count; `in-out` starts and settles gently, `out` front-loads the movement |
| `align` | `"left" \| "center"` | `"center"` | Alignment inside the frame it fills |
| `fontFamily` | `string` | `Caveat` | Override the handwritten face |
| `seed` | `string` | `"count"` | Seed for the per-pose glyph jitter |
| `step` | `number` | `3` | Frames per stop-motion pose |

## Use when
- A stat, price, or count belongs in a hand-made scene — the number should arrive by being written, not by rolling.
- A paper pricing reveal or year-in-review needs its figure in the same voice as the rest of the shot.
- You want a unit or currency written in the same hand as the digits — `prefix` and `suffix` jitter along with them.

## Don't use when
- The scene is a slick product UI or a dashboard metric — use `rolling-number` or `number-wheel`, which glide a mechanical typeface.
- You need per-digit odometer choreography — that is `number-wheel`'s job.
- You need locale grouping separators (`1,000`) or full currency formatting; `prefix` and `decimals` are the whole surface here.

---

# Handwrite
URL: https://remocn.dev/docs/typography/handwrite

Handwritten text laid down letter by letter on a quantized stop-motion clock

- Install: `npx shadcn@latest add @remocn/handwrite`
- Vibe: paper
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/handwrite
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { Handwrite } from "@/components/remocn/handwrite";

const HandwriteScene = () => (
  <AbsoluteFill style={{ background: "#f1eee7" }}>
    <Handwrite text="Made by hand" fontSize={72} />
  </AbsoluteFill>
);

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

The component is transparent — put the paper colour on the layer behind it.

`handwriteDuration` returns how many frames a string needs, so a `<Sequence>` can
be sized to the writing instead of guessed:

```tsx
import { Sequence } from "remotion";
import { Handwrite, handwriteDuration } from "@/components/remocn/handwrite";

const title = "Made by hand";
const subtitle = "one pose at a time";

const Titles = () => (
  <>
    <Sequence durationInFrames={handwriteDuration(title)}>
      <Handwrite text={title} fontSize={72} />
    </Sequence>
    <Sequence from={handwriteDuration(title)}>
      <Handwrite text={subtitle} fontSize={44} />
    </Sequence>
  </>
);
```

Letters arrive on the stop-motion clock, so `step` is the tempo control: `3`
frames per pose is ten poses a second at 30fps. Raise it for a slower, more
deliberate hand. The component holds still between poses — wrap it in
`paper-wobble` if the whole sheet should breathe.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to write out; newlines are honoured |
| `fontSize` | `number` | `54` | Font size in pixels |
| `color` | `string` | `"#26242c"` | Ink colour (any valid CSS color) |
| `delay` | `number` | `0` | Frames on the local clock before writing begins |
| `perStep` | `number` | `1.6` | Letters laid down per stop-motion pose |
| `weight` | `400 \| 500 \| 600 \| 700` | `600` | Pen weight |
| `align` | `"left" \| "center"` | `"center"` | Horizontal alignment of the written block |
| `fontFamily` | `string` | — | Overrides the bundled Caveat family; falls back to cursive |
| `step` | `number` | `3` | Frames per stop-motion pose — the tempo control |

## Use when
- Captions, labels, and headlines should read as pen-written on paper — the core text voice of stop-motion scrapbook scenes.
- The scene already ticks on the stop-motion clock and the text must share its tempo rather than glide against it.
- You need the writing time up front: `handwriteDuration` sizes the `<Sequence>` exactly.

## Don't use when
- You are simulating a terminal or an input being typed into — use `typewriter`.
- The reveal should be smooth on the real 30fps clock — use `soft-blur-in` or `per-character-rise`.
- The whole sheet should wobble too: that is `paper-wobble` wrapped around this, not a prop here.

---

# Headline to Line
URL: https://remocn.dev/docs/typography/headline-to-line

A headline settles and its phrase collapses toward a single line over a glowing horizon

- Install: `npx shadcn@latest add @remocn/headline-to-line`
- Vibe: clean
- Natural length: 93f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/headline-to-line
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HeadlineToLine } from "@/components/remocn/headline-to-line";

const HeadlineToLineScene = () => <HeadlineToLine words={["Your", "launch", "video"]} accentIndex={1} continuation=", built from blocks you own" />;

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

Headline words pop in one by one, the accented word gets a springy pop, then the words shrink into a single line and a continuation types out after them with a blinking caret over a glowing ground. Pass `words`, `accentIndex` and `continuation`; `ground` picks the gradient preset for each theme.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["Your", "launch", "video"]` | Headline words that pop in, then shrink into the line. |
| `accentIndex` | `number` | `1` | Which headline word gets the accent color and pop. |
| `continuation` | `string` | `", built from blocks you own"` | Text typed after the headline words once they shrink. |
| `accent` | `string` | — | Color of the accented word; defaults to the theme accent. |
| `ink` | `string` | — | Text color override for the headline and continuation. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `ground` | `GshPresetId` | — | Gradient preset id for the background ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground preset gradient parameters. |

## Use when
- A hero headline that should collapse into a sentence and finish typing a longer description.
- An introduction like a product name followed by a typed tagline.
- A title that should feel like it is being written into a line of copy.

## Don't use when
- The headline should only type, with no collapse — use `typewriter`.
- You want a headline that pulls focus to swap its last word — use `focus-front-swap`.
- The headline should be revealed over drifting lights — use `bokeh-title`.

---

# Hidden Word
URL: https://remocn.dev/docs/typography/hidden-word

A word is found hidden letter by letter inside a sentence and lifted out as a large italic title

- Install: `npx shadcn@latest add @remocn/hidden-word`
- Vibe: premium
- Natural length: 152f @ 30fps

## Installation

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

## Usage

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

const HiddenWordScene = () => (
  <HiddenWord
    text="Every founder deserves a launch video that feels expensive."
    word="love"
  />
);

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

The sentence fades in line by line, the letters of `word` light up in order inside it, the rest dims, and each lit letter lifts out and flies into place to form a large serif italic word. Pass `text` (it must contain the letters of `word` in order, case-insensitive) and `word`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Small teams make their launch film in code and post it by Friday."` | The sentence, set as editorial body type. |
| `word` | `string` | `"ship"` | The word hiding in `text`; its letters are found in order. |
| `accent` | `string` | `"#3B5BFD"` | Color of the lit letters and the empty-slot rule. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A reveal beat where a key word is concealed in a sentence and then pulled out as the headline.
- An editorial, premium tone for a manifesto or announcement, set as body copy first.
- A product message where a hidden word, such as the product's verb, becomes the takeaway.

## Don't use when
- You want a word highlighted in place without moving letters — use `inline-highlight`.
- The text should simply appear and stay as a paragraph — use `word-stream`.
- You need a fast single-line headline entrance — use `focus-blur-resolve`.

---

# Hook Uncurl
URL: https://remocn.dev/docs/typography/hook-uncurl

Stacked condensed caps lines uncurl into place, ending on 'Just make the video.'

- Install: `npx shadcn@latest add @remocn/hook-uncurl`
- Vibe: playful
- Natural length: 78f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/hook-uncurl
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HookUncurl } from "@/components/remocn/hook-uncurl";

const HookUncurlScene = () => (
  <HookUncurl question="Why make the video?" answer="Just make the video." />
);

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

Stacked caps lines enter curled, uncurl into place, then swap in a rolling change from the question to the answer. Pass `question` and `answer`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `question` | `string` | `"Why make the video?"` | The question set in stacked caps. |
| `answer` | `string` | `"Just make the video."` | The answer that replaces it. |
| `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 hook that asks a question in stacked condensed caps and answers it as the lines uncurl.
- A short social opener, like a challenge answered by a call to action.

## Don't use when
- You want a bigger story with a punchline glyph — use `glyph-relay`.
- You want single words slamming in — use `full-bleed-type`.

---

# Hot Stage
URL: https://remocn.dev/docs/typography/hot-stage

A headline pushes down and falls away for the next line while a faint mono mission log lights up.

- Install: `npx shadcn@latest add @remocn/hot-stage`
- Vibe: tech
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/hot-stage
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HotStage } from "@/components/remocn/hot-stage";

const HotStageScene = () => (
  <HotStage
    lines={["Write the scene.", "Render the cut.", "Ship it."]}
    log={["T+00:00  Draft", "T+02:10  Render", "T+04:00  Live"]}
  />
);

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

The first line fades up beside a dim monospaced log. Every `stage` frames the next line pushes in with a flash of thin vent ticks, the previous line goes dim and falls away, and the matching log entry lights up. Pass your own `lines` and a `log` with one entry per line. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Headline lines shown one at a time; each replaces the previous. |
| `log` | `string[]` | — | Mono log entries on the side; entry N lights up when line N arrives. |
| `stage` | `number` | `44` | Frames between one line arriving and the next. |
| `accent` | `string` | — | Color of the vent ticks; defaults to the ink color. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A closing beat that walks through build, render and ship stages, each new line displacing the last.
- A developer-tool launch where a faint mono log beside the headline adds technical credibility.
- A three-line value statement that must land one line at a time with a countdown feel.

## Don't use when
- You have one short line and want a calm caption instead of a staged log — use `cool-down`.
- The lines should stay on screen and step in like code — use `indent-steps`.
- You want a plain staggered paragraph with no log or vents — use `line-by-line-slide`.

---

# Idea Set
URL: https://remocn.dev/docs/typography/idea-set

Two ruled lines rise in light italic, then change typeface letter by letter while one phrase turns accent-colored.

- Install: `npx shadcn@latest add @remocn/idea-set`
- Vibe: clean
- Natural length: 106f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/idea-set
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { IdeaSet } from "@/components/remocn/idea-set";

const IdeaSetScene = () => <IdeaSet lines={["Rough cut.", "Launch day."]} highlight="Launch day." />;

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

Each line rises out of a mask above a hairline rule in light italic. After `hold` frames the glyphs flip one by one to mono, then to medium sans, and the `highlight` phrase takes the accent color. Pass your own `lines`, and set `highlight` to text that appears in them. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["Napkin sketch.", "Keynote opener."]` | Lines of text, each set on its own ruled row. |
| `highlight` | `string` | `"Keynote opener."` | Phrase that turns accent-colored in the final typeface; must match line text. |
| `hold` | `number` | `18` | Frames to rest between each typeface change. |
| `accent` | `string` | — | Accent color; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A two-line rough-to-finished beat where the second line is the payoff.
- A product story that should feel typeset, with the voice shifting from sketch to polished.

## Don't use when
- One line should change voice mid-line without rules or a ledger look — use `mono-voice`.
- You only need a clean masked reveal with no typeface change — use `mask-reveal-up`.
- The change should read as a visible edit of old text into new — use `diff-swap`.

---

# In Proportion
URL: https://remocn.dev/docs/typography/in-proportion

Each worry builds word by word, shrinks to a dim note, and a bigger accent reply answers it.

- Install: `npx shadcn@latest add @remocn/in-proportion`
- Vibe: playful
- Natural length: 180f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/in-proportion
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { InProportion } from "@/components/remocn/in-proportion";

const InProportionScene = () => (
  <InProportion
    pairs={[
      { worry: "It will look templated.", answer: "It will look like your app." },
      { worry: "I will drown in keyframes.", answer: "You will write a component." },
    ]}
  />
);

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

A worry builds word by word in large white type, then shrinks into a dimmed note in the top corner while the answer rises in the accent color along the bottom. The next pair repeats. Pass `pairs` as `{ worry, answer }` objects; timing compresses to fit the composition and leaves about 18% hold at the end. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `pairs` | `{ worry: string; answer: string }[]` | `DEFAULT_PAIRS` | Worry and answer pairs, played in order; two or three work best. |
| `accent` | `string` | — | Color of the answer text; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- An objection-handling beat where each customer worry is answered by a bigger, brighter reply.
- FAQ-style launch copy with two or three doubts, each resolved in one line.

## Don't use when
- There is only one question and one answer — use `answer-first`.
- A single hesitation should be met with one short reply — use `no-buts`.
- The reply is a testimonial rather than a rebuttal — use `overheard`.

---

# Indent Steps
URL: https://remocn.dev/docs/typography/indent-steps

Up to five lines rise in, each tabbing one step further right like indented code, then one word lights up.

- Install: `npx shadcn@latest add @remocn/indent-steps`
- Vibe: tech
- Natural length: 80f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/indent-steps
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { IndentSteps } from "@/components/remocn/indent-steps";

const IndentStepsScene = () => (
  <IndentSteps
    lines={["Fork the scene.", "Change the props.", "Render tonight."]}
    highlight="tonight"
  />
);

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

Each line rises from a mask and tabs one step further right with a small snap and a guide line, with optional line numbers in the gutter. Once the last line lands, the `highlight` word fills with a gradient. Pass up to five `lines`; set `exit` to outdent and slide them out over the last 18 frames. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Up to five lines, each indented one step more than the last. |
| `highlight` | `string` | `"tonight"` | Word or phrase that turns to a gradient at the end; case-insensitive. |
| `lineNumbers` | `boolean` | `true` | Show a mono line-number gutter beside the lines. |
| `exit` | `boolean` | `false` | Outdent and slide the lines out during the final 18 frames. |
| `accent` | `string` | `"#3B5BFD"` | Color of the guide line that flashes after each tab. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A write, render, ship sequence that should read like steps in an editor.
- A short developer-facing tagline where the last word is the payoff and gets a gradient.

## Don't use when
- The lines should be typed out character by character — use `typewriter`.
- Lines should read as commented-out code being switched on — use `uncomment-line`.
- You want a numbered feature list with a moving highlight row — use `index-list`.

---

# Index List
URL: https://remocn.dev/docs/typography/index-list

A numbered feature index draws in row by row, then a gradient band travels down to one highlighted row.

- Install: `npx shadcn@latest add @remocn/index-list`
- Vibe: clean
- Natural length: 126f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/index-list
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { IndexList } from "@/components/remocn/index-list";

const IndexListScene = () => (
  <IndexList
    items={["Scenes", "Captions", "Transitions", "Templates"]}
    title="What is inside 2.0"
    highlight={2}
  />
);

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

Hairline rules draw across and a numbered list rises row by row under a logo and title; a gradient band then wipes in and travels down to the `highlight` row, where it parks with an arrow while the other rows dim. Pass `items`, `title`, the zero-based `highlight` index, and your own `logo` node (the default is the Remocn wordmark). It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | `DEFAULT_ITEMS` | Row labels, numbered automatically; the row height shrinks as you add more. |
| `highlight` | `number` | `3` | Zero-based index of the row the gradient band lands on. |
| `title` | `string` | `"What’s inside 3.0"` | Header text shown beside the logo. |
| `logo` | `React.ReactNode` | — | Header logo node; defaults to the Remocn wordmark, so pass your own. |
| `accent` | `string` | `"#3B5BFD"` | Color of the travelling highlight band. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A what's-inside beat that lists the main features of a release and lands on the one that matters most.
- A table-of-contents style recap near the end of a launch video, with a header and a feature count.

## Don't use when
- The lines should step in like indented code rather than a ruled index — use `indent-steps`.
- You have three big numbered steps instead of a long list — use `three-steps`.
- The features should appear as streaming pills around a logo — use `feature-chips-flow`.

---

# Typography: 256 animated text effects for Remotion
URL: https://remocn.dev/docs/typography

256 free, MIT-licensed animated text effects for Remotion: reveals, highlights, word swaps, counters, glitches and kinetic type. Install any one with npx shadcn@latest add @remocn/<name>.

_Last updated: November 9, 2026_

Remocn has 256 free, MIT-licensed text animation components for Remotion: word and letter
reveals, highlights, typewriters, word swaps, counters, glitches, kinetic posters and pull quotes.
Each one installs with the shadcn CLI and lands in your project as a single TypeScript file, with
no runtime dependency besides Remotion.

```bash
npx shadcn@latest add @remocn/staggered-fade-up
```

```tsx
import { Composition } from "remotion";
import { StaggeredFadeUp } from "@/components/remocn/staggered-fade-up";

const Title = () => <StaggeredFadeUp text="Ship videos faster" staggerDelay={4} />;

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

## Pick a text effect by job

| Job | Component | Length | Install |
|---|---|---|---|
| Word-by-word headline | [Staggered Fade Up](/docs/typography/staggered-fade-up) | 90f | `npx shadcn@latest add @remocn/staggered-fade-up` |
| Letter-by-letter, soft | [Soft Blur In](/docs/typography/soft-blur-in) | 60f | `npx shadcn@latest add @remocn/soft-blur-in` |
| Focus pull from blur | [Focus Blur Resolve](/docs/typography/focus-blur-resolve) | 90f | `npx shadcn@latest add @remocn/focus-blur-resolve` |
| Lines rising from a mask | [Mask Reveal Up](/docs/typography/mask-reveal-up) | 90f | `npx shadcn@latest add @remocn/mask-reveal-up` |
| Tracking in | [Tracking In](/docs/typography/tracking-in) | 90f | `npx shadcn@latest add @remocn/tracking-in` |
| One punchy word | [Spring Scale In](/docs/typography/spring-scale-in) | 60f | `npx shadcn@latest add @remocn/spring-scale-in` |
| Phrase that builds centered | [Kinetic Center Build](/docs/typography/kinetic-center-build) | 60f | `npx shadcn@latest add @remocn/kinetic-center-build` |
| Typed text | [Typewriter](/docs/typography/typewriter) | 120f | `npx shadcn@latest add @remocn/typewriter` |
| Handwritten note | [Handwrite](/docs/typography/handwrite) | 120f | `npx shadcn@latest add @remocn/handwrite` |
| Highlight a phrase | [Marker Highlight](/docs/typography/marker-highlight) | 90f | `npx shadcn@latest add @remocn/marker-highlight` |
| Recolor one word | [Inline Highlight](/docs/typography/inline-highlight) | 90f | `npx shadcn@latest add @remocn/inline-highlight` |
| Rotating word after a prefix | [Inline Word Roll](/docs/typography/inline-word-roll) | 75f | `npx shadcn@latest add @remocn/inline-word-roll` |
| Swap one phrase for another | [Per-Word Crossfade](/docs/typography/per-word-crossfade) | 90f | `npx shadcn@latest add @remocn/per-word-crossfade` |
| Correct a claim | [Strikethrough Replace](/docs/typography/strikethrough-replace) | 120f | `npx shadcn@latest add @remocn/strikethrough-replace` |
| Count up to a number | [Rolling Number](/docs/typography/rolling-number) | 150f | `npx shadcn@latest add @remocn/rolling-number` |
| Decode / scramble | [Matrix Decode](/docs/typography/matrix-decode) | 90f | `npx shadcn@latest add @remocn/matrix-decode` |
| Glitch | [RGB Glitch Text](/docs/typography/rgb-glitch-text) | 90f | `npx shadcn@latest add @remocn/rgb-glitch-text` |
| Looping ticker | [Infinite Marquee](/docs/typography/infinite-marquee) | 180f | `npx shadcn@latest add @remocn/infinite-marquee` |
| Draw the letters | [Outline Trace](/docs/typography/outline-trace) | 44f | `npx shadcn@latest add @remocn/outline-trace` |
| Text on a curve | [Path Ride](/docs/typography/path-ride) | 70f | `npx shadcn@latest add @remocn/path-ride` |

Length is the frames of motion at 30fps, the minimum for the component's `Sequence`. For how to
animate text by hand, the Remotion pitfalls these components handle and a comparison with other
libraries, read [Remotion text animations](/docs/guides/remotion-text-animations). For subtitles
timed to speech, see the 31 caption styles in
[Captions](/docs/captions/getting-started/introduction).

Agents can read this whole section, every component's props and usage included, as one file at
[/llms-full/typography.txt](https://remocn.dev/llms-full/typography.txt).

## Reveals

Entrances for a headline or a line of copy: by word, by letter, through blur or through a mask.
`staggered-fade-up` is the neutral default; `soft-blur-in` and `focus-blur-resolve` read premium.

- [Inline Word Roll](https://remocn.dev/docs/typography/inline-word-roll) — Switch words beside a fixed prefix with an accelerating vertical roll
- [Shader Text Reveal](https://remocn.dev/docs/typography/shader-text-reveal) — Reveal words through the original OpenShaders hero material, then settle into white type
- [Type Fossil](https://remocn.dev/docs/typography/type-fossil) — A readable word carries layers of fine contours, revises itself, then compresses into a clean typographic imprint
- [Soft Blur In](https://remocn.dev/docs/typography/soft-blur-in) — Per-character fade-in with a gentle blur and upward motion
- [Per Character Rise](https://remocn.dev/docs/typography/per-character-rise) — Letters slide up from below with no blur - crisp and kinetic
- [Bottom-Up Letters](https://remocn.dev/docs/typography/bottom-up-letters) — Letters rise from below in a pronounced staircase, one symbol at a time
- [Top-Down Letters](https://remocn.dev/docs/typography/top-down-letters) — Letters descend from above in a pronounced staircase, one symbol at a time
- [Spring Scale In](https://remocn.dev/docs/typography/spring-scale-in) — Words pop in with a soft overshoot scale, like a spring settling into place
- [Micro Scale Fade](https://remocn.dev/docs/typography/micro-scale-fade) — A calm, tiny scale pop for subtle premium polish on labels and headings
- [Scale Down Fade](https://remocn.dev/docs/typography/scale-down-fade) — Subtle premium settle-in with a restrained scale-down fade on exit
- [Blur Out Up](https://remocn.dev/docs/typography/blur-out-up) — Words arrive clean and depart upward with increasing blur for airy exits
- [Focus Blur Resolve](https://remocn.dev/docs/typography/focus-blur-resolve) — A premium focus pull from heavy blur to crisp text, then a soft blur-out exit
- [Line-by-Line Slide](https://remocn.dev/docs/typography/line-by-line-slide) — Each line slides in from the left with a staggered flow then exits to the right
- [Staggered Fade Up](https://remocn.dev/docs/typography/staggered-fade-up) — Words slide up and fade in sequentially with a wave-like cascade
- [Mask Reveal Up](https://remocn.dev/docs/typography/mask-reveal-up) — Lines reveal upward with a soft masked feel and compact stagger
- [Tracking In](https://remocn.dev/docs/typography/tracking-in) — Letter-spacing collapses and blur clears with a springy entrance

## Highlights

Point at one word or phrase inside a sentence that is already on screen.
A marker block, a color shift or a passing shine.

- [Inline Highlight](https://remocn.dev/docs/typography/inline-highlight) — Animate one word inside a sentence from a base color to a brand color
- [Marker Highlight](https://remocn.dev/docs/typography/marker-highlight) — A colored marker block draws behind a phrase while the text color shifts
- [Shimmer Sweep](https://remocn.dev/docs/typography/shimmer-sweep) — A bright shine travels across muted text to draw attention

## Dynamic Text

Text that changes while it plays.
Typed character by character, or rolled through a reel of values.

- [Typewriter](https://remocn.dev/docs/typography/typewriter) — Character-by-character text reveal with a deterministic blinking cursor
- [Slot Machine Roll](https://remocn.dev/docs/typography/slot-machine-roll) — Vertical reel scrolls each character from an old value to a new value

## Tech & Glitch

Scrambles that decode into the text, and RGB-split glitches.
Both use Remotion's seeded `random()`, so every render matches the preview.

- [Matrix Decode](https://remocn.dev/docs/typography/matrix-decode) — Random scramble resolves left-to-right into target text
- [RGB Glitch Text](https://remocn.dev/docs/typography/rgb-glitch-text) — Three RGB-offset text copies jitter for a few frames to create a chromatic aberration glitch

## Text Transitions

Swap one phrase for another with motion.
Use them when the layout stays and only the words change.

- [Per-Word Crossfade](https://remocn.dev/docs/typography/per-word-crossfade) — One phrase fades out as the next fades in, word by word
- [Fade Through](https://remocn.dev/docs/typography/fade-through) — Old text fades out as new fades in with a soft delay, Material-style
- [Shared Axis Y](https://remocn.dev/docs/typography/shared-axis-y) — Per-word hard-cut staircase transition for sharp editorial phrase swaps
- [Shared Axis Z](https://remocn.dev/docs/typography/shared-axis-z) — Scale-based shared-axis transition for focus shifts and context depth

## Kinetic

Word-by-word builds with motion and momentum.
They suit a hook line that should land one word at a time.

- [Short Slide Right](https://remocn.dev/docs/typography/short-slide-right) — The whole phrase glides in from the left while words reveal in sequence through opacity
- [Kinetic Center Build](https://remocn.dev/docs/typography/kinetic-center-build) — Words enter from the right and push the line until the full phrase locks centered
- [Short Slide Down](https://remocn.dev/docs/typography/short-slide-down) — Words drop in from above and stack into a centered multi-line composition

## Showreel

Heavy display type that snaps, echoes and spins on flat color fields.

- [Selection Snap](https://remocn.dev/docs/typography/selection-snap) — A thin word in a loose viewfinder snaps into a design-tool selection while it goes from Thin to Black, pops its handles and counts up a size badge
- [Echo Stack](https://remocn.dev/docs/typography/echo-stack) — A word focuses in at the center while outline copies of it unfold above and below and keep drifting, like the one clear line on a spinning drum
- [Type Wall](https://remocn.dev/docs/typography/type-wall) — Rows of one word fill the frame, run in alternating directions at different speeds in heavy, narrow and outline faces, with an accent band through the middle
- [Ring Text](https://remocn.dev/docs/typography/ring-text) — Text runs around a tilted 3D band that spins, reading on the near side and mirrored on the far side
- [Period Drop](https://remocn.dev/docs/typography/period-drop) — A word rises out of its line, then a colored dot falls from above the frame, bounces with squash and stretch, and settles as the period

## Vector type

Type built the way a motion designer builds it: trim paths on real glyph outlines, a font editor's points and handles, striped type, text on a path and a repeater.

- [Outline Trace](https://remocn.dev/docs/typography/outline-trace) — Every glyph contour draws itself as a stroke, letter by letter, then the fill wipes up inside each letter and the stroke fades into it
- [Glyph Anatomy](https://remocn.dev/docs/typography/glyph-anatomy) — A word builds as in a font editor, with metric guides, anchors along each contour and Bézier handles that pull straight segments into curves before the glyphs fill
- [Stripe Type](https://remocn.dev/docs/typography/stripe-type) — A word cut into horizontal bands, as in the IBM logo, slides together from alternating sides and locks, then can pass on through
- [Path Ride](https://remocn.dev/docs/typography/path-ride) — A line draws itself along a curve with the text riding behind its head, then the curve pulls taut and the text settles on a straight, centered baseline
- [Type Repeater](https://remocn.dev/docs/typography/type-repeater) — An After Effects style repeater on a word, where copies unfold into a tunnel, a spiral or a fan behind it, breathe, then fold back into the word

## Statements

Finished copy beats for launch and changelog videos: the line, its layout and its motion.
Each carries one message, such as a TL;DR, a week recap or a one-line answer. Swap in your words.

- [Absorb Stack](https://remocn.dev/docs/typography/absorb-stack) — A centred stack of small lines, ending in a red "on top.", on a dark brown ground
- [And You](https://remocn.dev/docs/typography/and-you) — A list of audiences ("For the founder who...") ends on a big "and you."
- [Answer First](https://remocn.dev/docs/typography/answer-first) — The question "Who made this video?" is answered by a big "A pull request."
- [Aspect Slit](https://remocn.dev/docs/typography/aspect-slit) — A film-title card opens through a slit, with a serif hero line and a small caption
- [Beta Thanks](https://remocn.dev/docs/typography/beta-thanks) — "Remocn is out" with a green "out", thanking the beta testers below
- [Bug Dock](https://remocn.dev/docs/typography/bug-dock) — "Playing on every screen you ship." with a small broadcast logo bug docking at the bottom
- [Changelog Scroll](https://remocn.dev/docs/typography/changelog-scroll) — A changelog list scrolls and one row enlarges into a highlighted headline entry
- [Chore Fold](https://remocn.dev/docs/typography/chore-fold) — A teal "Captions does all of that." folds the chore away, "You just talk." beneath
- [Column Reflow](https://remocn.dev/docs/typography/column-reflow) — A justified paragraph reflows its column width, redistributing lines with even word spacing
- [Cool Down](https://remocn.dev/docs/typography/cool-down) — A short statement, 'Runs cool.', settles in large over a faint grid with a mono caption
- [Coy Denial](https://remocn.dev/docs/typography/coy-denial) — A huge "Don't check the site at nine." with a sheepish "(Do.)" tucked into the corner
- [Crew of One](https://remocn.dev/docs/typography/crew-of-one) — A credits roll, Written by / Directed by / Shipped by, all pointing at a big "you"
- [Crunch](https://remocn.dev/docs/typography/crunch) — A timestamped story line, "It shipped, with time to ...", fades in over a dark brown ground
- [Cut Off](https://remocn.dev/docs/typography/cut-off) — A line is cut off by a white reply card: "Or let the code cut it."
- [Double Take](https://remocn.dev/docs/typography/double-take) — "Read that again." above an oversized pink "One person" on blue
- [Edit Ripple](https://remocn.dev/docs/typography/edit-ripple) — "Change your mind, render it again." with the second line indented and ripple-coloured
- [Embargo Lift](https://remocn.dev/docs/typography/embargo-lift) — "remocn is free, open source and out today" in condensed type with a green accent
- [Exactly](https://remocn.dev/docs/typography/exactly) — A yellow "Exactly." lands first, then "It's just code." completes the answer
- [Factor Out](https://remocn.dev/docs/typography/factor-out) — Three short imperatives stack above a big blue "in your editor."
- [Feature Trio](https://remocn.dev/docs/typography/feature-trio) — Three feature words, 'Fast. Composable. Open source.', rise from masks with progress ticks and notes
- [Filler Cut](https://remocn.dev/docs/typography/filler-cut) — A transcript has its filler words cut, leaving a clean line, 'Ship your launch video today.'
- [Fine Print Up](https://remocn.dev/docs/typography/fine-print-up) — "No account and no watermark. Ever." in a big serif with tiny fine print at the bottom
- [Headline to Line](https://remocn.dev/docs/typography/headline-to-line) — A headline settles and its phrase collapses toward a single line over a glowing horizon
- [Hot Stage](https://remocn.dev/docs/typography/hot-stage) — A headline pushes down and falls away for the next line while a faint mono mission log lights up.
- [Idea Set](https://remocn.dev/docs/typography/idea-set) — Two ruled lines rise in light italic, then change typeface letter by letter while one phrase turns accent-colored.
- [In Proportion](https://remocn.dev/docs/typography/in-proportion) — Each worry builds word by word, shrinks to a dim note, and a bigger accent reply answers it.
- [Indent Steps](https://remocn.dev/docs/typography/indent-steps) — Up to five lines rise in, each tabbing one step further right like indented code, then one word lights up.
- [Index List](https://remocn.dev/docs/typography/index-list) — A numbered feature index draws in row by row, then a gradient band travels down to one highlighted row.
- [Intelligence Glow](https://remocn.dev/docs/typography/intelligence-glow) — A question rises in under a breathing edge glow, the light collapses to a rule, and a serif-led answer resolves.
- [Keep Words](https://remocn.dev/docs/typography/keep-words) — Serif belief statements build word by word; each keyword turns red and drops into a closing column of mottos.
- [Known Terms](https://remocn.dev/docs/typography/known-terms) — Term and definition pairs push each other into place, building to an accent-colored final line.
- [Landing Confirmed](https://remocn.dev/docs/typography/landing-confirmed) — An altitude readout counts down to a hard stop, then a slammed confirmation gives way to a gradient title.
- [Loop Break](https://remocn.dev/docs/typography/loop-break) — A short loop of lines repeats faster each pass until a final line breaks it and highlights one phrase.
- [Moves Up](https://remocn.dev/docs/typography/moves-up) — A roadmap list under Now, Next and Later where each shipped item exits and the rest move up and grow.
- [Name Gloss](https://remocn.dev/docs/typography/name-gloss) — Big name words rise together, split into columns, and each gets a short gloss before a closing line.
- [Negation Drop](https://remocn.dev/docs/typography/negation-drop) — Condensed caps lines rise in, then each negation drops away and its stem word lands on a lime block.
- [No Buts](https://remocn.dev/docs/typography/no-buts) — A muted objection builds in the corner and a larger reply answers it, repeating, with the last reply in accent.
- [Not Yet](https://remocn.dev/docs/typography/not-yet) — Lines of what it can't do build word by word, each ending in an accent Yet., and stack upward.
- [Overnight](https://remocn.dev/docs/typography/overnight) — Three timestamped story lines play as a night panel descends and a morning panel rises over an evening ground.
- [Peek Shut](https://remocn.dev/docs/typography/peek-shut) — A question sits above a thin line that opens on an image sliver, snaps shut, then a refusal lands.
- [Phrase List Bridge](https://remocn.dev/docs/typography/phrase-list-bridge) — A phrase splits as a floating list deals in, a highlight picks one row, and it closes back in.
- [Pitch Blanks](https://remocn.dev/docs/typography/pitch-blanks) — A one-line pitch shows underlined blanks with small labels, then each blank fills in with its word.
- [Plain License](https://remocn.dev/docs/typography/plain-license) — Dense legal clauses are replaced one by one by short plain-language phrases that build into a big line.
- [Point Expand](https://remocn.dev/docs/typography/point-expand) — Short statements rise word by word ending in a round point that pulses and expands into the next scene.
- [Post Script](https://remocn.dev/docs/typography/post-script) — A signoff and signature rise, then shrink away as a P.S. line grows and an install command wipes in.
- [Riddle Clues](https://remocn.dev/docs/typography/riddle-clues) — A numbered clue sets up a line, an accent twist completes it, and the clues repeat before a closing reveal.
- [Rsvp](https://remocn.dev/docs/typography/rsvp) — A big invitation headline, then a what, when and where table that builds up to an accent install command.
- [Run on](https://remocn.dev/docs/typography/run-on) — A breathless run-on sentence speeds up and scrolls away, then a full stop drops into a short promise line.
- [Script Cut](https://remocn.dev/docs/typography/script-cut) — A one-line script is cut by accent ticks into shots, and each piece flies up to fill the frame.
- [Scrub Reveal](https://remocn.dev/docs/typography/scrub-reveal) — A dim paragraph climbs as a soft front brightens it word by word, with one phrase in gradient italic.
- [Story Dip](https://remocn.dev/docs/typography/story-dip) — Three timestamped story lines enter in columns: a snag drops low and dims, then the resolution climbs and lights up.
- [Tagline Justify](https://remocn.dev/docs/typography/tagline-justify) — A tagline springs in word by word and sets as a justified block, with one word in gradient serif italic.
- [They Are You](https://remocn.dev/docs/typography/they-are-you) — Short statements about someone rise one by one, then the leading They flips to an accent You in each.
- [Three Steps](https://remocn.dev/docs/typography/three-steps) — Three large numerals light up along a line as a dot travels, each with a title and detail.
- [Tldr on Top](https://remocn.dev/docs/typography/tldr-on-top) — A short TL;DR summary stacks above a dense paragraph that fades into the background.
- [Turnabout](https://remocn.dev/docs/typography/turnabout) — One sentence turns into its mirror image as words flip, ending with an accent-colored phrase.
- [Uncomment Line](https://remocn.dev/docs/typography/uncomment-line) — Code-comment lines lose their comment markers one by one and light up as live copy.
- [Verbed](https://remocn.dev/docs/typography/verbed) — A dictionary entry defines a product name as a noun, then as a verb, with inflections and an example.
- [We Call It](https://remocn.dev/docs/typography/we-call-it) — Short descriptive lines build up to a large product name introduced by a lead-in phrase.
- [Week Shipped](https://remocn.dev/docs/typography/week-shipped) — A week-recap list rolls day by day in heavy type, each day followed by what shipped.
- [What Sticks](https://remocn.dev/docs/typography/what-sticks) — A column of claims dims one by one until a single line stays highlighted.
- [Which Means](https://remocn.dev/docs/typography/which-means) — A feature tag leads into a chain of consequences, each introduced by a hinge phrase.
- [Whole Page](https://remocn.dev/docs/typography/whole-page) — A manifesto of serif belief paragraphs fills the page in columns, one after another.
- [Your Name Here](https://remocn.dev/docs/typography/your-name-here) — A launch-film caption has a slot where the brand name is swapped in for the viewer's own.

## Headline reveals

Headline-and-subhead entrances with a signature treatment: bokeh, slit-scan, comet trails, photo-filled type.
Use one for the title beat of a feature announcement.

- [Acronym Expand](https://remocn.dev/docs/typography/acronym-expand) — An acronym expands letter by letter into its full name, with an eyebrow above and a subhead below.
- [Baseline Drop](https://remocn.dev/docs/typography/baseline-drop) — Words fall onto a shared baseline one after another while a gradient streak glows beneath them.
- [Beam Split](https://remocn.dev/docs/typography/beam-split) — A light beam cuts a bold headline in two and a serif italic phrase appears in the gap.
- [Block Swap](https://remocn.dev/docs/typography/block-swap) — A solid block wipes over each line and the next line replaces it, ending with a highlighted word on a pill.
- [Bokeh Title](https://remocn.dev/docs/typography/bokeh-title) — A serif headline sharpens out of drifting bokeh lights that first form a pattern.
- [Comet Headline](https://remocn.dev/docs/typography/comet-headline) — A headline and subhead arrive while a comet streaks arcs behind each word, with one phrase highlighted.
- [Cooling Type](https://remocn.dev/docs/typography/cooling-type) — A sentence types out glowing hot and cools to ink, ending on an italic serif word and a caret.
- [Counter Reveal](https://remocn.dev/docs/typography/counter-reveal) — A huge front word reveals a second line through the counters of its letters over a gradient.
- [Cover Ring](https://remocn.dev/docs/typography/cover-ring) — An audio-style bar meter appears above a headline line that collapses into a closing caption over green light.
- [Cursor Frame](https://remocn.dev/docs/typography/cursor-frame) — A selection frame with handles and a size badge is dragged and resized around a headline, rewrapping it.
- [Depth Headline](https://remocn.dev/docs/typography/depth-headline) — A huge serif headline sits behind a gradient sphere that slides in front of it for a sense of depth.
- [Dot Type](https://remocn.dev/docs/typography/dot-type) — Words are drawn from a field of round dots in a gradient, with the last word set in the accent.
- [Ellipsis Resolve](https://remocn.dev/docs/typography/ellipsis-resolve) — Three pulsing dots resolve into a gradient word and a closing period.
- [Enhance Count](https://remocn.dev/docs/typography/enhance-count) — A blurred, thin line sharpens in place into a heavier weight, with the last word in the accent.
- [Feather Settle](https://remocn.dev/docs/typography/feather-settle) — Words drift down and sway like feathers before settling into a sentence, with one phrase highlighted.
- [Feature Headline](https://remocn.dev/docs/typography/feature-headline) — A tag pill opens from the left, then a headline rises word by word with a supporting subhead.
- [Flick Swap](https://remocn.dev/docs/typography/flick-swap) — A headline flicks up on a scrolling rail to swap between items, each with a label and a highlighted phrase.
- [Focus Pan Text](https://remocn.dev/docs/typography/focus-pan-text) — Earlier lines stack up blurred as focus pans down line by line to a final sentence and a small toolbar.
- [Glass Capsule](https://remocn.dev/docs/typography/glass-capsule) — A glass capsule slides over the focus word of a two-line headline and magnifies it in italic.
- [Grid Cell](https://remocn.dev/docs/typography/grid-cell) — A grid cell lights up in a graph-paper field and a headline is typed into it with a mono label.
- [Italic Speed](https://remocn.dev/docs/typography/italic-speed) — A slanted caps word rides in on speed strips, with a serif italic subtitle under an underline.
- [Lights Out](https://remocn.dev/docs/typography/lights-out) — Five lights go out one by one and a heavy italic headline slams in with an accent period.
- [Macro Pan](https://remocn.dev/docs/typography/macro-pan) — A serif headline is revealed by a close-up pan across its glyphs, pulling back to a full lockup.
- [Mono Settle](https://remocn.dev/docs/typography/mono-settle) — Two lines set in monospace settle into proportional type, with the last words in the accent.
- [Mono Voice](https://remocn.dev/docs/typography/mono-voice) — Stacked lines shift voice mid-line from monospace to proportional type, ending on a large accent word.
- [Ndot Resolve](https://remocn.dev/docs/typography/ndot-resolve) — A headline scans in as a dot-matrix face, then refreshes letter by letter into solid type.
- [Out of Context](https://remocn.dev/docs/typography/out-of-context) — A bold claim stacks line by line, then a pulled-out phrase finishes it in the accent color.
- [Parallax Lockup](https://remocn.dev/docs/typography/parallax-lockup) — A stacked headline scrolls into a lockup with parallax between lines, the last line in a gradient.
- [Path Text](https://remocn.dev/docs/typography/path-text) — Text starts along a loose hand-drawn path, then straightens into a clean line with an italic tail.
- [Photo Caret](https://remocn.dev/docs/typography/photo-caret) — A multi-line headline types word by word with a hopping caret while product photos float around it.
- [Photo Fill Type](https://remocn.dev/docs/typography/photo-fill-type) — A word cut out of the stage opens onto a photo that fills the frame, followed by a caption.
- [Point Intro](https://remocn.dev/docs/typography/point-intro) — A headline is written word by word and a colored point lands after it: 'Introducing Remocn 2.0.'
- [Poster Crop](https://remocn.dev/docs/typography/poster-crop) — A poster headline crops in tight, line by line, over a ruled blue ground
- [Prompt Restyle](https://remocn.dev/docs/typography/prompt-restyle) — A headline is restyled by prompt instructions, ending in a serif italic gradient 'you own'
- [Pulse Line](https://remocn.dev/docs/typography/pulse-line) — A heartbeat-style pulse runs through 'Every frame has a pulse.' with the last word in teal
- [Rewrite Bars](https://remocn.dev/docs/typography/rewrite-bars) — Bars sweep over a headline to rewrite it, 'Your launch video, rendered from code.'
- [Scan Reveal](https://remocn.dev/docs/typography/scan-reveal) — A scan line reveals a headline over an underline with a small subtitle below
- [Serif Rise](https://remocn.dev/docs/typography/serif-rise) — A large serif line rises into place, 'From rough cut to final cut.', end phrase in red
- [Slash Wipe](https://remocn.dev/docs/typography/slash-wipe) — A gradient slash wipes across and reveals a large title, '/transitions', with a one-line sub
- [Slide Doors](https://remocn.dev/docs/typography/slide-doors) — Two panels slide apart like doors to reveal 'Arriving in your repo.' with an accent word
- [Slit Scan](https://remocn.dev/docs/typography/slit-scan) — A word is slit-scanned into view through fluted slices, with a speed stat in the caption
- [Speed Ramp Word](https://remocn.dev/docs/typography/speed-ramp-word) — Time slows on the key word as it warms to a gradient, with a timecode HUD
- [Spotlight Text](https://remocn.dev/docs/typography/spotlight-text) — A spotlight travels across a dark headline, 'Launch videos, in code.', with a mono eyebrow
- [Stripe Mask](https://remocn.dev/docs/typography/stripe-mask) — Slanted stripes mask a two-sentence bold headline into view
- [Torn Edge](https://remocn.dev/docs/typography/torn-edge) — A torn paper sheet rips away to reveal a bold headline printed on the gradient stage
- [Two Hit](https://remocn.dev/docs/typography/two-hit) — A two-hit headline, "Streaming now.", in white then blue, right-aligned on black
- [Unmask Line](https://remocn.dev/docs/typography/unmask-line) — A monospace line is unmasked letter by letter, 'Out of stealth.', the last word in green
- [Wake Wipe](https://remocn.dev/docs/typography/wake-wipe) — A wake-like wipe reveals 'Ship the launch video today.' with a gradient accent word
- [Waveform Title](https://remocn.dev/docs/typography/waveform-title) — A headline rises over an aurora waveform line that settles into an underline beneath it
- [Word Gap Media](https://remocn.dev/docs/typography/word-gap-media) — A video tile slots into the gap between "Launch all" and "of this"
- [Word Pullback](https://remocn.dev/docs/typography/word-pullback) — The camera pulls back from a big word to reveal "The cinematic toolkit for every launch"

## Kinetic posters

Loud, poster-style type for social cuts and hype beats.
Slams, stacks, countdowns and game-UI gags.

- [Boss Bar](https://remocn.dev/docs/typography/boss-bar) — A boss HP bar is drained by hits, then 'DEFEATED' slams in beneath 'The old workflow'
- [Chunk Stack](https://remocn.dev/docs/typography/chunk-stack) — "learn motion by making it" stacks one word per line with a yellow highlighter on "making"
- [Drop Timer](https://remocn.dev/docs/typography/drop-timer) — A countdown to a drop ends in a huge gradient 'LIVE NOW' with a URL and logo
- [Edge Fit](https://remocn.dev/docs/typography/edge-fit) — A single huge cream word, 'recaps', fills the frame edge to edge with a caption and logo
- [Escalate Cards](https://remocn.dev/docs/typography/escalate-cards) — Cards flash one word each, accelerating until the last word fills the frame over a date
- [Feature Chips Flow](https://remocn.dev/docs/typography/feature-chips-flow) — Rows of feature pills stream by, then snap into a cluster around the logo
- [Full Bleed Type](https://remocn.dev/docs/typography/full-bleed-type) — Huge condensed caps words slam in one at a time, the last lit by a sunrise gradient
- [Glyph Relay](https://remocn.dev/docs/typography/glyph-relay) — "Building a product" hands off between lines until a giant question mark resolves into "Launching it?"
- [Got Em](https://remocn.dev/docs/typography/got-em) — A suspense line resolves into an exploded 'GOT 'EM' over a gradient sunburst
- [Hook Uncurl](https://remocn.dev/docs/typography/hook-uncurl) — Stacked condensed caps lines uncurl into place, ending on 'Just make the video.'
- [Kill Feed](https://remocn.dev/docs/typography/kill-feed) — A kill-feed of eliminations builds to a big gradient 'PENTA SHIP' banner
- [Ko Count](https://remocn.dev/docs/typography/ko-count) — A ten-count of hard-cut numerals ends in a full-frame gradient word slam with a serif subline.
- [Line Relief](https://remocn.dev/docs/typography/line-relief) — A big word is ruled out of 40 horizontal lines that bulge into relief, then resolves to solid.
- [Oval Type](https://remocn.dev/docs/typography/oval-type) — Words ride a row of stretchy gradient capsules, which then grow into a tall three-word poster.
- [Rep Stack](https://remocn.dev/docs/typography/rep-stack) — A caps word scrolls past a gate as a reel of outlined copies, then locks as a cutout.
- [Round Slam](https://remocn.dev/docs/typography/round-slam) — 'ROUND 1' slams in in two hits, then 'SHIP!' punches over a red slashed band.
- [Sold Out](https://remocn.dev/docs/typography/sold-out) — A stock counter races to zero, then a tilted chrome 'SOLD OUT' band slams across.
- [Spine Turn](https://remocn.dev/docs/typography/spine-turn) — Titles rise in large, then turn 90 degrees to become book spines along the bottom rule.
- [Split Word](https://remocn.dev/docs/typography/split-word) — A huge word is cut open by a hairline and a second word slides into the gap.
- [Strobe Words](https://remocn.dev/docs/typography/strobe-words) — Big words strobe in on flashing fields at a tightening rhythm, then land on a poster with the logo.
- [Tategaki Turn](https://remocn.dev/docs/typography/tategaki-turn) — Words drop in as vertical columns, then swing upright into one horizontal line.
- [Walkout Name](https://remocn.dev/docs/typography/walkout-name) — A fighter-style name stack slams in line by line, then a light band, record and nickname arrive
- [Word Acts](https://remocn.dev/docs/typography/word-acts) — Each word acts out its own meaning in a short beat, ending on a held poster word
- [Word Stack](https://remocn.dev/docs/typography/word-stack) — Caps words push up into a tight poster stack, and the last one turns into a serif gradient italic
- [Wrapped Squash](https://remocn.dev/docs/typography/wrapped-squash) — Each caps line squashes to fill its own colored block, stacking into a full-frame poster

## Word swaps

One word or phrase turns into another in place: anagrams, typo fixes, word ladders, select and replace.
Use them to change a claim without cutting the shot.

- [Anagram Shuffle](https://remocn.dev/docs/typography/anagram-shuffle) — The letters of one word slide into new positions to spell its anagram.
- [Diff Swap](https://remocn.dev/docs/typography/diff-swap) — A code-diff style edit rewrites a before line into the after line with the changed part highlighted.
- [Flank Roll Swap](https://remocn.dev/docs/typography/flank-roll-swap) — Two flanking words roll into new words around a photo placed in the middle of the line.
- [Focus Front Swap](https://remocn.dev/docs/typography/focus-front-swap) — A headline pulls focus from line to line, blurring one out as the next comes forward, then ends on a logo.
- [Half Built](https://remocn.dev/docs/typography/half-built) — A sentence of unfinished verbs shows each one as an outline that fills in as it ships.
- [Layout Swap](https://remocn.dev/docs/typography/layout-swap) — Headlines swap by shifting layout, each new line growing out of the one before.
- [Layover](https://remocn.dev/docs/typography/layover) — A headline's key word cycles through short stops before landing on the final word.
- [Less More](https://remocn.dev/docs/typography/less-more) — A dimmed line is set against a bright accent line that lands below it.
- [Nonstop](https://remocn.dev/docs/typography/nonstop) — A labeled counter rolls down from a number to zero and resolves into a big no-stops phrase.
- [On Approach](https://remocn.dev/docs/typography/on-approach) — A fixed lead phrase stays while a time phrase swaps down to the closing word today.
- [Pass Swap](https://remocn.dev/docs/typography/pass-swap) — An object sweeps across the frame and each pass swaps the headline to the next line.
- [Pinned Word](https://remocn.dev/docs/typography/pinned-word) — A serif italic word stays pinned in a sentence while the words around it change.
- [Pull in](https://remocn.dev/docs/typography/pull-in) — A fixed lead phrase stays while spaced-out place words pull into view one after another.
- [Ruby Press](https://remocn.dev/docs/typography/ruby-press) — A word in a sentence is pressed out and replaced from a list, with small glosses above.
- [Select Replace](https://remocn.dev/docs/typography/select-replace) — A phrase is selected like text in an editor, deleted, and replaced with new styled words.
- [Typo Fix](https://remocn.dev/docs/typography/typo-fix) — A misspelled word is caught and corrected in place inside a short line.
- [Width Lock](https://remocn.dev/docs/typography/width-lock) — A condensed line keeps a fixed width while one word swaps through a list.
- [Word Insert](https://remocn.dev/docs/typography/word-insert) — A sentence edits itself, opening a gap and inserting new words in an accent gradient.
- [Word Ladder](https://remocn.dev/docs/typography/word-ladder) — A word changes a letter or two per rung, climbing a ladder to the final word.
- [Yes Run](https://remocn.dev/docs/typography/yes-run) — A string of short questions is each answered with the same bold Yes tag on bright orange.

## Letter mechanics

Effects that work on the letters themselves.
Kerning, weight, case, font and single glyphs move while the word stays readable.

- [A to Z](https://remocn.dev/docs/typography/a-to-z) — An alphabet gag where a big letter column rolls from A to Z and lands on a final entry
- [Axis Flex](https://remocn.dev/docs/typography/axis-flex) — A gradient word flexes its width and weight like an elastic variable font, then snaps to a final style
- [Caret Letter](https://remocn.dev/docs/typography/caret-letter) — A blinking caret types a word, then slides in and morphs into the missing letter
- [Case Flip](https://remocn.dev/docs/typography/case-flip) — A headline flips glyph by glyph from lowercase to uppercase and back to its final casing
- [Font Cycle](https://remocn.dev/docs/typography/font-cycle) — One word rapidly cycles through typefaces, each labeled, before settling in its final face
- [Hidden Word](https://remocn.dev/docs/typography/hidden-word) — A word is found hidden letter by letter inside a sentence and lifted out as a large italic title
- [Kerning Snap](https://remocn.dev/docs/typography/kerning-snap) — Loose letters snap one by one into correct kerning, forming a gradient serif word
- [Letter Relay](https://remocn.dev/docs/typography/letter-relay) — Letters of a wordmark hop one after another, each taking off as the last lands, then tighten into place.
- [Liquid Word](https://remocn.dev/docs/typography/liquid-word) — One word melts into a glowing gradient pool, then a new word rises out of it and sets.
- [Long Vowel](https://remocn.dev/docs/typography/long-vowel) — A serif word stretches one vowel into a long drawl, colored in a warm gradient, with an italic caption.
- [Macro Letter Pan](https://remocn.dev/docs/typography/macro-letter-pan) — A macro camera hops across the letters of a key word, then pulls back to reveal the full phrase.
- [Magnet Letters](https://remocn.dev/docs/typography/magnet-letters) — A magnet pulls a wrong word into line, then repels it, and the right word drops in.
- [Rubberband Word](https://remocn.dev/docs/typography/rubberband-word) — A cursor grabs a word by its last letter, stretches it like elastic, and it snaps into a new word.
- [Ruler Align](https://remocn.dev/docs/typography/ruler-align) — A ruler slides under a messy line of text and straightens its letters onto the edge.
- [Scissors Cut](https://remocn.dev/docs/typography/scissors-cut) — Scissors cut a word out of a line, and a replacement word slides into the gap.
- [Shed Weight](https://remocn.dev/docs/typography/shed-weight) — One line repeats at growing sizes, each cut redrawn with its own optical weight, with size labels.
- [Squeeze Out](https://remocn.dev/docs/typography/squeeze-out) — Condensed text squeezes out line by line and relaxes into its full width.
- [Stack Letters](https://remocn.dev/docs/typography/stack-letters) — Letters tumble and stack into place to spell a caps word over a warm gradient
- [Tittle Drop](https://remocn.dev/docs/typography/tittle-drop) — Dots of the i and j drop in last onto 'Ship it in minutes.' on a light ground
- [Weight Wave](https://remocn.dev/docs/typography/weight-wave) — A wave of font weight travels across a line of text and settles on a highlighted word

## Quotes

Big pull quotes with an attribution line.
For testimonials and social proof.

- [Changed Mind](https://remocn.dev/docs/typography/changed-mind) — A big serif pull quote, "The only tool I use now.", with a solo-founder attribution
- [Deadpan Box](https://remocn.dev/docs/typography/deadpan-box) — A flat, deadpan quote in a blue box with a small attribution line
- [Overheard](https://remocn.dev/docs/typography/overheard) — A question quote, "Who made our launch video?", answered by "I did. It's in the repo."
- [Quote Hero](https://remocn.dev/docs/typography/quote-hero) — A big pull quote with an underlined italic phrase and a named founder attribution
- [Said Who](https://remocn.dev/docs/typography/said-who) — A big serif pull quote, "Took me one evening.", with a backend-engineer attribution

## More

- [Word Stream](https://remocn.dev/docs/typography/word-stream) — Voiceover-paced phrases building word by word while the line drifts left
- [Word Push](https://remocn.dev/docs/typography/word-push) — Words drive in from the right and push the line left into its new center
- [Sheen Slide In](https://remocn.dev/docs/typography/sheen-slide-in) — A title glides in from the right with a long settle while a gradient sheen sweeps through the glyphs
- [Squeeze In](https://remocn.dev/docs/typography/squeeze-in) — Characters appear one by one, then the whole word squeezes as the last one lands
- [Fog Rise](https://remocn.dev/docs/typography/fog-rise) — Display text resolves out of fog center-out, sharpening from heavy blur with vertical streaks
- [Caret Swap](https://remocn.dev/docs/typography/caret-swap) — A gradient caret expands into a block that consumes the first text, then types the second
- [Zoom Words](https://remocn.dev/docs/typography/zoom-words) — Huge words fade into a long line while the camera rides the write head
- [Centered Word Build](https://remocn.dev/docs/typography/centered-word-build) — Words appear sharply from below while the centered phrase pushes closer on every beat
- [Inline Pill Takeover](https://remocn.dev/docs/typography/inline-pill-takeover) — A clipped pill expands inside a sentence, pushes the words apart, and takes over the frame
- [Typed Split Wipe](https://remocn.dev/docs/typography/typed-split-wipe) — A centered cursorless type build exits through opposing fixed-layout glyph wipes
- [Shadow Sweep Text](https://remocn.dev/docs/typography/shadow-sweep-text) — A rising line is uncovered and removed by two dense dark shadow sweeps
- [Outline Fill Track Text](https://remocn.dev/docs/typography/outline-fill-track-text) — A rising lead word gives way to an outlined value that fills as one continuous track moves left
- [Gradient Scale Cut Text](https://remocn.dev/docs/typography/gradient-scale-cut-text) — An oversized gradient reveal snaps to a compact blurred line that settles into focus
- [Rush Type](https://remocn.dev/docs/typography/rush-type) — White words blast into vertical RGB shutter trails generated entirely by motion
- [Strikethrough Replace](https://remocn.dev/docs/typography/strikethrough-replace) — Draws a strike line through the old text, then fades the new text in beneath it for an editorial correction
- [Kinetic Morph Text](https://remocn.dev/docs/typography/kinetic-morph-text) — Letters lift, rotate, and reshape into the next phrase with delicate outline trails
- [Kinetic Warp](https://remocn.dev/docs/typography/kinetic-warp) — A coarse mesh warp bends a whole word in staccato beats, one axis moving per keyframe
- [Ink Underline](https://remocn.dev/docs/typography/ink-underline) — A hand-dragged ink stroke that draws itself across in a few stop-motion poses
- [Handwrite](https://remocn.dev/docs/typography/handwrite) — Handwritten text laid down letter by letter on a quantized stop-motion clock
- [Hand Count](https://remocn.dev/docs/typography/hand-count) — A number that counts up in stop-motion poses, rewritten by hand at every pose
- [Number Wheel](https://remocn.dev/docs/typography/number-wheel) — Odometer that rolls a number from one value to another with direction inferred from the values
- [Rolling Number](https://remocn.dev/docs/typography/rolling-number) — Odometer where every place rolls at its own speed, new places rising into view, settling exactly on the target value
- [Rolodex Flip](https://remocn.dev/docs/typography/rolodex-flip) — Cycle a word through a list of values with a 3D rolodex card flip
- [Value Swap](https://remocn.dev/docs/typography/value-swap) — Swap a value in place with a vertical slide so the layout never shifts
- [Infinite Marquee](https://remocn.dev/docs/typography/infinite-marquee) — A continuously scrolling horizontal text strip that loops seamlessly
- [Perspective Marquee](https://remocn.dev/docs/typography/perspective-marquee) — A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon
- [Gooey Morph](https://remocn.dev/docs/typography/gooey-morph) — Bars fly in Tetris-style, land as a row, and melt into a word through a gooey blur-and-threshold morph
- [Perspective Squeeze](https://remocn.dev/docs/typography/perspective-squeeze) — Two lines of heavy type endlessly trade height while corner-pinned perspective bends the flat stack into receding planes
- [Extrude Pop](https://remocn.dev/docs/typography/extrude-pop) — A flat word pops up out of the plane on a solid colored 3D body, no camera involved
- [Chromatic Wave](https://remocn.dev/docs/typography/chromatic-wave) — A soft wave travels down through the type; where it crosses, the letters ripple and split into RGB fringes, then settle back to white
- [Stretch In](https://remocn.dev/docs/typography/stretch-in) — Letters fly in from off-canvas and smear horizontally on the way — a vertex-lag deformation, not a scale

---

# Infinite Marquee
URL: https://remocn.dev/docs/typography/infinite-marquee

A continuously scrolling horizontal text strip that loops seamlessly

- Install: `npx shadcn@latest add @remocn/infinite-marquee`
- Vibe: clean
- Natural length: 180f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/infinite-marquee
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { InfiniteMarquee } from "@/components/remocn/infinite-marquee";

const InfiniteMarqueeScene = () => (
  <InfiniteMarquee text="ship · build · animate · " pixelsPerFrame={4} stroke />
);

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

### With Backdrop

Renders transparent — supply the background via `Backdrop`:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { InfiniteMarquee } from "@/components/remocn/infinite-marquee";

<Backdrop fill={{ type: "color", value: "#fafafa" }}>
  <InfiniteMarquee text="ship · build · animate · " pixelsPerFrame={4} stroke />
</Backdrop>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"ship · build · animate · "` | Text repeated across the marquee. Include trailing whitespace or punctuation for spacing. |
| `fontSize` | `number` | `120` | Font size in pixels |
| `color` | `string` | `"#171717"` | Text color when `stroke` is false |
| `fontWeight` | `number` | `900` | CSS font-weight |
| `pixelsPerFrame` | `number` | `4` | Horizontal scroll speed in pixels per frame |
| `stroke` | `boolean` | `false` | Render outlined text via `-webkit-text-stroke` instead of filled |
| `strokeColor` | `string` | `"#171717"` | Stroke color used when `stroke` is true |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the translating row |

## Use when
- A scene needs ambient motion in the background or as a decorative band between sections.
- Looping brand words, feature names, or a tagline should scroll continuously without a defined start/end.
- A ticker-style lower-third or full-bleed text treatment is required for the full clip duration.

## Don't use when
- The text should enter, hold, then exit — that is a reveal animation, not a ticker; use `blur-out-up` or `mask-reveal-up` instead.
- You need 3D perspective depth on the scrolling strip — use `perspective-marquee` for a tilted, depth-of-field version.
- The marquee should stop or snap to a specific word — this component loops forever with no hold state; compose a `Sequence` with a static slide instead.

---

# Ink Underline
URL: https://remocn.dev/docs/typography/ink-underline

A hand-dragged ink stroke that draws itself across in a few stop-motion poses

- Install: `npx shadcn@latest add @remocn/ink-underline`
- Vibe: paper
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ink-underline
```

## Usage

The stroke renders in normal flow — a block of `width` by `thickness + 4` — so it
stacks under text in a flex column. Pair it with `handwrite` and start the drag
the moment the writing finishes:

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { Handwrite, handwriteDuration } from "@/components/remocn/handwrite";
import { InkUnderline } from "@/components/remocn/ink-underline";

const url = "remocn.dev";

const InkUnderlineScene = () => (
  <AbsoluteFill
    style={{
      background: "#f1eee7",
      alignItems: "center",
      justifyContent: "center",
      flexDirection: "column",
      gap: 4,
    }}
  >
    <div style={{ position: "relative", width: 420, height: 96 }}>
      <Handwrite text={url} fontSize={64} />
    </div>
    <InkUnderline width={420} delay={handwriteDuration(url)} />
  </AbsoluteFill>
);

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

`Handwrite` centres itself inside its nearest positioned ancestor, which is why
it sits in a sized `position: relative` box here. The underline needs no such
box — it is a block in the flow.

The wobble in the stroke comes from `seed`: the same seed always draws the same
curve, and changing it gives a different hand. `durationSteps` is how many
stop-motion poses the drag takes, so the real length in frames is
`durationSteps * step`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `width` (required) | `number` | — | Stroke length in pixels |
| `color` | `string` | `"#6f7f35"` | Ink colour (any valid CSS color) |
| `thickness` | `number` | `9` | Brush width in pixels at full pressure |
| `pressure` | `number` | `1` | Weight the brush lands on, as a fraction of thickness |
| `release` | `number` | `0.15` | Weight the brush lifts off at; below pressure it thins into a dry tail |
| `grain` | `number` | `1` | Edge roughness; breaks the thin tail into dry-brush flecks, 0 gives clean edges |
| `delay` | `number` | `0` | Frames on the local clock before the drag begins |
| `durationSteps` | `number` | `5` | Stop-motion poses the drag takes |
| `seed` | `string` | `"ink"` | Seed for the curve wobble — same seed, same stroke |
| `step` | `number` | `3` | Frames per stop-motion pose — the tempo control |

## Use when
- A hand-dragged ink underline belongs beneath a written headline, URL, or stat — pairs with `handwrite`, with `delay` set from `handwriteDuration`.
- The scene already runs on the stop-motion clock and the stroke should arrive in the same discrete poses.

## Don't use when
- You are painting a highlight behind a word inside a sentence — use `marker-highlight`.
- You want to circle or strike through something: neither is this component.

---

# Inline Highlight
URL: https://remocn.dev/docs/typography/inline-highlight

Animate one word inside a sentence from a base color to a brand color

- Install: `npx shadcn@latest add @remocn/inline-highlight`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/inline-highlight
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { InlineHighlight } from "@/components/remocn/inline-highlight";

const InlineHighlightScene = () => (
  <InlineHighlight
    before="Ship faster with "
    highlight="remocn"
    highlightColor="#ff5e3a"
    fontSize={72}
  />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` (required) | `string` | — | Text rendered before the highlighted word |
| `highlight` (required) | `string` | — | The word that animates color |
| `after` | `string` | `""` | Text rendered after the highlighted word |
| `baseColor` | `string` | `"#171717"` | Starting color of the highlighted word and color of the surrounding text |
| `highlightColor` | `string` | `"#ff5e3a"` | Final color of the highlighted word |
| `fontSize` | `number` | `48` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- One keyword inside a sentence needs to draw attention through a color shift without any background decoration.
- The text is already visible and a subtle emphasis beat is needed mid-scene, not a full entrance.
- Clean, minimal brand-color callout is required — no physical marker, no underline, just the color pop.

## Don't use when
- You want a physical drawn marker or filled background behind the word — use `marker-highlight` for a visible paint-stroke effect instead.
- The entire sentence is new and needs to enter — this component is for emphasis within existing text, not a reveal; use `mask-reveal-up` or `per-word-crossfade` for full entrances.
- Multiple words across the sentence need to highlight in sequence — this highlights one span; compose multiple `Sequence`-wrapped instances or use `kinetic-center-build` for a word-by-word build.

---

# Inline Pill Takeover
URL: https://remocn.dev/docs/typography/inline-pill-takeover

A clipped pill expands inside a sentence, pushes the words apart, and takes over the frame

- Install: `npx shadcn@latest add @remocn/inline-pill-takeover`
- Vibe: premium
- Natural length: 30f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/inline-pill-takeover
```

## Usage

The line starts with a short pill between `before` and `after`. Its first animation changes explicit background width and height values, so the shape expands outward from center without scaling its contents. The full-size `insert` text appears through a hard opacity switch and is cropped by `overflow: hidden` until the pill opens around it. When that reveal finishes, a second local pill animation increases the background width and height through independent controls without changing the text's local font size. An independent camera wrapper begins its approach at the same time, cuts instantly to 86% of its final close-up, then settles to 100%. The pill and camera therefore move toward one another, and the pill keeps growing briefly after the camera settles. All timings were measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { InlinePillTakeover } from "@/components/remocn/inline-pill-takeover";

const InlinePillTakeoverScene = () => (
  <InlinePillTakeover
    before="powering 20%"
    insert="Start building"
    after="of the Internet."
  />
);

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

### With Backdrop

The component paints no background. The reference pairs warm white type and pill with an orange radial glow.

```tsx
import { Composition } from "remotion";
import { InlinePillTakeover } from "@/components/remocn/inline-pill-takeover";
import { Backdrop } from "@/components/remocn/backdrop";

const InlinePillTakeoverScene = () => (
  <Backdrop
    fill={{
      type: "gradient",
      value:
        "radial-gradient(circle at 50% 108%, #ffd77a 0%, #ff6840 31%, #f13d21 78%)",
    }}
  >
    <InlinePillTakeover
      before="powering 20%"
      insert="Start building"
      after="of the Internet."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` (required) | `string` | — | Text rendered before the expanding pill |
| `insert` (required) | `string` | — | Text centered inside the pill and revealed through its clip |
| `after` (required) | `string` | — | Text rendered after the expanding pill |
| `fontSize` | `number` | `52` | Base font size in pixels |
| `fontWeight` | `number` | `400` | CSS font-weight shared by the sentence and pill |
| `pillWidth` | `number` | `260` | Expanded pill width in pixels; tune this when changing insert text |
| `expandFrames` | `number` | `12` | Frames used for the initial width-and-height reveal |
| `pillRevealHeightScale` | `number` | `0.35` | Starting height as a fraction of the full pill height |
| `pillGrowAt` | `number` | `12` | Frame on which the local width-and-height growth begins |
| `pillGrowFrames` | `number` | `24` | Frames used for the local width-and-height growth |
| `pillGrowWidthScale` | `number` | `1.08` | Final local scale applied only to the pill width |
| `pillGrowHeightScale` | `number` | `1.16` | Final local scale applied only to the pill height |
| `outerExitFrames` | `number` | `18` | Frames used to blur and remove the outer copy |
| `takeoverAt` | `number` | `12` | Frame on which the camera approach begins |
| `takeoverScale` | `number` | `2.15` | Final scale held after the takeover settles |
| `blur` | `number` | `12` | Maximum blur applied to the disappearing outer text in pixels |
| `color` | `string` | `"#fff3df"` | Outer text color |
| `pillColor` | `string` | `"#fffaf0"` | Pill background color |
| `pillTextColor` | `string` | `"#1c1210"` | Pill text color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the component root |

## Use when
- A sentence should transform an inline placeholder into a CTA without cutting to a separate title card.
- You want the inserted label to physically push the surrounding copy apart before taking visual control.
- A short beat needs both an inline reveal and a decisive camera punch-in.

## Don't use when
- Only one phrase should change color without affecting layout — use `inline-highlight`.
- The inserted copy should replace text rather than displace it — use `caret-swap`.
- The camera should track a long growing line instead of one CTA — use `zoom-words`.

---

# Inline Word Roll
URL: https://remocn.dev/docs/typography/inline-word-roll

Switch words beside a fixed prefix with an accelerating vertical roll

- Install: `npx shadcn@latest add @remocn/inline-word-roll`
- Vibe: clean
- Natural length: 75f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/inline-word-roll
```

## Usage

The prefix remains on the baseline while the changing word rolls upward through
a softly masked slot. The next word arrives from below. The whole line smoothly
recenters as the word width changes, and successive switches get closer together.
The first word starts readable and the final word stays on screen.

```tsx
import { AbsoluteFill } from "remotion";
import { InlineWordRoll } from "@/components/remocn/inline-word-roll";

export const Headline = () => (
  <AbsoluteFill style={{ background: "#000" }}>
    <InlineWordRoll
      prefix="Looking for"
      text="leads | customers | subscribers | appointments | demos | quotes | registrants | trials | conversions"
      suffix="?"
    />
  </AbsoluteFill>
);
```

The default sequence finishes moving at frame 75. The demo adds a 30-frame final
hold. All durations use composition frames; at 30 fps the movement takes about
2.5 seconds. Set `acceleration={1}` for a steady pace. Faster intervals never
become shorter than the roll itself, so transitions cannot overlap.

Words and phrases are separated by `|` or newlines. Spaces inside a phrase are
preserved. Empty entries are ignored. The component has a transparent background;
add your own scene or texture behind it.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `prefix` | `string` | `"Looking for"` | Text that stays on the baseline. Its horizontal position follows the changing total width. |
| `text` | `string` | `"leads \| customers \| … \| conversions"` | Words or phrases separated by \| or newlines. |
| `suffix` | `string` | `"?"` | Appended to every changing word and rolls with it. |
| `fontSize` | `number` | `60` | Font size in composition pixels. The whole line scales down to fit the longest phrase within 84% of frame width. |
| `fontFamily` | `string` | `"Arial, Helvetica, sans-serif"` | Font family. Load custom font faces in your composition; measurement waits for the selected face. |
| `fontWeight` | `number` | `400` | Font weight. |
| `color` | `string` | `"#f5f5f5"` | Text color. |
| `interval` | `number` | `12` | Initial frames between switch starts. Also the first-word hold; never shorter than transitionFrames. |
| `acceleration` | `number` | `0.9` | Multiplier for each following interval, clamped to 0.5–1. Lower values accelerate faster; 1 gives constant timing. |
| `transitionFrames` | `number` | `6` | Duration of each upward roll, clamped to at least 1 frame. |

For custom sequences, `getInlineWordRollDuration({ text, interval, acceleration,
transitionFrames })` returns the number of frames until the last word settles.
Add your desired hold when choosing the composition or Sequence duration.
A single phrase needs no transition and returns 0.

Widths are measured in unscaled composition pixels after fonts load and again
when the text or font changes, preserving layout inside resized Players.
The same scale is used for every word, preventing font-size jumps. All movement
comes from Remotion frames; seeking directly to a switch reproduces the same
layout. No CSS animation clock or WebGL context is required.

## Use when
- A headline keeps its opening phrase while cycling through audiences, benefits or outcomes.
- Different word lengths should smoothly recenter the whole line during each switch.

## Don't use when
- Every new word should remain in the sentence — use `word-push`.
- Entire phrases should transform letter by letter — use `kinetic-morph-text`.

---

# Intelligence Glow
URL: https://remocn.dev/docs/typography/intelligence-glow

A question rises in under a breathing edge glow, the light collapses to a rule, and a serif-led answer resolves.

- Install: `npx shadcn@latest add @remocn/intelligence-glow`
- Vibe: premium
- Natural length: 148f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/intelligence-glow
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { IntelligenceGlow } from "@/components/remocn/intelligence-glow";

const IntelligenceGlowScene = () => (
  <IntelligenceGlow
    question="Cut a teaser for Friday?"
    answerLead="Done."
    answer="9 shots, timed to the beat."
    showLogo={false}
  />
);

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

The question rises in word by word while a colored light breathes around the frame edge, shimmers through the words as it thinks, then collapses into a thin rule. The `answerLead` word resolves in serif italic, followed by the rest of the `answer`, and the logo fades in last. It ships light and dark; `accent` tints the glow on dark only.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `question` | `string` | `"Make a launch film for Friday?"` | Asked while the edge glow breathes. |
| `answerLead` | `string` | `"Done."` | First word of the answer, set in a serif italic. |
| `answer` | `string` | `"14 shots, cut to the beat."` | Rest of the answer, resolves word by word after the lead. |
| `showLogo` | `boolean` | `true` | Show the Remocn logo under the answer on the poster frame. |
| `accent` | `string` | `"#3B5BFD"` | Replaces one glow color in the dark theme; unused in light. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- An AI feature beat that shows a prompt and its one-line answer, like a generated result.
- A reveal where the answer should feel produced on demand, with the light settling under it.

## Don't use when
- You want the answer typed out with a visible cursor and no glow — use `typewriter`.
- The question and answer are plain type with no light effects — use `answer-first`.
- You only need a soft blurred word reveal — use `soft-blur-in`.

---

# Italic Speed
URL: https://remocn.dev/docs/typography/italic-speed

A slanted caps word rides in on speed strips, with a serif italic subtitle under an underline.

- Install: `npx shadcn@latest add @remocn/italic-speed`
- Vibe: premium
- Natural length: 43f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/italic-speed
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ItalicSpeed } from "@/components/remocn/italic-speed";

const ItalicSpeedScene = () => (
  <ItalicSpeed title="FASTER" subtitle="Ship at race pace." accent="#3B5BFD" />
);

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

The word leans in from the side on speed strips, locks upright with an underline, and a serif italic subtitle fades in below. Pass `title` (set in capitals) and `subtitle`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"FASTER"` | Word shown in slanted capitals |
| `subtitle` | `string` | `"Ship at race pace."` | Serif italic line under the underline |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A speed or performance claim such as Faster that should feel like it is moving.
- A short punchy title in capitals that needs a fast, racing entrance.

## Don't use when
- The word is long or lowercase and needs a calm entrance - use `soft-blur-in`.
- You want a heavy slam instead of a ride-in - use `lights-out`.
- You want a smooth stretch of the text - use `stretch-in`.

---

# Keep Words
URL: https://remocn.dev/docs/typography/keep-words

Serif belief statements build word by word; each keyword turns red and drops into a closing column of mottos.

- Install: `npx shadcn@latest add @remocn/keep-words`
- Vibe: premium
- Natural length: 285f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/keep-words
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KeepWords } from "@/components/remocn/keep-words";

const KeepWordsScene = () => (
  <KeepWords
    beliefs={[
      { text: "A launch film should be written like code.", keep: "written" },
      { text: "Every scene you install stays yours.", keep: "yours" },
      { text: "And it ships on time with the release.", keep: "on time" },
    ]}
  />
);

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

Each belief builds word by word in a large serif; its keyword turns the accent color while the other words fall away, and the keyword flies down into a motto line. In the end the keywords stack into a column of one-word sentences, each ending in an accent full stop. Pass `beliefs` as `{ text, keep }` where `keep` is the exact word or phrase inside `text`. Timing stretches to fill the composition; 285 frames assumes three beliefs in 330. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `beliefs` | `{ text: string; keep: string }[]` | `DEFAULT_BELIEFS` | Beliefs played in order; keep is the word or phrase inside text to extract. |
| `accent` | `string` | — | Color of the keywords and full stops. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A closing manifesto beat with two or three beliefs that each boil down to one word.
- A values or principles moment where the keywords should end up stacked as a short motto.

## Don't use when
- You want every belief visible together as a full manifesto page — use `whole-page`.
- There is one statement or quote, not a series — use `changed-mind`.
- You want one big word with a full stop and a single supporting line — use `plain-license`.

---

# Kerning Snap
URL: https://remocn.dev/docs/typography/kerning-snap

Loose letters snap one by one into correct kerning, forming a gradient serif word

- Install: `npx shadcn@latest add @remocn/kerning-snap`
- Vibe: premium
- Natural length: 80f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/kerning-snap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KerningSnap } from "@/components/remocn/kerning-snap";

const KerningSnapScene = () => (
  <KerningSnap word="Kerning" interval={6} />
);

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

Letters start scattered and loose across the frame; from the center outward, each one springs into its kerned position every `interval` frames with a brief flash on the snap ticks, and the gradient fill reads whole once the word is set. Pass `word` and tune `interval` for pacing; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Typeset"` | The word assembled from loose letters. |
| `interval` | `number` | `7` | Frames between one letter snapping and the next. |
| `accent` | `string` | `"#3B5BFD"` | Color of the flash ticks beside the word. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A design-craft beat about typesetting, details or polish, where a word assembles precisely.
- A premium title reveal where scattered letters gather into one word with flash ticks at each snap.
- A headline that benefits from a rhythmic, countable assembly with a controllable interval.

## Don't use when
- You want letters to ease in with a spacing change rather than snapping — use `tracking-in`.
- The whole word should drop in at once, not assemble — use `squeeze-in`.
- You want the word to stretch or squash on entry — use `stretch-in`.

---

# Kill Feed
URL: https://remocn.dev/docs/typography/kill-feed

A kill-feed of eliminations builds to a big gradient 'PENTA SHIP' banner

- Install: `npx shadcn@latest add @remocn/kill-feed`
- Vibe: playful
- Natural length: 69f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/kill-feed
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KillFeed } from "@/components/remocn/kill-feed";

const KillFeedScene = () => (
  <KillFeed kills={["Manual keyframes", "Render queue", "Stock templates"]} banner="Triple ship" />
);

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

Elimination lines drop into a game-style feed one by one with streak callouts, and the last kill fires a gradient banner with a caption. Pass `kills`, `callouts`, `banner` and `caption`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `kills` | `string[]` | — | One feed line per elimination, in order. Remocn is always the one getting the kill. |
| `callouts` | `string[]` | — | The streak callout after each kill, bottom left. The last kill fires the banner instead. |
| `banner` | `string` | `"Penta ship"` | The multi-kill banner that slams across the middle after the last kill. |
| `caption` | `string` | `"5 / 5 eliminated"` | Small line under the banner, next to the logo. |
| `accent` | `string` | `"#3B5BFD"` | Small markers: the streak tick and the caption rule. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A playful recap where each shipped win lands as a kill in a game-style feed.
- A feature roundup that builds to a big multi-kill banner.

## Don't use when
- You want a single boss defeated by named hits — use `boss-bar`.
- You want a plain list of items — use `index-list`.

---

# Kinetic Center Build
URL: https://remocn.dev/docs/typography/kinetic-center-build

Words enter from the right and push the line until the full phrase locks centered

- Install: `npx shadcn@latest add @remocn/kinetic-center-build`
- Vibe: premium
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/kinetic-center-build
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KineticCenterBuild } from "@/components/remocn/kinetic-center-build";

const KineticCenterBuildScene = () => (
  <KineticCenterBuild text="Words push left." entryOffset={88} />
);

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

Each word lands centered, then the next word slides in from the right and pushes the line left so the growing phrase stays centered at every step — reads as one kinetic line build, best for short three-word phrases.

This is a layout-aware effect — it measures word widths to keep the line centered, so it works best with short headings.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { KineticCenterBuild } from "@/components/remocn/kinetic-center-build";
import { Backdrop } from "@/components/remocn/backdrop";

const KineticCenterBuildScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <KineticCenterBuild text="Words push left." entryOffset={88} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The phrase to build, word by word. Best with short three-word phrases. |
| `entryOffset` | `number` | `88` | How far in pixels each incoming word starts to the right before pushing the line. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the phrase container |

## Use when
- A short headline should build word by word with satisfying kinetic momentum, locking centered at the end.
- The reveal itself is the hero moment — the growing centered line carries visual weight through motion.
- Premium product or brand video needs a high-energy entrance for a 3–6 word phrase.

## Don't use when
- The text is long (7+ words) — the centering re-balance on each word becomes distracting; use `line-by-line-slide` for multi-word or multi-line phrases.
- The entrance should feel calm and neutral rather than kinetic — use `micro-scale-fade` or `mask-reveal-up` for composed, quiet reveals.
- Words should fade in sequentially with a vertical drift rather than push from the right — use `per-word-crossfade` for that calm keynote rhythm.

---

# Kinetic Morph Text
URL: https://remocn.dev/docs/typography/kinetic-morph-text

Letters lift, rotate, and reshape into the next phrase with delicate outline trails

- Install: `npx shadcn@latest add @remocn/kinetic-morph-text`
- Vibe: playful
- Natural length: 246f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/kinetic-morph-text
```

## Usage

Separate phrases with `|` or a newline. The first phrase flies into place;
after a readable pause, its letters lift and rotate into the next phrase.
Identical letters travel to their new positions. Other letters stretch and
soften into replacement glyphs, while additional characters enter and excess
characters leave. The final phrase stays on screen.

```tsx
import { KineticMorphText } from "@/components/remocn/kinetic-morph-text";

export const TitleScene = () => (
  <KineticMorphText text="Hello | Make it move | Shape what's next" />
);
```

The soft morph combines squash/stretch and a local blur/threshold blend of
native glyphs; it does not interpolate font outlines. Contour trails sample
earlier poses and disappear when the letters settle. All motion is driven by
the Remotion frame, including when scrubbing backward.

## Timing

At the defaults, the first entrance takes 54 frames, followed by a 42-frame
hold. Each subsequent phrase adds another 54-frame transition and 42-frame
hold. The three-phrase sequence finishes moving at frame 246; its full duration
including the final hold is 288 frames at 30 fps.

Use the duration helper when changing the phrase count, timing, or speed. It
returns frames at 30 fps; scale the result for another composition frame rate.
The docs preview updates its duration automatically when the copy, timing, or
speed changes, so every phrase remains included.

```tsx
import { Composition } from "remotion";
import {
  KineticMorphText,
  getKineticMorphTextDuration,
} from "@/components/remocn/kinetic-morph-text";

const props = {
  text: "Think | Make | Move | Repeat",
  transitionFrames: 48,
  holdFrames: 36,
  speed: 1,
};

export const Root = () => (
  <Composition
    id="KineticMorphText"
    component={KineticMorphText}
    defaultProps={props}
    durationInFrames={getKineticMorphTextDuration(props)}
    fps={30}
    width={1280}
    height={720}
  />
);
```

With `loop`, the sequence starts on the readable first phrase, skips the initial
entrance, and uses its final transition to return to that phrase. One complete
cycle has the same duration as the non-looping sequence. A single phrase stays
still in loop mode.

## Tuning the motion

Reduce `spread` and `rotation` for quieter movement. Set `morph={0}` for a clean
glyph crossfade during the flight and `trails={0}` to remove the outlines.
The font is Arial with Helvetica and sans-serif fallbacks, so no font download
is needed. The longest phrase determines a shared font size that fits within
82% of the composition width. Empty entries are ignored; empty input renders
only the background. Spaces, punctuation, repeated letters, and grapheme
clusters are preserved.

```tsx
<KineticMorphText
  text="Create | Iterate | Ship"
  spread={140}
  rotation={80}
  morph={0.65}
  trails={0.3}
  color="#ded4ff"
  backgroundColor="#171324"
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Hello \| Make it move \| Shape what's next"` | Phrases separated by pipes or newlines |
| `fontSize` | `number` | `100` | Maximum font size; automatically reduced to fit the longest phrase |
| `fontWeight` | `number` | `600` | CSS font weight |
| `color` | `string` | `"#b4f4d9"` | Letter and outline color |
| `backgroundColor` | `string` | `"#a800b7"` | Full-frame background; accepts transparent |
| `spread` | `number` | `180` | Flight radius in pixels, capped to fit the composition |
| `rotation` | `number` | `110` | Maximum letter rotation in degrees |
| `morph` | `number` | `0.75` | Soft shape-blend strength from 0 to 1 |
| `trails` | `number` | `0.45` | Outline echo opacity from 0 to 1 |
| `transitionFrames` | `number` | `54` | Entrance and transition duration at 30 fps |
| `holdFrames` | `number` | `42` | Readable pause per phrase at 30 fps |
| `loop` | `boolean` | `false` | Start on the first phrase and cycle back to it |
| `speed` | `number` | `1` | Playback multiplier; 0 freezes the animation |
| `className` | `string` | — | Optional class name on the full-frame root |

## Use when
- A short sequence of phrases should feel like the same letters physically rearranging.
- A playful title needs individual letter flights, soft shape changes, and readable pauses.
- Editable copy should drive the animation without manually positioning characters.

## Don't use when
- Words should switch with minimal movement — use `per-word-crossfade`.
- The text should stay readable throughout a subtle entrance — use `per-character-rise`.
- A single word should deform as one continuous surface — use `kinetic-warp`.

---

# Kinetic Warp
URL: https://remocn.dev/docs/typography/kinetic-warp

A coarse mesh warp bends a whole word in staccato beats, one axis moving per keyframe

- Install: `npx shadcn@latest add @remocn/kinetic-warp`
- Vibe: playful
- Natural length: 100f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/kinetic-warp
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KineticWarp } from "@/components/remocn/kinetic-warp";

const KineticWarpScene = () => (
  <KineticWarp
    text={"REM\nOCN"}
    fontFamily="Passion One"
    fontUrl="https://fonts.googleapis.com/css2?family=Passion+One:wght@700&display=block"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="KineticWarp"
    component={KineticWarpScene}
    durationInFrames={120}
    fps={30}
    width={1920}
    height={1080}
  />
);
```

The component renders to a canvas, so the font must actually be loaded before the text is drawn — pass `fontUrl` for any webfont and the render is held (via `delayRender`) until it lands.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"REM\nOCN"` | The text to warp. Split lines with `\n` |
| `textColor` | `string` | `"#FFFFFF"` | Fill color of the type |
| `fontFamily` | `string` | `"sans-serif"` | Font family drawn to the canvas |
| `fontUrl` | `string` | `""` | Stylesheet URL for the webfont. Empty string skips loading and uses a local font |
| `fontWeight` | `number` | `700` | CSS font-weight |
| `fontSize` | `number` | `107.1` | Layer-space font size, before `layerScale` |
| `leading` | `number` | `70` | Layer-space baseline-to-baseline distance, before `layerScale` |
| `tracking` | `number` | `-21` | Tracking in 1/1000 em |
| `layerScale` | `number` | `480` | Percent scale applied to the type after layout |
| `positionX` | `number` | `960` | Horizontal center of the text block in comp pixels |
| `positionY` | `number` | `540` | Vertical center of the text block in comp pixels |
| `compWidth` | `number` | `1920` | Canvas width in pixels |
| `compHeight` | `number` | `1080` | Canvas height in pixels |
| `meshRows` | `number` | `2` | Mesh cells vertically — the coarseness is the effect |
| `meshColumns` | `number` | `4` | Mesh cells horizontally |
| `colRestX` | `number` | `960` | Rest position of the moving column line |
| `colRightX` | `number` | `1255` | Column position at keyframes 2 and 3 |
| `colLeftX` | `number` | `678` | Column position at keyframes 4 and 5 |
| `rowRestY` | `number` | `540` | Rest position of the moving row line |
| `rowDownY` | `number` | `850` | Row position at keyframes 3 and 4 |
| `rowUpY` | `number` | `387` | Row position at keyframe 5 |
| `keyframeStride` | `number` | `20` | Frames between the six keyframes — motion ends at `5 * keyframeStride` |
| `easingBezier` | `[number, number, number, number]` | `[0.3, 0.74, 0.09, 1]` | Cubic bezier applied between keyframes |
| `resampleStep` | `number` | `4` | Destination pixels per resampled strip — lower is smoother and slower |
| `className` | `string` | — | Optional className passed to the wrapper |

Inspired by [How to Make Kinetic Warp Text Animation in After Effects](https://www.youtube.com/watch?v=IvTXbHLtod4) by P A N T E R.

## Use when
- A short, heavy display word needs a bold kinetic-typography moment where the whole word bends and snaps instead of individual letters animating.
- You want a rhythmic, beat-synced distortion — the mesh stops dead at every keyframe, so each pose lands like a drum hit (tune `keyframeStride` to the tempo).
- The type is a huge condensed display font filling the frame — the warp reads best when the word owns the canvas.

## Don't use when
- You need a text entrance — the word is fully visible from frame 0 and only distorts; use `tracking-in` or `soft-blur-in` for reveals.
- The text is long or small — the mesh bends quarters of the frame, so a paragraph turns to mush; use `per-character-rise` for body-size text motion.
- The vibe is corrupted or digital rather than elastic — use `rgb-glitch-text` for a glitch read.

---

# Known Terms
URL: https://remocn.dev/docs/typography/known-terms

Term and definition pairs push each other into place, building to an accent-colored final line.

- Install: `npx shadcn@latest add @remocn/known-terms`
- Vibe: clean
- Natural length: 159f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/known-terms
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KnownTerms } from "@/components/remocn/known-terms";

const KnownTermsScene = () => (
  <KnownTerms
    pairs={[
      { video: "A scene", dev: "a component." },
      { video: "An edit", dev: "a commit." },
      { video: "Your launch", dev: "a deploy." },
    ]}
  />
);

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

A term appears alone in the center, then slides left as its counterpart pushes in from the right with a dim joiner word between them. Earlier pairs dim as new ones stack beneath, and the last pair turns the accent color. Pass `pairs` as `{ video, dev, joiner? }`; `joiner` sets the default connector word. Timing adapts to the composition length; 159 frames assumes five pairs in 180. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `pairs` | `{ video: string; dev: string; joiner?: string }[]` | `DEFAULT_PAIRS` | Term and counterpart pairs; a pair's own joiner overrides the default. |
| `joiner` | `string` | `"is"` | Default connector word shown between the two halves. |
| `accent` | `string` | — | Color of the final pair; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A beat that maps familiar concepts to your product, such as a scene is a component.
- A short run of three to five equivalences that should build up and end on the key claim.

## Don't use when
- You need a dictionary-style definition of a single term — use `verbed`.
- Each line is a worry answered by a bigger reply, not an equivalence — use `in-proportion`.
- You only want a plain list of lines stepping in — use `indent-steps`.

---

# Ko Count
URL: https://remocn.dev/docs/typography/ko-count

A ten-count of hard-cut numerals ends in a full-frame gradient word slam with a serif subline.

- Install: `npx shadcn@latest add @remocn/ko-count`
- Vibe: playful
- Natural length: 98f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ko-count
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KoCount } from "@/components/remocn/ko-count";

const KoCountScene = () => <KoCount word="Shipped" subline="The old workflow did not get up." />;

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

Numerals one to ten hard-cut in with tightening gaps, each as a different crop and tilt, then the word slams in from large with a short knockout flash and shake. A serif subline wipes in and the logo rises. Pass `word`, `subline` and `label` to make it yours; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Knockout"` | The full-frame word that slams in after the count. |
| `subline` | `string` | `"The old workflow did not get up."` | Serif italic line that wipes in under the word. |
| `label` | `string` | `"The count"` | Small label next to the count, bottom left. |
| `accent` | `string` | `"#3B5BFD"` | Color of the count ticks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A launch beat that builds suspense with a quick count to ten before a big verdict word.
- A punchy opener where the final word should land like an impact frame with camera shake.
- A competitive or 'we beat the old way' moment that ends on a one-line serif punchline and the logo.

## Don't use when
- You want a smooth numeric count-up of a metric, not a dramatic count — use `number-wheel`.
- The countdown leads to a live date or URL rather than a verdict word — use `drop-timer`.
- The tone is calm and understated, not an impact slam — use `cool-down`.

---

# Landing Confirmed
URL: https://remocn.dev/docs/typography/landing-confirmed

An altitude readout counts down to a hard stop, then a slammed confirmation gives way to a gradient title.

- Install: `npx shadcn@latest add @remocn/landing-confirmed`
- Vibe: premium
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/landing-confirmed
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LandingConfirmed } from "@/components/remocn/landing-confirmed";

const LandingConfirmedScene = () => (
  <LandingConfirmed
    from={800}
    confirm="Release confirmed"
    title="Live."
    subtitle="Version 2.0 is out."
  />
);

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

A giant altitude number counts down from `from` metres beside a gauge and a velocity readout, hard-stops at zero, flashes, and slams `confirm` across the frame. That line shrinks into a small label as `title` slams in as a gradient headline, with `subtitle` in serif italic and a logo beneath. The default logo is the Remocn wordmark, so pass your own through `logo`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `number` | `1200` | Altitude the descent starts from, in metres. |
| `confirm` | `string` | `"Touchdown confirmed"` | The slam at touchdown. Two words read best (one per line). |
| `title` | `string` | `"Shipped."` | The first resolve line, set big in caps. |
| `subtitle` | `string` | `"Nailed the landing."` | The second resolve line, set in a serif italic. |
| `logo` | `React.ReactNode` | — | Replaces the Remocn logo under the resolve. |
| `accent` | `string` | `"#3B5BFD"` | Gauge marker and small marks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A ship-day beat that treats the release like a landing: countdown, impact, then the big word.
- A closing card for a launch film that needs a punchy gradient title, a serif subline and a logo.

## Don't use when
- You want a countdown that ends on a live URL rather than a landing — use `drop-timer`.
- You only need one bold word with no telemetry or countdown — use `full-bleed-type`.
- The tone is a fighting-game knockout rather than a mission landing — use `ko-count`.

---

# Layout Swap
URL: https://remocn.dev/docs/typography/layout-swap

Headlines swap by shifting layout, each new line growing out of the one before.

- Install: `npx shadcn@latest add @remocn/layout-swap`
- Vibe: clean
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/layout-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LayoutSwap } from "@/components/remocn/layout-swap";

const LayoutSwapScene = () => (
  <LayoutSwap headlines={["Animations.", "Animations, transitions, backgrounds."]} highlight="backgrounds." align="left" />
);

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

Each headline in `headlines` replaces the last by sliding its shared words into the new layout, and the `highlight` phrase lands in the accent color. Pass `headlines` and tune `hold` and `move` for pacing. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headlines` | `string[]` | — | Headlines in order; each builds on the previous. |
| `highlight` | `string` | `"ready to install."` | Phrase in the last headline lit in the accent color. |
| `align` | `"center" \| "left"` | `"center"` | Text alignment of the headline block. |
| `hold` | `number` | `28` | Frames each headline holds before moving. |
| `move` | `number` | `28` | Frames the layout shift between headlines takes. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A feature headline that builds from one noun to a full promise.
- A launch hook where each version of the sentence adds to the last.
- A multi-step message that should read as one growing sentence.

## Don't use when
- Only one word changes inside a fixed sentence — use `pinned-word`.
- The words flip order and meaning — use `turnabout`.
- You want each swap triggered by an object crossing — use `pass-swap`.

---

# Layover
URL: https://remocn.dev/docs/typography/layover

A headline's key word cycles through short stops before landing on the final word.

- Install: `npx shadcn@latest add @remocn/layover`
- Vibe: clean
- Natural length: 142f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/layover
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Layover } from "@/components/remocn/layover";

const LayoverScene = () => (
  <Layover from="Write it" word="here." stops={["w", "every"]} to="Plays" />
);

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

The `from` phrase stays while `word` cycles through each entry in `stops` and settles on `to`. Pass `from`, `word`, `stops` and `to` to tell your own stop-by-stop story. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"Write it"` | Phrase that stays in place. |
| `word` | `string` | `"here."` | Initial word in the cycling slot. |
| `stops` | `string[]` | `["w", "every"]` | Words the slot passes through. |
| `to` | `string` | `"Plays"` | Word the line settles on. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A journey beat where a word steps through intermediate stops before arriving.
- A tagline that morphs through shorthand fragments to a full word.
- A short hero line with one cycling slot.

## Don't use when
- You want a time phrase counting down to today — use `on-approach`, which is the close twin.
- The cycling slot should keep a fixed width — use `width-lock`.
- Words should pull into view from spaced-out places — use `pull-in`.

---

# Less More
URL: https://remocn.dev/docs/typography/less-more

A dimmed line is set against a bright accent line that lands below it.

- Install: `npx shadcn@latest add @remocn/less-more`
- Vibe: clean
- Natural length: 104f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/less-more
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LessMore } from "@/components/remocn/less-more";

const LessMoreScene = () => (
  <LessMore less="Less explaining." more="More showing." />
);

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

The `less` line enters and fades back while the `more` line lands below it in the accent color. Pass `less` and `more` for your own contrast pair. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `less` | `string` | `"Less explaining."` | Line that dims. |
| `more` | `string` | `"More showing."` | Line that lands in the accent color. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A short manifesto beat that sets old effort against new payoff.
- A two-line contrast in a pricing or positioning scene.
- A quick tagline that needs hierarchy, with the weaker idea dimmed.

## Don't use when
- You have a longer list of points to step through — use `what-sticks`.
- The contrast should show as an edit — use `diff-swap`.
- A word should flip rather than a full line — use `pinned-word`.

---

# Letter Relay
URL: https://remocn.dev/docs/typography/letter-relay

Letters of a wordmark hop one after another, each taking off as the last lands, then tighten into place.

- Install: `npx shadcn@latest add @remocn/letter-relay`
- Vibe: clean
- Natural length: 99f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/letter-relay
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LetterRelay } from "@/components/remocn/letter-relay";

const LetterRelayScene = () => <LetterRelay word="launchpad" hop={8} mark={false} />;

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

Each letter pops in, then hops over to its place in turn, squashing as it lands on a glowing floor; once the last one lands the spacing tightens to final kerning. Pass `word` for your own name and `hop` to set the pace. With `mark` on, a leading r is drawn as the Remocn R mark. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"remocn"` | The wordmark to spell, hopped in letter by letter. |
| `hop` | `number` | `10` | Frames per hop; the next letter takes off as the previous one lands. |
| `accent` | `string` | `"#3B5BFD"` | Color each letter takes on while it is in the air. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `mark` | `boolean` | `true` | Set the leading "r" as the Remocn R mark. |

## Use when
- A brand or product name needs a playful reveal at the start of a launch video, one letter hopping after another.
- An outro or sign-off beat where the wordmark lands letter by letter on a lit floor.
- The name starts with an r and you want the Remocn R mark as its first letter.

## Don't use when
- The name should type in like a command or prompt - use `typewriter`.
- You need a calm, quick reveal rather than a bouncing relay - use `per-character-rise`.
- The text is a full phrase, not a single short word - use `word-push` to build it word by word.

---

# Lights Out
URL: https://remocn.dev/docs/typography/lights-out

Five lights go out one by one and a heavy italic headline slams in with an accent period.

- Install: `npx shadcn@latest add @remocn/lights-out`
- Vibe: playful
- Natural length: 104f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/lights-out
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LightsOut } from "@/components/remocn/lights-out";

const LightsOutScene = () => (
  <LightsOut title="SHIP IT." beat={10} hold={24} accent="#3B5BFD" />
);

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

Five lights light up on the beat, hold, then go out and the headline slams in with a camera push and an accent period. Pass `title` (set in capitals), `beat` for the light interval and `hold` for the pause before they go out; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"SHIP IT."` | Headline slammed in after the lights go out |
| `beat` | `number` | `10` | Frames between each light turning on |
| `hold` | `number` | `24` | Frames all lights stay on before going out |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A launch countdown moment where the lights go out and the product name hits.
- A high-energy title for a racing or gaming flavored beat.

## Don't use when
- You want a calm reveal - use `soft-blur-in`.
- You want a speedy ride-in with a subtitle - use `italic-speed`.
- The title is a long sentence - use `line-by-line-slide`.

---

# Line-by-Line Slide
URL: https://remocn.dev/docs/typography/line-by-line-slide

Each line slides in from the left with a staggered flow then exits to the right

- Install: `npx shadcn@latest add @remocn/line-by-line-slide`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/line-by-line-slide
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LineByLineSlide } from "@/components/remocn/line-by-line-slide";

const LineByLineSlideScene = () => (
  <LineByLineSlide text={"Think different.\nDo more."} distance={48} />
);

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

The text is split on newline characters into individual lines. Each line slides in from the left, holds steady in the middle of the composition, then slides out to the right—so the duration should leave room for the staggered entry and exit animations.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { LineByLineSlide } from "@/components/remocn/line-by-line-slide";
import { Backdrop } from "@/components/remocn/backdrop";

const LineByLineSlideScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <LineByLineSlide text={"Think different.\nDo more."} distance={48} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate. Split on newline characters into lines. |
| `distance` | `number` | `48` | Horizontal slide distance in pixels each line travels. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A multi-line headline or short paragraph needs a flowing, line-by-line entrance with a matching exit.
- Directional slide motion (left-in / right-out) should underscore the reading rhythm of the text.
- A body-copy-style reveal is needed for bullet points or list items staged as stacked lines.

## Don't use when
- The text is a single short phrase — the stagger has nothing to stage; use `mask-reveal-up` or `per-character-rise` for single-line reveals instead.
- The reveal should move upward rather than slide horizontally — use `mask-reveal-up` (upward, masked) or `blur-out-up` (upward, blurred exit).
- The lines should not exit — this component slides lines out to the right; for a hold-in-place reveal, use `mask-reveal-up`.

---

# Line Relief
URL: https://remocn.dev/docs/typography/line-relief

A big word is ruled out of 40 horizontal lines that bulge into relief, then resolves to solid.

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

## Installation

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

## Usage

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

const LineReliefScene = () => <LineRelief word="LAUNCH" accent="#3B5BFD" />;

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

Forty thin horizontal lines sweep across the frame and rise into the shape of the word like a relief map. They then flatten while the solid word resolves out of a soft blur. Pass `word` (short, caps work best); `accent` tints the night sky, and it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"LAUNCH"` | The word ruled out of the lines. Keep it short. |
| `accent` | `string` | `"#3B5BFD"` | Tint for the sky behind the lines. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |

## Use when
- A hero title card where one huge word should first read as a topographic or radar-style relief.
- A premium reveal of a product or launch name over a dusk-toned gradient sky.
- A single-word beat that needs texture and depth rather than a plain fade.

## Don't use when
- The word must be readable from the first frame — use `full-bleed-type`.
- You want each glyph contour drawn as a stroke, letter by letter — use `outline-trace`.
- The text is a phrase or sentence, not one short word — use `staggered-fade-up`.

---

# Liquid Word
URL: https://remocn.dev/docs/typography/liquid-word

One word melts into a glowing gradient pool, then a new word rises out of it and sets.

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

## Installation

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

## Usage

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

const LiquidWordScene = () => <LiquidWord from="idea" to="product" />;

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

The `from` word holds, then melts under a swirl gradient, sags, drips and slumps into one pool. The `to` word rises out of the pool letter by letter from the center, and the liquid sets into solid ink. Pass `from` and `to` for your own words. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"draft"` | The word that melts. |
| `to` | `string` | `"shipped"` | The word that re-forms out of the pool, crisp and kerned. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `accent` | `string` | — | Kept for API parity; the liquid uses its own gradient palette. |

## Use when
- A before-and-after beat where an old word dissolves into the new one, such as draft turning into shipped.
- A playful transformation moment that needs a molten, organic feel instead of a clean crossfade.
- A tagline swap where the second word is the payoff and should land crisp after the melt.

## Don't use when
- The swap should read as an edit, like a correction - use `strikethrough-replace`.
- You need a quick, tidy word change beside a fixed prefix - use `inline-word-roll`.
- The scene must stay calm and corporate - use `fade-through` for a clean replacement.

---

# Long Vowel
URL: https://remocn.dev/docs/typography/long-vowel

A serif word stretches one vowel into a long drawl, colored in a warm gradient, with an italic caption.

- Install: `npx shadcn@latest add @remocn/long-vowel`
- Vibe: playful
- Natural length: 81f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/long-vowel
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LongVowel } from "@/components/remocn/long-vowel";

const LongVowelScene = () => <LongVowel word="Wow" repeat={6} rest="that was fast." />;

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

The word rises into place, then the chosen letter is drawn out with spring-driven copies that fan into a gradient trail; the caption words then slide up under it. Pass `word`, the `letter` to stretch (defaults to the first vowel), `repeat` for how many copies, and `rest` for the caption. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Way"` | The word whose vowel gets stretched. |
| `letter` | `string` | — | Which letter to stretch; defaults to the first vowel. |
| `repeat` | `number` | `5` | How many extra copies of the letter are drawn out. |
| `rest` | `string` | `"less keyframing."` | Caption set in italic under the word; empty for none. |
| `accent` | `string` | `"#3B5BFD"` | Accent color that seeds the gradient across the stretched letters. |
| `background` | `string` | — | Override the background color; use "transparent" to composite over your own. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |

## Use when
- A tagline that plays on emphasis, like a word drawn out for comic effect, followed by a short punchline.
- A casual, human beat that breaks up a run of tight product shots with a single stretched word.
- A hero line where a short word plus a caption is the whole scene.

## Don't use when
- You want letters to fly in and smear sideways - use `stretch-in`.
- The effect should be width and weight flexing on a whole word - use `axis-flex`.
- The line is serious or data-heavy and needs no comic stretch - use `tracking-in`.

---

# Loop Break
URL: https://remocn.dev/docs/typography/loop-break

A short loop of lines repeats faster each pass until a final line breaks it and highlights one phrase.

- Install: `npx shadcn@latest add @remocn/loop-break`
- Vibe: clean
- Natural length: 189f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/loop-break
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LoopBreak } from "@/components/remocn/loop-break";

const LoopBreakScene = () => (
  <LoopBreak
    loop={["Render the cut.", "Spot a typo.", "Start over."]}
    fix="Change one word. Done."
    highlight="Done."
  />
);

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

The `loop` lines rise in one by one, hold, then rewind and replay faster on each of the `passes`. On the last pass the loop's final row is replaced by `fix`, which rises in sentence by sentence with the `highlight` phrase in the accent color while the earlier lines dim. Timing is tuned for a 215-frame composition and compresses if it is shorter. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `loop` | `string[]` | — | Lines of the repeating loop; at least two. |
| `fix` | `string` | `"Change one word. Done."` | Line that breaks the loop; each sentence gets its own row. |
| `highlight` | `string` | `"Done."` | Phrase inside fix that turns accent-colored. |
| `passes` | `number` | `3` | How many times the loop plays before the break; minimum 2. |
| `accent` | `string` | — | Accent color; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A before and after beat that contrasts a tedious repeating workflow with a one-step fix.
- A joke about doing the same chore over and over that ends on the product's answer.

## Don't use when
- You want the old line struck through and replaced in place — use `strikethrough-replace`.
- The change is a single edit that should be shown as a diff — use `diff-swap`.
- There is no repetition, just a short statement and a reply — use `answer-first`.

---

# Macro Letter Pan
URL: https://remocn.dev/docs/typography/macro-letter-pan

A macro camera hops across the letters of a key word, then pulls back to reveal the full phrase.

- Install: `npx shadcn@latest add @remocn/macro-letter-pan`
- Vibe: premium
- Natural length: 84f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/macro-letter-pan
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MacroLetterPan } from "@/components/remocn/macro-letter-pan";

const MacroLetterPanScene = () => (
  <MacroLetterPan line="Ship it today." word="today" firstShot={12} />
);

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

The camera cuts between tight close-ups of letter pairs inside `word`, each shot shorter than the last, then springs back to show the whole `line`, with the key word tinting to the accent color. Pass `line` and `word` (a substring of the line). It takes a `theme` prop and ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `line` | `string` | `"Ready to launch."` | The full phrase revealed after the pan. |
| `word` | `string` | `"launch"` | The substring of the line the camera pans across. |
| `accent` | `string` | — | Color the key word turns after the pull-back. |
| `ink` | `string` | — | Text color; defaults to the theme ink. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `ground` | `GshPresetId` | — | Gradient preset id used as the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the background gradient parameters. |
| `firstShot` | `number` | `15` | Frames of the first close-up; later shots get shorter. |
| `maxShots` | `number` | `6` | Maximum number of close-up shots before the pull-back. |

## Use when
- A closing line where one word is the payoff and the camera should dwell on it before revealing the sentence.
- A premium, cinematic title beat set over a soft gradient ground.
- A call to action whose key word should land in the accent color after the pull-back.

## Don't use when
- You want the pan to end on a serif headline with a gradient fill - use `macro-pan`.
- The line should stay fully readable throughout - use `focus-pan-text` to keep earlier lines visible.
- A quick fade-in is enough for the line - use `soft-blur-in`.

---

# Macro Pan
URL: https://remocn.dev/docs/typography/macro-pan

A serif headline is revealed by a close-up pan across its glyphs, pulling back to a full lockup.

- Install: `npx shadcn@latest add @remocn/macro-pan`
- Vibe: premium
- Natural length: 134f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/macro-pan
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MacroPan } from "@/components/remocn/macro-pan";

const MacroPanScene = () => (
  <MacroPan title="Built to move." label="remocn" index="01" accent="#3B5BFD" />
);

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

The camera starts zoomed into the letters and pans across them, then pulls back to reveal the whole headline ending on a gradient while the corner label settles. Pass `title`, `label` and `index`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Built to move."` | Headline revealed by the pan |
| `label` | `string` | `"remocn"` | Running label in the corner; Remocn shows the logo |
| `index` | `string` | `"01"` | Number before the label, like a reel or chapter |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A title that should feel shot with a macro lens, scanning across the letterforms.
- A chapter opener with a running label and index in the corner.

## Don't use when
- You want a quick, clean entrance - use `staggered-fade-up`.
- You want a blur reveal with no camera move - use `focus-blur-resolve`.
- You want the lens effect on a single word - use `glass-capsule`.

---

# Magnet Letters
URL: https://remocn.dev/docs/typography/magnet-letters

A magnet pulls a wrong word into line, then repels it, and the right word drops in.

- Install: `npx shadcn@latest add @remocn/magnet-letters`
- Vibe: playful
- Natural length: 216f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/magnet-letters
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MagnetLetters } from "@/components/remocn/magnet-letters";

const MagnetLettersScene = () => (
  <MagnetLetters before="Ship " wrongWord="someday" word="today" after="." />
);

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

A sentence settles in, a horseshoe magnet sweeps across the wrong word and lines its scattered letters up, then repels it off the line. The sentence reflows and the right word drops in letter by letter before the magnet leaves. Pass `before`, `word`, `after` and `wrongWord`. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Launch "` | Text before the word that gets swapped. Keep the trailing space. |
| `word` | `string` | `"videos"` | The right word. It drops in once the wrong one is repelled. |
| `after` | `string` | `", in code."` | Text after the swapped word. |
| `wrongWord` | `string` | `"slides"` | The wrong word the magnet pulls into line first, then repels. |
| `accent` | `string` | `"#3B5BFD"` | Magnet body, landing ticks and the right word. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A correction beat in a sentence, such as swapping one word for the better word, shown as a physical gag.
- A launch video that contrasts the old way with the new way inside a single line.
- A playful mid-video moment that rewards a slightly longer, more theatrical word swap.

## Don't use when
- The swap should be quick and quiet - use `strikethrough-replace`.
- You need several alternates cycling beside a prefix - use `inline-word-roll`.
- The change is a value or number, not a word - use `slot-machine-roll`.

---

# Marker Highlight
URL: https://remocn.dev/docs/typography/marker-highlight

A colored marker block draws behind a phrase while the text color shifts

- Install: `npx shadcn@latest add @remocn/marker-highlight`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/marker-highlight
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MarkerHighlight } from "@/components/remocn/marker-highlight";

const MarkerHighlightScene = () => (
  <MarkerHighlight
    before="Ship it "
    highlight="fast"
    after="."
    markerColor="#facc15"
  />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `""` | Text that appears before the highlighted phrase |
| `highlight` (required) | `string` | — | The phrase the marker draws behind |
| `after` | `string` | `""` | Text that appears after the highlighted phrase |
| `markerColor` | `string` | `"#facc15"` | Color of the marker block |
| `baseColor` | `string` | `"#171717"` | Color of the surrounding text |
| `highlightedTextColor` | `string` | `"#171717"` | Final color of the highlighted phrase once the marker is drawn |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `speed` | `number` | `1` | Multiplier for animation speed |
| `className` | `string` | — | Optional className passed to the outer text span |

## Use when
- A key phrase inside a sentence needs a physical, hand-drawn-feeling highlight that visually underscores the word.
- A playful or educational tone is appropriate and the visible paint stroke adds expressive energy.
- The brand color should appear as a background fill rather than a text color shift.

## Don't use when
- You want a subtle color-only emphasis with no visible background — use `inline-highlight` for a clean color-shift with no marker block.
- The entire sentence is new text that needs to enter the scene — both highlight components are emphasis tools, not entrances; use `mask-reveal-up` or `per-word-crossfade` for full reveals.
- The scene tone is minimal or premium and a bold painted marker would clash — use `inline-highlight` for a quieter callout.
- The emphasis should land the moment a speaker says the word — use `caption-marker`, which swipes keywords from a timed transcript.

---

# Mask Reveal Up
URL: https://remocn.dev/docs/typography/mask-reveal-up

Lines reveal upward with a soft masked feel and compact stagger

- Install: `npx shadcn@latest add @remocn/mask-reveal-up`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/mask-reveal-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MaskRevealUp } from "@/components/remocn/mask-reveal-up";

const MaskRevealUpScene = () => (
  <MaskRevealUp text={"Designed to move.\nBuilt to focus."} distance={30} />
);

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

The text is split on newline characters into individual lines. Each line rises upward from below, holding steady in the middle of the composition with a soft blur mask, then rises further and blurs out—so the duration should leave room for the staggered entry and exit animations.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { MaskRevealUp } from "@/components/remocn/mask-reveal-up";
import { Backdrop } from "@/components/remocn/backdrop";

const MaskRevealUpScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <MaskRevealUp text={"Designed to move.\nBuilt to focus."} distance={30} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate. Split on newline characters into lines. |
| `distance` | `number` | `30` | Vertical distance in pixels each line rises from on enter. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A multi-line headline or stacked list needs a clean, contained upward reveal that holds on screen.
- The reveal should feel composed and intentional — no overshooting, no blur, no lateral movement.
- A neutral entrance is needed that works across tones (product, editorial, corporate) without imposing personality.

## Don't use when
- You need an exit animation too — `mask-reveal-up` holds in place after reveal; use `line-by-line-slide` for a reveal that also exits to the right.
- The reveal should be character-level rather than line-level — use `per-character-rise` (clean, sharp) or `bottom-up-letters` (staircase, dramatic) for letter-by-letter entrances.
- Blur or atmospheric softness should accompany the upward motion — use `blur-out-up` (blurred exit) or `focus-blur-resolve` (blurred entrance) instead.

---

# Matrix Decode
URL: https://remocn.dev/docs/typography/matrix-decode

Random scramble resolves left-to-right into target text

- Install: `npx shadcn@latest add @remocn/matrix-decode`
- Vibe: tech
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/matrix-decode
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MatrixDecode } from "@/components/remocn/matrix-decode";

const MatrixDecodeScene = () => (
  <MatrixDecode text="ACCESS GRANTED" revealDuration={60} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The final text the scramble resolves into |
| `charset` | `string` | `"!@#$%^&*()_+-=<>?/\\\|"` | Pool of characters used while scrambling |
| `fontSize` | `number` | `72` | Font size in pixels |
| `color` | `string` | `"#22c55e"` | Text color |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `revealDuration` | `number` | `60` | How many frames it takes for the full text to decode |
| `speed` | `number` | `1` | Multiplier for animation speed |
| `className` | `string` | — | Optional className passed to the text span |

## Use when
- A hacker, terminal, or cyberpunk aesthetic is required and the scramble-to-reveal glyph effect is on-brand.
- A short code, token, or technical label should appear as if being deciphered in real time.
- The scene needs a reveal that feels procedural and data-driven rather than designed.

## Don't use when
- The content is a human sentence or marketing copy — the glitchy scramble reads as broken text to non-technical audiences; use `typewriter` for a clean character-by-character reveal with a more legible progression.
- The tone is premium or editorial — use `focus-blur-resolve` or `blur-out-up` for atmospheric reveals without the glitch aesthetic.
- The text is long — the left-to-right lock is designed for short labels and codes; long strings extend `revealDuration` to an uncomfortable length.

---

# Micro Scale Fade
URL: https://remocn.dev/docs/typography/micro-scale-fade

A calm, tiny scale pop for subtle premium polish on labels and headings

- Install: `npx shadcn@latest add @remocn/micro-scale-fade`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/micro-scale-fade
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MicroScaleFade } from "@/components/remocn/micro-scale-fade";

const MicroScaleFadeScene = () => (
  <MicroScaleFade text="Welcome to motion." scaleFrom={0.96} />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { MicroScaleFade } from "@/components/remocn/micro-scale-fade";
import { Backdrop } from "@/components/remocn/backdrop";

const MicroScaleFadeScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <MicroScaleFade text="Welcome to motion." scaleFrom={0.96} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `scaleFrom` | `number` | `0.96` | Starting scale the text grows from as it fades in. Animates to 1. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A label, subheading, or supporting text needs an entrance that feels polished without drawing attention to itself.
- The scene already has a hero animation and supporting text should enter quietly underneath it.
- A single block of text needs to appear in a neutral, cross-tone way that works for product, SaaS, or corporate video.

## Don't use when
- The reveal should be the hero moment with visible kinetic weight — use `kinetic-center-build` or `per-character-rise` for entrances that command attention.
- Text should enter per-character or per-word rather than as a unified block — use `bottom-up-letters`, `per-character-rise`, or `per-word-crossfade` for staged reveals.
- The text needs to also exit — `micro-scale-fade` is entrance-only; use `blur-out-up` or `fade-through` when an exit arc is required.

---

# Mono Settle
URL: https://remocn.dev/docs/typography/mono-settle

Two lines set in monospace settle into proportional type, with the last words in the accent.

- Install: `npx shadcn@latest add @remocn/mono-settle`
- Vibe: clean
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/mono-settle
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MonoSettle } from "@/components/remocn/mono-settle";

const MonoSettleScene = () => (
  <MonoSettle lines={["From your editor", "to the edit."]} highlight="the edit." />
);

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

The lines rise in monospace, a wave of morphing turns each glyph into proportional type, and `highlight` takes the accent color. Pass `lines` and `highlight`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["From your editor", "to the edit."]` | Lines of text shown top to bottom |
| `highlight` | `string` | `"the edit."` | Words in the lines shown in the accent color |
| `accent` | `string` | — | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A developer-flavored message about moving from code to a finished result.
- A two-line statement where type visibly changes personality from raw to refined.

## Don't use when
- You want a plain two-line entrance - use `line-by-line-slide`.
- You want text typed out - use `typewriter`.
- You want three lines that shift voice mid-line - use `mono-voice`.

---

# Mono Voice
URL: https://remocn.dev/docs/typography/mono-voice

Stacked lines shift voice mid-line from monospace to proportional type, ending on a large accent word.

- Install: `npx shadcn@latest add @remocn/mono-voice`
- Vibe: clean
- Natural length: 84f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/mono-voice
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MonoVoice } from "@/components/remocn/mono-voice";

const MonoVoiceScene = () => (
  <MonoVoice text={"Same script.\nA whole new\ndelivery."} highlight="delivery." />
);

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

Lines rise in monospace, a sweep shifts each glyph into a proportional voice, and `highlight` grows large in the accent color. Pass `text` (newlines split lines) and `highlight`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Same script.\nA whole new\ndelivery."` | Lines separated by newlines |
| `highlight` | `string` | `"delivery."` | Final word set large in the accent color |
| `accent` | `string` | — | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A script-to-delivery message where the final word should be bigger and more expressive.
- A three-line statement whose tone changes as it is read.

## Don't use when
- You only have two lines and want a quieter morph - use `mono-settle`.
- You want plain stacked lines - use `line-by-line-slide`.
- You want text typed out - use `typewriter`.

---

# Moves Up
URL: https://remocn.dev/docs/typography/moves-up

A roadmap list under Now, Next and Later where each shipped item exits and the rest move up and grow.

- Install: `npx shadcn@latest add @remocn/moves-up`
- Vibe: clean
- Natural length: 152f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/moves-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MovesUp } from "@/components/remocn/moves-up";

const MovesUpScene = () => (
  <MovesUp
    items={["Captions", "Voiceover", "Vertical cuts", "Brand kits", "Templates"]}
    shipped="live"
  />
);

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

The first three `items` settle under the Now, Next and Later labels at descending sizes. Every item past the third then advances the queue: the current Now item gets a `shipped` tag and exits upward while the others move up and enlarge. Pass five or more `items` to see movement; timing adapts to the composition length, and 152 frames is the uncompressed length for five items. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | `DEFAULT_ITEMS` | Roadmap items in order; the first three show, the rest queue behind them. |
| `labels` | `[string, string, string]` | `["Now", "Next", "Later"]` | Three row labels, for the current, next and later rows. |
| `shipped` | `string` | `"shipped"` | Tag shown beside an item as it ships. |
| `accent` | `string` | — | Color of the Now label and the shipped tag. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A roadmap beat showing what is shipping now and what is coming next.
- A changelog or progress moment where finished items should visibly leave and the queue advances.

## Don't use when
- Items are unfinished verbs that fill in and carry dates — use `half-built`.
- You want a column of claims that dim until one is highlighted — use `what-sticks`.
- A scrolling list of changes with one enlarged entry is enough — use `changelog-scroll`.

---

# Name Gloss
URL: https://remocn.dev/docs/typography/name-gloss

Big name words rise together, split into columns, and each gets a short gloss before a closing line.

- Install: `npx shadcn@latest add @remocn/name-gloss`
- Vibe: clean
- Natural length: 135f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/name-gloss
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NameGloss } from "@/components/remocn/name-gloss";

const NameGlossScene = () => (
  <NameGloss
    parts={[
      { word: "Brand", gloss: "Your colors, your type, your logo." },
      { word: "kit", gloss: "Packed into every scene you install." },
    ]}
    why="So every film looks like yours."
  />
);

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

The name words rise in the middle as one phrase, then glide apart into columns across the top. Under each one its gloss builds word by word, and the `why` sentence resolves last in the accent color. Pass `parts` as `{ word, gloss }` pairs, usually two or three, and a closing `why`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `parts` | `{ word: string; gloss: string }[]` | `DEFAULT_PARTS` | Name words, each with the gloss shown beneath its column. |
| `why` | `string` | `DEFAULT_WHY` | Closing sentence in the accent color. |
| `accent` | `string` | — | Color of the closing sentence. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A naming beat where a two-part product or feature name is unpacked word by word.
- A short definition moment, with a one-line reason to care that closes the scene.

## Don't use when
- You are mapping familiar concepts to yours, not glossing words — use `known-terms`.
- You want a dictionary entry with senses and an example for one word — use `verbed`.
- You have three feature words with progress ticks and notes — use `feature-trio`.

---

# Ndot Resolve
URL: https://remocn.dev/docs/typography/ndot-resolve

A headline scans in as a dot-matrix face, then refreshes letter by letter into solid type.

- Install: `npx shadcn@latest add @remocn/ndot-resolve`
- Vibe: tech
- Natural length: 83f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ndot-resolve
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NdotResolve } from "@/components/remocn/ndot-resolve";

const NdotResolveScene = () => (
  <NdotResolve text="Less noise. More launch." emphasis="launch" accent="#3B5BFD" />
);

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

The headline appears row by row as dot-matrix glyphs, then a wipe converts each letter to solid type in sequence, with `emphasis` in the accent. Pass `text` and `emphasis`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Less noise. More launch."` | Headline shown as dots, then solid type |
| `emphasis` | `string` | `"launch"` | Word in the text shown in the accent color |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A tech or hardware flavored title that should look like a display refreshing to final type.
- A tagline where one emphasis word gets the accent as the text resolves.

## Don't use when
- You want a decode effect with scrambled characters - use `matrix-decode`.
- You want a glitch treatment - use `rgb-glitch-text`.
- You want a calm blur resolve - use `focus-blur-resolve`.

---

# Negation Drop
URL: https://remocn.dev/docs/typography/negation-drop

Condensed caps lines rise in, then each negation drops away and its stem word lands on a lime block.

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

## Installation

```bash
npx shadcn@latest add @remocn/negation-drop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NegationDrop } from "@/components/remocn/negation-drop";

const NegationDropScene = () => (
  <NegationDrop
    lines={["You can’t animate.", "You don’t have a team.", "It isn’t done."]}
  />
);

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

Condensed all-caps lines rise in one after another. Then, line by line, the first contraction (can't, don't, isn't) loses its negation, which falls away, and the remaining stem word lands on a highlighted block while the line closes up. Pass `lines` that each contain a can't, don't or isn't style contraction. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `DEFAULT_LINES` | Lines to set in caps; the first contraction in each line flips. |
| `accent` | `string` | — | Color of the highlight block behind the kept word. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A myth-busting beat where objections like you can't animate flip into you can.
- A punchy poster-style opener that turns three negative lines into three positive ones, one at a time.

## Don't use when
- The lines have no contractions to flip and should just stack in — use `hook-uncurl`.
- You have one denial with a sheepish reply tucked in the corner — use `coy-denial`.
- One claim should dim while another brightens rather than a word dropping out — use `less-more`.

---

# No Buts
URL: https://remocn.dev/docs/typography/no-buts

A muted objection builds in the corner and a larger reply answers it, repeating, with the last reply in accent.

- Install: `npx shadcn@latest add @remocn/no-buts`
- Vibe: playful
- Natural length: 226f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/no-buts
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NoButs } from "@/components/remocn/no-buts";

const NoButsScene = () => (
  <NoButs
    exchanges={[
      { objection: "But I am not a designer.", reply: "You do not need to be." },
      { objection: "But…", reply: "Go on. We will wait." },
    ]}
  />
);

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

Each exchange builds a muted objection word by word at the top right, then a larger reply along the bottom left; the next exchange pushes the previous one away, and the final reply turns the accent color. Pass `exchanges` as `{ objection, reply }` pairs. Timing compresses to fit the composition; 226 frames is the uncompressed length of the three defaults. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `exchanges` | `{ objection: string; reply: string }[]` | `DEFAULT_EXCHANGES` | Objection and reply pairs, played in order. |
| `accent` | `string` | — | Color of the final reply; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- An objection-handling beat where each hesitation gets a short, confident reply.
- A friendly closing exchange that ends on an inviting line like go on, we will wait.

## Don't use when
- The objection should shrink into a note and stay visible while the answer builds — use `in-proportion`.
- There is a single question and a single answer — use `answer-first`.
- The reply is a quoted line from a person rather than your voice — use `overheard`.

---

# Nonstop
URL: https://remocn.dev/docs/typography/nonstop

A labeled counter rolls down from a number to zero and resolves into a big no-stops phrase.

- Install: `npx shadcn@latest add @remocn/nonstop`
- Vibe: clean
- Natural length: 169f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/nonstop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Nonstop } from "@/components/remocn/nonstop";

const NonstopScene = () => (
  <Nonstop label="From idea to export" from={3} unit="stops" />
);

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

A label sits above a counter that rolls down from `from` to zero beside `unit`, then the line resolves into the large phrase. Pass `label`, `from` and `unit` to count your own steps. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"From idea to export"` | Small line above the counter. |
| `from` | `number` | `3` | Number the counter starts from. |
| `unit` | `string` | `"stops"` | Unit label next to the counter. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A beat about a shorter path, such as steps removed between idea and export.
- A countdown-to-zero joke where fewer stops is the selling point.
- A simple stat reveal that ends on a bold promise.

## Don't use when
- You need a time phrase leading to today — use `on-approach`.
- You want a general number animation — use `number-wheel`.
- You want a numbered rolling stat without a payoff phrase — use `rolling-number`.

---

# Not Yet
URL: https://remocn.dev/docs/typography/not-yet

Lines of what it can't do build word by word, each ending in an accent Yet., and stack upward.

- Install: `npx shadcn@latest add @remocn/not-yet`
- Vibe: clean
- Natural length: 173f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/not-yet
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NotYet } from "@/components/remocn/not-yet";

const NotYetScene = () => (
  <NotYet
    lines={["It can’t write your script.", "It can’t pick your music."]}
    word="Yet."
  />
);

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

Each line builds word by word and finishes with the accent `word` (Yet. by default). The next line then pushes in beneath it while earlier lines shrink and dim above a thin rule, so the newest line is always the largest. Pass `lines` and optionally a different `word`. Timing compresses to fit the composition; 173 frames is the uncompressed length of the three defaults. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `DEFAULT_LINES` | Lines of text; each one is followed by the accent word. |
| `word` | `string` | `"Yet."` | Accent word appended to every line. |
| `accent` | `string` | — | Accent color; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A roadmap or honesty beat that admits current limits, each one ending in a hopeful word.
- A coming-soon moment where a short list of missing features should read as a promise.

## Don't use when
- Only one line should flip from a negation to a positive — use `negation-drop`.
- Items need Summer or Later style tags and fill-in animation — use `half-built`.
- You want a now, next and later queue where items ship — use `moves-up`.

---

# Number Wheel
URL: https://remocn.dev/docs/typography/number-wheel

Odometer that rolls a number from one value to another with direction inferred from the values

- Install: `npx shadcn@latest add @remocn/number-wheel`
- Vibe: data
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/number-wheel
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NumberWheel } from "@/components/remocn/number-wheel";

const NumberWheelScene = () => (
  <NumberWheel from={0} to={24813} fontSize={120} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `number` | `0` | Starting value. Direction is inferred from whether to is greater or less than from. |
| `to` | `number` | `24813` | Target value the wheel settles on. If greater than from, counts up; if less, counts down. |
| `fontSize` | `number` | `120` | Font size in pixels |
| `color` | `string` | `"#171717"` | Text color |
| `speed` | `number` | `1` | Multiplier for animation speed |

Direction is determined by the relationship between `from` and `to` — no separate direction prop is needed. All values must be integers and non-negative.

## Count Up

Rolls upward from 0 to 24813:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { NumberWheel } from "@/components/remocn/number-wheel";

<Backdrop fill={{ type: "color", value: "#ffffff" }}>
  <NumberWheel from={0} to={24813} fontSize={120} />
</Backdrop>
```

## Count Down

Rolls downward from 24813 to 0:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { NumberWheel } from "@/components/remocn/number-wheel";

<Backdrop fill={{ type: "color", value: "#ffffff" }}>
  <NumberWheel from={24813} to={0} fontSize={120} />
</Backdrop>
```

## Use when
- A metric, stat, or count should animate to its value in a satisfying odometer roll.
- A data-driven scene needs a number to tick up (or down) to convey growth, reduction, or change.
- Dashboard-style video content requires a numeric reveal with clear direction and mechanical rhythm.

## Don't use when
- The value is not an integer — this component is designed for whole numbers; format decimals upstream before passing them in.
- The number should appear all at once without rolling — use `micro-scale-fade` for a static entrance of a pre-formatted number string.
- The scene requires text alongside the number to animate together — compose `NumberWheel` with a static text node in a flex container rather than embedding units in the `to` value.
- The value carries a prefix or suffix like `$99` or `1.2M` — use `slot-machine-roll` (accepts arbitrary strings); for very large multi-digit metrics counting up, `rolling-number` is purpose-tuned.

---

# On Approach
URL: https://remocn.dev/docs/typography/on-approach

A fixed lead phrase stays while a time phrase swaps down to the closing word today.

- Install: `npx shadcn@latest add @remocn/on-approach`
- Vibe: clean
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/on-approach
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { OnApproach } from "@/components/remocn/on-approach";

const OnApproachScene = () => (
  <OnApproach lead="Wheels up" steps={["in June.", "next week.", "tomorrow.", "today."]} interval={30} />
);

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

The `lead` phrase holds still while each entry in `steps` swaps in, counting closer to the last one. Pass `lead`, `steps` and `interval` to set the countdown. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lead` | `string` | `"Wheels up"` | Phrase that stays in place. |
| `steps` | `string[]` | — | Time phrases swapped in order. |
| `interval` | `number` | `30` | Frames between swaps. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A launch countdown beat, such as in June, next week, tomorrow, today.
- A scene where a fixed phrase meets a shrinking time horizon.
- A short reveal that ends on the launch-day word.

## Don't use when
- The cycling word should stop at several named stops — use `layover`, which plays almost the same.
- Place words should pull in with a slower hold — use `pull-in`.
- You want a counter that ticks to zero — use `nonstop`.

---

# Out of Context
URL: https://remocn.dev/docs/typography/out-of-context

A bold claim stacks line by line, then a pulled-out phrase finishes it in the accent color.

- Install: `npx shadcn@latest add @remocn/out-of-context`
- Vibe: playful
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/out-of-context
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { OutOfContext } from "@/components/remocn/out-of-context";

const OutOfContextScene = () => (
  <OutOfContext claim={"Stop making\nlaunch videos"} rest="by hand." />
);

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

The claim lines fly in, one drops out of alignment and is pulled across the frame, and the closing phrase arrives in the accent color. Pass `claim` (newlines split lines) and `rest` for the closing phrase; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `claim` | `string` | `"Stop making\nlaunch videos"` | Setup lines; newlines split rows |
| `rest` | `string` | `"by hand."` | Closing phrase shown in the accent color |
| `accent` | `string` | — | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A punchy slogan where the final phrase flips the meaning, such as Stop making launch videos by hand.
- A two-part statement with a setup claim and a short colored punchline.

## Don't use when
- The text is a single short word - use `spring-scale-in`.
- You want a calm blur entrance - use `soft-blur-in`.
- You want text to replace in place - use `strikethrough-replace`.

---

# Outline Fill Track Text
URL: https://remocn.dev/docs/typography/outline-fill-track-text

A rising lead word gives way to an outlined value that fills as one continuous track moves left

- Install: `npx shadcn@latest add @remocn/outline-fill-track-text`
- Vibe: premium
- Natural length: 80f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/outline-fill-track-text
```

## Usage

`OutlineFillTrackText` places the lead and value on one measured horizontal
track. The lead rises through a soft violet-black field, holds briefly, then
the whole track travels left. The value enters as a thin outline while a
separate filled duplicate is uncovered from left to right. Neither text layer
animates its opacity.

The track begins moving slowly as the lead settles. At frame 34 the value is
cut into view with the fill already crossing the `1`, matching the abrupt handoff
in the reference instead of exposing a stray piece of outline at the frame edge.

The default 80-frame cycle ends on the large filled value. It deliberately does
not include an exit, so the result can hold for the remainder of a scene or cut
directly into the next composition.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { OutlineFillTrackText } from "@/components/remocn/outline-fill-track-text";

const OutlineFillTrackTextScene = () => (
  <OutlineFillTrackText leadText="Keep" valueText="100%" />
);

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

### Controlling The Track

With `trackDistance={0}`, the component measures both strings and derives the
distance between their centers. `wordGap` controls the actual empty space
between their glyph boxes. A value that fits the composition stops on the
measured anchor. When it is wider than the available frame, the component adds
the exact overflow to the camera travel and leaves its trailing edge at
`endPadding` instead of stopping in the middle of the string.

Set a positive `trackDistance` to override the center-to-center distance. The
long-value overflow is still applied, so the camera continues through the final
visible glyphs. The track uses a symmetric ease-in-out curve: it accelerates
from rest, carries speed through the middle, and decelerates into the hold.

```tsx
<OutlineFillTrackText
  leadText="Save"
  valueText="42%"
  wordGap={180}
  endPadding={96}
  outlineWidth={3}
  fillDuration={38}
  glowColor="#64109a"
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `leadText` | `string` | `"Keep"` | Lead copy shown at the beginning of the track |
| `valueText` | `string` | `"1000000000%"` | Outlined value that becomes the final filled text |
| `fontSize` | `number` | `368` | Shared font size in pixels |
| `fontWeight` | `number` | `700` | Shared CSS font-weight |
| `color` | `string` | `"#f4f3f6"` | Lead and value fill color |
| `outlineColor` | `string` | `"#e6e2ed"` | Value outline color |
| `outlineWidth` | `number` | `3` | Value outline width in pixels |
| `backgroundColor` | `string` | `"#030012"` | Full-frame background color |
| `glowColor` | `string` | `"#64109a"` | Diffuse color above the entering lead word |
| `enterOffset` | `number` | `240` | Lead word starting offset below its resting position |
| `trackDistance` | `number` | `0` | Fixed horizontal travel; zero derives it from measured text |
| `anchorOffsetX` | `number` | `-84` | Shared horizontal offset for the lead and final value anchors |
| `wordGap` | `number` | `220` | Gap between lead and value when travel is measured |
| `endPadding` | `number` | `96` | Right-side padding where an overflowing value stops |
| `fillDuration` | `number` | `38` | Duration of the left-to-right fill in frames |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the full-frame root |

## Use when
- A statement should hand focus from a lead word to a large numeric value in one continuous move.
- An outlined percentage or metric should progressively gain visual weight without fading.
- A dark title beat needs a soft atmospheric entrance followed by a precise graphic fill.

## Don't use when
- The two texts should swap in place — use `value-swap` for a compact replacement.
- The value needs to count numerically — use `rolling-number` or `number-wheel`.
- The background must remain transparent because the entrance field is part of this effect.

---

# Outline Trace
URL: https://remocn.dev/docs/typography/outline-trace

Every glyph contour draws itself as a stroke, letter by letter, then the fill wipes up inside each letter and the stroke fades into it

- Install: `npx shadcn@latest add @remocn/outline-trace`
- Vibe: premium
- Natural length: 44f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/outline-trace
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { OutlineTrace } from "@/components/remocn/outline-trace";

const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#ff4d1a" }}>
    <OutlineTrace text="Outline" color="#111111" />
  </AbsoluteFill>
);

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

The letters are geometry parsed out of the font file with `opentype.js`, so the
stroke runs along the actual contours. Each letter starts `stagger` frames
after the previous one. Its outer contours draw over 18 frames; counters, such
as the hole in an a or an e, start four frames later. When the outline has
closed, the fill rises from the bottom of the letter and the stroke fades into
it, so the resting word is exactly the glyphs. `keepStroke` leaves the stroke
on top of the fill, and `fill={false}` keeps the drawn outline only.

Static instances of variable fonts, including the default Inter, keep
overlapping contours inside some letters (the bar of a t crosses its stem). A
mask hides the part of the stroke that runs inside the letter's filled shape,
so those overlaps never draw.

`fontUrl` defaults to Inter ExtraBold from Google Fonts' static CDN. Point it
at any `.ttf`, `.otf` or `.woff` file; `.woff2` is not supported. The render
is held until the font has loaded. The word centers in its parent and sizes
scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Outline"` | The text to draw |
| `fontUrl` | `string` | `Inter ExtraBold (gstatic ttf)` | URL of a .ttf, .otf or .woff file the outlines are parsed from |
| `fontSize` | `number` | `150` | Font size in reference px at 720p |
| `color` | `string` | `"#fafafa"` | Fill color |
| `strokeColor` | `string` | `same as color` | Stroke color |
| `strokeWidth` | `number` | `2.5` | Stroke width in reference px |
| `stagger` | `number` | `3` | Frames between letters |
| `fill` | `boolean` | `true` | Fill the letters after the outline draws |
| `keepStroke` | `boolean` | `false` | Keep the stroke on top of the fill |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A title should be drawn rather than revealed, like a trim path running around the real letterforms.
- You want a crafted, vector-native entrance for a brand word or a headline in any font you can point to.
- An outline-only look is wanted: set `fill` off and the drawn contours stay.

## Don't use when
- The text should look handwritten, stroke by stroke in a script face — use `handwrite`.
- The letters should fly in and deform rather than be drawn — use `stretch-in`.
- The build should show the construction points and handles of a font editor — use `glyph-anatomy`.

---

# Oval Type
URL: https://remocn.dev/docs/typography/oval-type

Words ride a row of stretchy gradient capsules, which then grow into a tall three-word poster.

- Install: `npx shadcn@latest add @remocn/oval-type`
- Vibe: playful
- Natural length: 82f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/oval-type
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { OvalType } from "@/components/remocn/oval-type";

const OvalTypeScene = () => <OvalType tagline={["Make", "it", "move"]} words={["Plan", "Cut", "Edit"]} accentWord={1} />;

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

Capsules step left along a conveyor, stretching while they travel and bouncing tall when they land, each carrying one word from `words`. Then the `tagline` words land as tall poster ovals and the gaps close. Use `accentWord` to set one tagline word in italic serif; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `tagline` | `string[]` | `["Make", "it", "move"]` | The poster row: one word per capsule, in reading order. |
| `words` | `string[]` | — | Words that ride the capsules past the frame before the tagline lands. |
| `accentWord` | `number` | `1` | Index of the tagline word set in italic serif; -1 for none. |
| `beat` | `number` | `9` | Frames between two conveyor steps. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `accent` | `string` | — | Unused; kept for API parity, the capsules use a fixed gradient. |

## Use when
- A feature rundown that cycles through verbs before landing a short three-word tagline.
- A playful poster closer where each word sits in its own glossy pill.
- A beat that needs a conveyor rhythm with squash-and-stretch before the message settles.

## Don't use when
- You only have one word to slam — use `full-bleed-type`.
- The words should cut in at a hard, fast rhythm rather than ride a conveyor — use `strobe-words`.
- The text is a full sentence that needs to read as a line — use `staggered-fade-up`.

---

# Overheard
URL: https://remocn.dev/docs/typography/overheard

A question quote, "Who made our launch video?", answered by "I did. It's in the repo."

- Install: `npx shadcn@latest add @remocn/overheard`
- Vibe: premium
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/overheard
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Overheard } from "@/components/remocn/overheard";

const OverheardScene = () => <Overheard lines={[{ quote: "Who made our launch video?", name: "Mia Okafor, CEO" }, { quote: "I did. It’s in the repo.", name: "Leo Marsh, engineer" }]} highlight="It’s in the repo." />;

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

Two voices play as dialogue: the first quote types in word by word with natural pauses, its speaker tag fades in, then the second quote answers below, ending with a highlighted phrase. Pass `lines` (quote and name pairs) and `highlight` for the phrase to color; it fits the typing pace to the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `OverheardLine[]` | `DEFAULT_LINES` | Quote and speaker name pairs, played in order. |
| `highlight` | `string` | `"It’s in the repo."` | Phrase in the last quote to color with the accent. |
| `accent` | `string` | — | Color for the highlighted phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A question-and-answer exchange between two people, such as a customer or colleague overheard.
- A social-proof beat that reads like a chat snippet with a punchline at the end.
- A dialogue of two or three short lines set in serif type.

## Don't use when
- The message is one long testimonial from one person — use `quote-hero`.
- The answer should replace the question in place — use `answer-first`.
- You want a quote that rewrites itself over time — use `changed-mind`.

---

# Overnight
URL: https://remocn.dev/docs/typography/overnight

Three timestamped story lines play as a night panel descends and a morning panel rises over an evening ground.

- Install: `npx shadcn@latest add @remocn/overnight`
- Vibe: paper
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/overnight
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Overnight } from "@/components/remocn/overnight";

const OvernightScene = () => (
  <Overnight
    evening={{ slug: "Thursday, 6:00 PM", line: "The launch was at nine the next morning." }}
    night={{ slug: "Friday, 12:50 AM", line: "The demo video was still a blank file." }}
    morning={{ slug: "Friday, 8:55 AM", line: "The demo went up before the post did." }}
  />
);

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

An evening line sits under a timestamp on a warm ground. A dark night panel then descends over it and the night line rises in, before a bright morning panel sweeps up from the bottom and the morning line lands in dark ink. Pass `evening`, `night` and `morning` as `{ slug, line }`. It ships light and dark; 150 frames is measured for a 16:9 frame at 180 frames.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `evening` | `{ slug: string; line: string }` | `DEFAULT_EVENING` | First beat: a timestamp and the line shown on the warm ground. |
| `night` | `{ slug: string; line: string }` | `DEFAULT_NIGHT` | Second beat: shown on the dark panel that descends. |
| `morning` | `{ slug: string; line: string }` | `DEFAULT_MORNING` | Third beat: shown on the bright panel that rises. |
| `accent` | `string` | — | Timestamp color and the morning panel color; overrides the theme. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A founder or customer story with a deadline that plays out across one evening, night and morning.
- A before, during and after beat where each stage deserves its own timestamp and mood.

## Don't use when
- Each story line should drift across the frame on its own — use `story-dip`.
- You only need a single timestamped line on one ground — use `crunch`.
- The text is a person quote with an attribution — use `said-who`.

---

# Parallax Lockup
URL: https://remocn.dev/docs/typography/parallax-lockup

A stacked headline scrolls into a lockup with parallax between lines, the last line in a gradient.

- Install: `npx shadcn@latest add @remocn/parallax-lockup`
- Vibe: premium
- Natural length: 98f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/parallax-lockup
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ParallaxLockup } from "@/components/remocn/parallax-lockup";

const ParallaxLockupScene = () => (
  <ParallaxLockup
    lines={["Every launch", "deserves", "a film"]}
    accentLine={2}
    accent="#3B5BFD"
  />
);

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

The lines scroll in at slightly different speeds and lock into a tightly sized stack while the accent line fills with the gradient. Pass `lines` and `accentLine` (zero-based index of the gradient line); it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["Every launch", "deserves", "a film"]` | Lines of the stack, top to bottom |
| `accentLine` | `number` | `2` | Zero-based index of the line filled with the gradient |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A multi-line brand statement that should settle into a tight typographic lockup.
- A closing title where the final line is the call to action.

## Don't use when
- The text is one short line - use `tracking-in`.
- You want lines to arrive one at a time without scroll - use `line-by-line-slide`.
- You want a per-word fade - use `staggered-fade-up`.

---

# Pass Swap
URL: https://remocn.dev/docs/typography/pass-swap

An object sweeps across the frame and each pass swaps the headline to the next line.

- Install: `npx shadcn@latest add @remocn/pass-swap`
- Vibe: clean
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/pass-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PassSwap } from "@/components/remocn/pass-swap";

const PassSwapScene = () => (
  <PassSwap lines={["Copy the code.", "Own every frame.", "Ship the film."]} shape="disc" />
);

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

A slab or disc crosses the frame, and every pass replaces the headline with the next entry in `lines`. Pass `lines`, and use `src` with a transparent PNG to sweep your own product cutout instead of the built-in shape. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Headlines in order; each pass of the object swaps to the next one. |
| `shape` | `"slab" \| "disc" \| "mixed"` | `"mixed"` | Object when no `src` is given; "mixed" alternates slab and disc per pass. |
| `src` | `string` | — | A product cutout (transparent PNG) to sweep instead of the shape. |
| `accentLastWord` | `boolean` | `true` | Fill the last word of the final line with the object gradient. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A three-line pitch where each beat is punctuated by a moving object.
- A product reveal where a cutout sweeps through the headline.
- A rhythmic launch hook with a clear final poster frame.

## Don't use when
- You want focus pulls between lines, not a moving object — use `focus-front-swap`.
- Lines should shift layout without any object — use `layout-swap`.
- Only one word should change — use `pinned-word`.

---

# Path Ride
URL: https://remocn.dev/docs/typography/path-ride

A line draws itself along a curve with the text riding behind its head, then the curve pulls taut and the text settles on a straight, centered baseline

- Install: `npx shadcn@latest add @remocn/path-ride`
- Vibe: playful
- Natural length: 70f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/path-ride
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { PathRide } from "@/components/remocn/path-ride";

const Tagline = () => (
  <AbsoluteFill style={{ backgroundColor: "#ff4d1a" }}>
    <PathRide
      text="Follow the line"
      color="#111111"
      lineColor="#fafafa"
      path="M 120 560 C 360 120 560 120 640 360 S 920 600 1160 160"
    />
  </AbsoluteFill>
);

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

The line draws along `path` over 40 frames with a dot at its head. The text
trails the head, last letter first, and every letter stands on the curve,
turned to its tangent and lifted clear of the line. Letters fade in over their
first half-em on the curve.

From frame 50 the curve pulls taut: every point of the path moves toward a
straight baseline, where arc length maps one to one onto x, so the text keeps
its spacing while the line and the letters straighten together. The line then
erases from its tail, and by frame 70 the text rests alone, centered on the
frame.

`path` is an SVG path in a 1280×720 reference frame, centered and scaled to the
composition; positions are sampled along it once. Letter widths and the
baseline are measured from the loaded font. Sizes scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Follow the line"` | The text that rides the line |
| `path` | `string` | `S-curve across the frame` | SVG path data in 1280×720 reference space. It should be longer than the text |
| `fontSize` | `number` | `44` | Font size in reference px at 720p |
| `fontWeight` | `number` | `700` | Font weight |
| `fontFamily` | `string` | `Inter` | Font family |
| `color` | `string` | `"#fafafa"` | Text color |
| `lineColor` | `string` | `"#D97757"` | Line and head dot color |
| `lineWidth` | `number` | `3` | Line width in reference px |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A tagline or a short phrase should travel across the frame before it settles, leading the eye from one side to the other.
- You want text on a path, with each letter turned to the curve, and a clean readable line at the end.
- The motion should follow a custom route: pass any SVG path in 1280×720 space.

## Don't use when
- The line should be an accent on its own, with no text riding it — use `squiggle`.
- The text should loop around a closed ring — use `ring-text`.
- The text should scroll in a straight strip — use `infinite-marquee`.

---

# Path Text
URL: https://remocn.dev/docs/typography/path-text

Text starts along a loose hand-drawn path, then straightens into a clean line with an italic tail.

- Install: `npx shadcn@latest add @remocn/path-text`
- Vibe: premium
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/path-text
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PathText } from "@/components/remocn/path-text";

const PathTextScene = () => (
  <PathText text="From rough to ready." italicWords={1} looseness={0.15} />
);

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

The text is drawn along a wobbly path, then the path flattens and thins as the letters straighten into a clean line, with the last words in italic. Pass `text`, `italicWords` and `looseness`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"From rough to ready."` | Text laid along the path |
| `italicWords` | `number` | `1` | Number of trailing words set in italic |
| `looseness` | `number` | `0.15` | How wobbly the starting path is; 0 is flat |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |
| `accent` | `string` | — | Accent color for the stroke gradient |

## Use when
- A before and after message about going from rough to refined.
- A title that should feel written by hand before resolving into clean type.

## Don't use when
- You want text typed out character by character - use `typewriter`.
- You want a signature-style draw-on - use `shimmer-sweep`.
- You want a simple clean entrance - use `staggered-fade-up`.

---

# Peek Shut
URL: https://remocn.dev/docs/typography/peek-shut

A question sits above a thin line that opens on an image sliver, snaps shut, then a refusal lands.

- Install: `npx shadcn@latest add @remocn/peek-shut`
- Vibe: clean
- Natural length: 126f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/peek-shut
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PeekShut } from "@/components/remocn/peek-shut";

const PeekShutScene = () => (
  <PeekShut
    question="Want a peek?"
    refusal="That is all you get."
    when="The rest, Monday."
    src="/product-shot.png"
  />
);

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

The question rises above a hairline that opens into a narrow slit showing a slow-panning crop of an image, then the slit snaps shut and the `refusal` and `when` lines rise below it, the last in the accent color. The default image is `hero.png` from the Remocn repo, so pass your own 16:9 screenshot through `src`. Timing compresses if the composition is shorter than about 160 frames. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `question` | `string` | `"Want a peek?"` | Line above the slit. |
| `refusal` | `string` | `"That’s all you get."` | First line below the slit, in the base ink color. |
| `when` | `string` | `"The rest, Monday."` | Second line below, in the accent color; usually a date. |
| `src` | `string` | — | Image shown through the slit; defaults to a file that only exists in the Remocn repo. |
| `focusY` | `number` | `0.5` | Vertical focus point in the image, from 0 to 1. |
| `pan` | `[number, number]` | `DEFAULT_PAN` | Horizontal focus at the start and end of the pan, each 0 to 1. |
| `zoom` | `number` | `3.2` | How much the image is magnified inside the slit. |
| `accent` | `string` | — | Color of the when line. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A teaser beat that shows a sliver of the product and then withholds the rest until launch day.
- A coming-soon moment where a cheeky refusal and a release date close the scene.

## Don't use when
- You want the full feature shown, not a glimpse — use `photo-fill-type`.
- The tease is a single quiet line with no image — use `riddle-clues`.
- A line should be cut off by a reply card instead of a shutter — use `cut-off`.

---

# Per Character Rise
URL: https://remocn.dev/docs/typography/per-character-rise

Letters slide up from below with no blur - crisp and kinetic

- Install: `npx shadcn@latest add @remocn/per-character-rise`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/per-character-rise
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PerCharacterRise } from "@/components/remocn/per-character-rise";

const PerCharacterRiseScene = () => (
  <PerCharacterRise text="One more thing." distance={32} fontSize={72} />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { PerCharacterRise } from "@/components/remocn/per-character-rise";
import { Backdrop } from "@/components/remocn/backdrop";

const PerCharacterRiseScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <PerCharacterRise text="One more thing." distance={32} fontSize={72} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `distance` | `number` | `32` | Vertical travel in pixels each character rises from. Animates to 0. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A short word or phrase needs a crisp, sharp character-by-character entrance with even, readable stagger.
- The tone is clean and precise — no blur, no dramatic staircase, just steady letters rising into position.
- A heading needs more kinetic energy than `micro-scale-fade` but less theatrical drama than `bottom-up-letters`.

## Don't use when
- You want a dramatic staircase effect where each letter visibly lags the previous — use `bottom-up-letters` for the pronounced, wide-gap stagger instead.
- The text is multiple lines and should reveal line-by-line — use `mask-reveal-up` (upward, masked) or `line-by-line-slide` (directional) for line-level reveals.
- The reveal should include blur or atmospheric softness — use `focus-blur-resolve` (blurred entrance) or `blur-out-up` (blurred exit) when sharpness is not the goal.

---

# Per-Word Crossfade
URL: https://remocn.dev/docs/typography/per-word-crossfade

One phrase fades out as the next fades in, word by word

- Install: `npx shadcn@latest add @remocn/per-word-crossfade`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/per-word-crossfade
```

## Usage

```tsx
// src/Root.tsx
import { Composition, Sequence } from "remotion";
import { PerWordCrossfade } from "@/components/remocn/per-word-crossfade";

const PerWordCrossfadeScene = () => (
  <>
    <Sequence durationInFrames={50}>
      <PerWordCrossfade fromText="Beautifully simple." toText="Designed for focus." />
    </Sequence>
    <Sequence from={50} durationInFrames={50}>
      <PerWordCrossfade fromText="Designed for focus." toText="Built for people." />
    </Sequence>
  </>
);

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

Chaining two instances in back-to-back `Sequence`s walks through a full phrase chain — the second transition reuses the first's `toText` as its `fromText`, so the text flows A → B → C. The component transitions from one phrase to another, word by word. The fromText words drift up and fade out while the toText words fade in from below, overlapping for a calm keynote-style swap.

### Chained example

This is the two-`Sequence` chain above rendered on a 100-frame timeline:

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { PerWordCrossfade } from "@/components/remocn/per-word-crossfade";
import { Backdrop } from "@/components/remocn/backdrop";

const PerWordCrossfadeScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <PerWordCrossfade
      fromText="Beautifully simple."
      toText="Designed for focus."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The outgoing phrase, shown first then exits. |
| `toText` (required) | `string` | — | The incoming phrase that fades in to replace it. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- Two short phrases need to swap with a soft, word-by-word transition that reads as calm and composed.
- A keynote-style slide replacement is needed — the sequential word drift matches presentation pacing.
- The A→B content change should feel deliberate but unhurried, with the crossfade reinforcing continuity.

## Don't use when
- The transition should be a single-block fade with no word-level staging — use `fade-through` for a unified opacity swap instead.
- You want the incoming words to build upward or slide in rather than drift-and-fade — use `line-by-line-slide` or `mask-reveal-up` for directional entrances.
- There is no outgoing text (first entrance only) — use `micro-scale-fade` or `per-character-rise` for a standalone reveal without a `fromText`.
- The phrases are spoken subtitles timed to audio — use `caption-subtitle` or another caption style, which pages a real transcript.

---

# Period Drop
URL: https://remocn.dev/docs/typography/period-drop

A word rises out of its line, then a colored dot falls from above the frame, bounces with squash and stretch, and settles as the period

- Install: `npx shadcn@latest add @remocn/period-drop`
- Vibe: playful
- Natural length: 47f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/period-drop
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { PeriodDrop } from "@/components/remocn/period-drop";

const EndCard = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <PeriodDrop text="remocn" dotColor="#ff4d1a" />
  </AbsoluteFill>
);

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

Each letter rises out of a clip at its line over 12 frames, two frames apart.
At frame 20 the dot drops from above the frame and lands at frame 32 on the
baseline right after the last letter. It bounces twice, each time leaving at
0.35 of its previous speed, and comes to rest at frame 47.

The dot stretches with its speed in flight and squashes on each impact, keeping
its area. The stretch tops out at 1.3× and the squash at 0.78×; later impacts
squash less. That is well past the 2–4% squash the motion principles suggest
for UI, on purpose: the bounce is the effect.

The dot is an inline element after the word, so it lands wherever the word
ends without measuring it. The component paints no background and centers the
word in its parent. Sizes scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"remocn"` | The word before the period |
| `fontSize` | `number` | `160` | Font size in reference px at 720p |
| `fontWeight` | `number` | `800` | Font weight |
| `fontFamily` | `string` | `Inter` | Font family |
| `color` | `string` | `"#fafafa"` | Word color |
| `dotColor` | `string` | `"#D97757"` | Color of the period |
| `dotSize` | `number` | `0.2` | Period diameter in em |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- An end card or a logo lockup should land with one physical, memorable beat.
- A brand word should finish with a colored period, as in a wordmark.
- A statement needs a full stop that the viewer actually sees arrive.

## Don't use when
- The lockup is a row of brand marks rather than a word — use `logo-enter`.
- The word should only rise out of its line, with no accent — use `mask-reveal-up`.
- The ending should be quiet, without any bounce — use `soft-blur-in`.

---

# Perspective Marquee
URL: https://remocn.dev/docs/typography/perspective-marquee

A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon

- Install: `npx shadcn@latest add @remocn/perspective-marquee`
- Vibe: premium
- Natural length: 240f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/perspective-marquee
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PerspectiveMarquee } from "@/components/remocn/perspective-marquee";

const PerspectiveMarqueeScene = () => (
  <PerspectiveMarquee
    items={["Vercel", "Linear", "Stripe", "Figma"]}
    rotateY={-28}
    pixelsPerFrame={2}
  />
);

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

### With Backdrop

Renders transparent — supply the background via `Backdrop`:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { PerspectiveMarquee } from "@/components/remocn/perspective-marquee";

<Backdrop fill={{ type: "color", value: "#050505" }}>
  <PerspectiveMarquee items={["Vercel", "Linear", "Stripe", "Figma"]} rotateY={-28} pixelsPerFrame={2} />
</Backdrop>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | `["Vercel", "Linear", "Stripe", "Figma", "Notion", "Raycast", "Arc", "Cursor"]` | Items rendered in the marquee. Repeated three times under the hood for a seamless loop. |
| `fontSize` | `number` | `84` | Font size in pixels |
| `color` | `string` | `"#fafafa"` | Text color of each item |
| `fontWeight` | `number` | `700` | CSS font-weight |
| `pixelsPerFrame` | `number` | `2` | Horizontal scroll speed in pixels per frame |
| `rotateY` | `number` | `-28` | Y-axis rotation in degrees applied to the marquee row |
| `rotateX` | `number` | `8` | X-axis rotation in degrees applied to the marquee row |
| `perspective` | `number` | `1200` | CSS perspective in pixels on the parent |
| `fadeColor` | `string` | `"#050505"` | Color used in the edge vignette gradients |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the root container |

## Use when
- A dark, cinematic background treatment is needed with text rolling into a 3D vanishing point.
- Feature names, brand words, or a tagline list should scroll with depth and atmosphere rather than flat.
- The scene calls for a premium looping background element that holds for 4–8 seconds without feeling static.

## Don't use when
- A flat, 2D looping ticker is sufficient — use `infinite-marquee` for a simpler, lighter strip with no perspective transform.
- The marquee should stop or the words should land on a specific item — both marquee components loop indefinitely; compose a `Sequence` with a static component for a hold state.
- The background is light-colored — the default `fadeColor="#050505"` creates edge fades tuned for dark scenes; adapt carefully or use `infinite-marquee` on light backgrounds.

---

# Perspective Squeeze
URL: https://remocn.dev/docs/typography/perspective-squeeze

Two lines of heavy type endlessly trade height while corner-pinned perspective bends the flat stack into receding planes

- Install: `npx shadcn@latest add @remocn/perspective-squeeze`
- Vibe: playful
- Natural length: 225f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/perspective-squeeze
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PerspectiveSqueeze } from "@/components/remocn/perspective-squeeze";

const PerspectiveSqueezeScene = () => (
  <PerspectiveSqueeze
    upperText="REMOCN"
    lowerText="BEST"
    upperFontFamily="Impact, 'Arial Narrow', sans-serif"
    lowerFontFamily="Impact, 'Arial Narrow', sans-serif"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="PerspectiveSqueeze"
    component={PerspectiveSqueezeScene}
    durationInFrames={225}
    fps={30}
    width={1920}
    height={1080}
  />
);
```

Both lines are forced to exactly the block's width via SVG `textLength`, so any
pair of words lines up flush. The vertical squeeze scales each line about its
own baseline, and the layout re-derives from the scaled heights every frame —
the gap between the lines never changes. The perspective is a true projective
corner-pin (`matrix3d`), interpolated on the corners, so straight lines stay
straight while parallels converge.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `upperText / lowerText` | `string` | `"REMOCN" / "BEST"` | The two lines. Both are stretched to the block's full width |
| `upperFontFamily / lowerFontFamily` | `string` | `"sans-serif"` | Font of each line — heavy condensed faces read best |
| `upperFontSize / lowerFontSize` | `number` | `603 / 124` | Font size of each line in block pixels |
| `fill` | `string` | `"#ffffff"` | Fill color of the type |
| `width / height` | `number` | `1920 / 1080` | Design space all positions are authored in. The stage scales to fit the actual composition, centered |
| `blockWidth / blockHeight` | `number` | `990 / 546` | Size of the cropped block the corner pin acts on — cropping before pinning keeps the corners near the artwork |
| `upperBlockPosition / lowerBlockPosition` | `[number, number]` | `[960, 314] / [960, 860]` | Center of each pinned copy in comp pixels |
| `cornerKeyframes` | `number[]` | `[0, 45, 70]` | Frames at which the corner poses land |
| `upperCornersMid / upperCornersEnd` | `Corners` | `tutorial poses` | Corner poses of the upper copy, as four `[x, y]` points in block space |
| `lowerCornersMid / lowerCornersEnd` | `Corners` | `tutorial poses` | Corner poses of the lower copy |
| `cornersRest` | `Corners` | `the block's own rectangle` | Identity pose every departure is measured from |
| `scaleKeyframes` | `number[]` | `[0, 60, 118, 161, 196, 225]` | Frames of the squish track. The last keyframe repeats the first, closing the loop |
| `upperScaleY / lowerScaleY` | `number[]` | `tutorial tracks` | Vertical scale percentages at each keyframe — the lines trade height in opposition |
| `capRatio` | `number` | `0.65` | Cap height as a fraction of em, used to stack the two lines |
| `lineGap` | `number` | `50` | Constant gap between the lines in block pixels |
| `className` | `string` | — | Optional className passed to the wrapper |

Inspired by [5 Clean Text Animations](https://www.youtube.com/watch?v=Nmi7cE2wT54) by Mapal.

## Use when
- A looping hold — an outro, a background title, a stream screen — needs constant, hypnotic typographic motion (the 225-frame track ends where it starts).
- You want an editorial poster feel: heavy condensed type crushed and stretched like a print layout come alive.
- Two short words can share the frame — the two lines are forced to the same width, so pairs like a brand name and a tagline work best.

## Don't use when
- You need an entrance or a reveal — this is a sustained loop, the type is fully visible from frame 0; use `kinetic-warp` for a punchy display moment.
- The copy must stay easily readable throughout — lines spend most of the loop crushed to a third of their height.
- You only need the vertical stretch without the perspective bend — drop-in alternatives like `per-character-rise` keep the type flat.

---

# Photo Caret
URL: https://remocn.dev/docs/typography/photo-caret

A multi-line headline types word by word with a hopping caret while product photos float around it.

- Install: `npx shadcn@latest add @remocn/photo-caret`
- Vibe: premium
- Natural length: 91f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/photo-caret
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhotoCaret } from "@/components/remocn/photo-caret";

const PhotoCaretScene = () => (
  <PhotoCaret
    text="Your launch, / your name / on it."
    accentWord="it."
    src={staticFile("shots/hero.jpg")}
    images={[staticFile("shots/one.jpg"), staticFile("shots/two.jpg")]}
  />
);

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

A caret hops from word to word as the headline types, with an image tile and floating photos popping in around it, and the accent word lands last. Pass `text` (use ' / ' for line breaks), `accentWord`, and your own `src` and `images` since the default photos only exist in the Remocn repo; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Your launch, / your name / on it."` | Headline; ' / ' marks line breaks |
| `accentWord` | `string` | `"it."` | Word shown in the accent color; defaults to the last |
| `src` | `string` | — | Main image tile next to the text; pass your own |
| `images` | `string[]` | — | Floating photo URLs around the text; pass your own |
| `accent` | `string` | — | Color of the accent word and caret |
| `ink` | `string` | — | Text color override |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `ground` | `GshPresetId` | — | Gradient ground preset id |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters to tune the ground |
| `firstStep` | `number` | `12` | Frames before the second word; later steps speed up |

## Use when
- A brand statement that should be written live with photos orbiting the text.
- A personal or lifestyle launch beat where imagery supports the line.

## Don't use when
- You have no photos to place around the text - use `cooling-type`.
- You want a plain typed line - use `typewriter`.
- You want the photos to be the focus - use `cover-ring`.

---

# Photo Fill Type
URL: https://remocn.dev/docs/typography/photo-fill-type

A word cut out of the stage opens onto a photo that fills the frame, followed by a caption.

- Install: `npx shadcn@latest add @remocn/photo-fill-type`
- Vibe: premium
- Natural length: 136f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/photo-fill-type
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhotoFillType } from "@/components/remocn/photo-fill-type";

const PhotoFillTypeScene = () => (
  <PhotoFillType title="Dusk" caption="Not a photograph. Every pixel is code." src={staticFile("shots/dusk.jpg")} />
);

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

The word sits as a cutout with the image visible through its letters, then expands until the image fills the frame and a caption fades in. Pass `title` and `caption`, and `src` with your own image to replace the built-in generated landscape; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Dusk"` | Word cut out of the stage; shows the image inside |
| `caption` | `string` | `"Not a photograph. Every pixel is code."` | Line that fades in after the image fills the frame |
| `src` | `string` | — | Image shown through the word; defaults to a generated landscape |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A bold one-word title that should open into an image, such as a landscape or product shot.
- An opener where the image fills the type first and then takes over the frame.

## Don't use when
- You have no image and want text only - use `tracking-in`.
- You want a masked text entrance without a photo - use `mask-reveal-up`.
- You want photos around the text - use `photo-caret`.

---

# Phrase List Bridge
URL: https://remocn.dev/docs/typography/phrase-list-bridge

A phrase splits as a floating list deals in, a highlight picks one row, and it closes back in.

- Install: `npx shadcn@latest add @remocn/phrase-list-bridge`
- Vibe: clean
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/phrase-list-bridge
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhraseListBridge } from "@/components/remocn/phrase-list-bridge";

const PhraseListBridgeScene = () => (
  <PhraseListBridge
    left="Pick from"
    right="ready-made scenes"
    items={["Hero intro", "Feature tour", "Pricing beat", "Closing card"]}
    pickedIndex={1}
  />
);

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

The `left` and `right` phrases appear as one line, then split apart as a floating panel deals in your `items` between them. A highlight steps down to the row at `pickedIndex`, which turns accent-colored with a check while the other rows fall away, and the panel closes into a chip that bridges the two phrases. Pass `left`, `right`, up to eight `items`, and `pickedIndex`; the default items are Remocn component names. It ships light and dark, each over a gradient ground.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `left` | `string` | `"Browse through"` | Text on the left of the final line. |
| `right` | `string` | `"ready-made scenes"` | Text on the right of the final line. |
| `items` | `string[]` | — | List rows shown in the panel; only the first eight are used. |
| `pickedIndex` | `number` | `2` | Zero-based index of the row that gets picked. |
| `accent` | `string` | — | Color of the picked row and the final chip. |
| `ink` | `string` | — | Text color; overrides the theme ink. |
| `background` | `string` | — | Base background color behind the gradient ground. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `ground` | `GshPresetId` | — | Gradient shader preset id for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the gradient shader parameters. |

## Use when
- A beat that shows many options and then lands on one, such as browsing scenes and choosing a favorite.
- A sentence whose middle word should be filled by a picked item from a short list.

## Don't use when
- You only want a pill to expand inside a sentence, with no list — use `inline-pill-takeover`.
- A video tile should slot into a gap in the sentence — use `word-gap-media`.
- You want rows of feature chips that cluster around a logo — use `feature-chips-flow`.

---

# Pinned Word
URL: https://remocn.dev/docs/typography/pinned-word

A serif italic word stays pinned in a sentence while the words around it change.

- Install: `npx shadcn@latest add @remocn/pinned-word`
- Vibe: premium
- Natural length: 108f @ 30fps

## Installation

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

## Usage

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

const PinnedWordScene = () => (
  <PinnedWord lines={["Ship a video tonight.", "Own every video frame."]} word="video" hold={36} />
);

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

The `word` stays fixed in italic serif while the lines around it swap in turn. Pass `lines` that each contain `word` and set `hold` for pacing. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Sentences in order, each containing the pinned word. |
| `word` | `string` | `"video"` | Word kept fixed in italic serif. |
| `hold` | `number` | `36` | Frames each state stays on screen before the next one. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A message where one keyword stays constant across several claims.
- A tagline family such as ship, write, own the same thing.
- A short sequence that anchors attention on the product word.

## Don't use when
- The fixed part is a phrase and the changing part is a short list — use `width-lock`.
- Each line should reshuffle its layout — use `layout-swap`.
- You want the word inserted into a sentence — use `word-insert`.

---

# Pitch Blanks
URL: https://remocn.dev/docs/typography/pitch-blanks

A one-line pitch shows underlined blanks with small labels, then each blank fills in with its word.

- Install: `npx shadcn@latest add @remocn/pitch-blanks`
- Vibe: paper
- Natural length: 141f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/pitch-blanks
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PitchBlanks } from "@/components/remocn/pitch-blanks";

const PitchBlanksScene = () => (
  <PitchBlanks
    line="{Acme} is a {motion toolkit} for {small teams}."
    labels={["product", "category", "audience"]}
  />
);

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

The sentence appears with each braced phrase in `line` shown as an empty underline carrying a small caps label from `labels`. The blanks then fill in one by one: the underline stretches to fit, the word rises in, and the underline and label turn the accent color. Wrap phrases in curly braces and give `labels` one entry per blank; timing stretches to fit the composition, and 141 frames assumes three blanks in 170. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `line` | `string` | `"{remocn} is a {launch-film kit} for {teams of one}."` | Sentence with each blank wrapped in curly braces. |
| `labels` | `string[]` | `["product", "category", "audience"]` | Small caps labels, one per blank, in order. |
| `accent` | `string` | — | Accent color; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A positioning beat that frames the pitch as a fill-in-the-blank: product, category, audience.
- An explainer moment where each key phrase needs a small label saying what role it plays.

## Don't use when
- You want one word edited inside a sentence, not several blanks — use `word-insert`.
- A single phrase should be emphasized with a marker stroke — use `marker-highlight`.
- The sentence needs no labels and should just build in — use `serif-rise`.

---

# Plain License
URL: https://remocn.dev/docs/typography/plain-license

Dense legal clauses are replaced one by one by short plain-language phrases that build into a big line.

- Install: `npx shadcn@latest add @remocn/plain-license`
- Vibe: clean
- Natural length: 184f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/plain-license
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PlainLicense } from "@/components/remocn/plain-license";

const PlainLicenseScene = () => (
  <PlainLicense
    clauses={[
      { legal: "Permission is hereby granted, free of charge,", plain: "Free," },
      { legal: "to any person obtaining a copy of this software,", plain: "for anyone," },
      { legal: "to use, copy, modify, merge, publish and distribute it.", plain: "for anything." },
    ]}
  />
);

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

Each clause starts as dim legal text, then is swapped by its short plain phrase, which rises in the accent color and cools to ink when the next one takes over. At the end the plain phrases zoom into one big line, with the `highlight` clause keeping the accent. Pass `clauses` as `{ legal, plain }` pairs. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `clauses` | `{ legal: string; plain: string }[]` | `DEFAULT_CLAUSES` | Legal text and its plain-language replacement, in reading order. |
| `highlight` | `number` | `0` | Zero-based index of the clause whose plain phrase keeps the accent color. |
| `step` | `number` | `40` | Frames between one clause swapping and the next; minimum 34. |
| `accent` | `string` | — | Color of the plain phrases; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A trust beat that translates a license or terms into a few plain words, such as free, for anyone, for anything.
- A pricing or policy moment where fine print should visibly collapse into the simple promise.

## Don't use when
- You want tiny fine print under a big claim instead of a translation — use `fine-print-up`.
- The line is a single bold statement with no legal text — use `embargo-lift`.
- You want a TL;DR sitting on top of a long body — use `tldr-on-top`.

---

# Point Expand
URL: https://remocn.dev/docs/typography/point-expand

Short statements rise word by word ending in a round point that pulses and expands into the next scene.

- Install: `npx shadcn@latest add @remocn/point-expand`
- Vibe: clean
- Natural length: 146f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/point-expand
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PointExpand } from "@/components/remocn/point-expand";

const PointExpandScene = () => (
  <PointExpand
    statements={["Launch films used to take weeks.", "Now they take an afternoon.", "Copy, paste, render."]}
    accent="#3B5BFD"
  />
);

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

Each statement rises word by word and ends in a round point that drops in, pulses `pulses` times, and then expands as a circle that becomes the next scene's ground, alternating a plain stage with an accent gradient. Pass up to five `statements` (trailing periods are replaced by the point) and an `accent`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `statements` | `string[]` | — | Up to five statements; each ends in an expanding point. |
| `pulses` | `number` | `2` | How many times the point pulses before it expands. |
| `accent` | `string` | `"#3B5BFD"` | Color of the points and the gradient scenes. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A run of two to five punchy claims, each building on the last, with a bold accent change between them.
- A launch opener where every full stop should become the transition to the next line.

## Don't use when
- The statements should arrive in a list with progress ticks and notes — use `feature-trio`.
- You need a single headline with a colored point after it, not a chain — use `point-intro`.
- Plain stacked lines with no scene changes are enough — use `line-by-line-slide`.

---

# Point Intro
URL: https://remocn.dev/docs/typography/point-intro

A headline is written word by word and a colored point lands after it: 'Introducing Remocn 2.0.'

- Install: `npx shadcn@latest add @remocn/point-intro`
- Vibe: paper
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/point-intro
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PointIntro } from "@/components/remocn/point-intro";

const PointIntroScene = () => <PointIntro title="Introducing Acme 2.0" accent="#3B5BFD" />;

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

A colored point appears alone, breathes, then glides to the end of the line while the headline is written word by word and the point settles as its full stop. A grey subline fades in last. Pass `title` and `subline` for your own announcement; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Introducing remocn 2.0"` | The headline, written out word by word. The point lands after it. |
| `subline` | `string` | `"Animated components for Remotion. Free and open source."` | Small grey line under the headline. |
| `accent` | `string` | `"#3B5BFD"` | Colour of the point. |
| `theme` | `"dark" \| "light"` | `"light"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A product announcement opener where one confident headline is written out and a colored point lands as the full stop.
- A release beat that wants a calm, paper-like feel with a small grey subline under the title.

## Don't use when
- You need several headlines swapping in sequence — use `rewrite-bars`.
- The headline should snap in with energy rather than being written calmly — use `staggered-fade-up`.

---

# Post Script
URL: https://remocn.dev/docs/typography/post-script

A signoff and signature rise, then shrink away as a P.S. line grows and an install command wipes in.

- Install: `npx shadcn@latest add @remocn/post-script`
- Vibe: playful
- Natural length: 115f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/post-script
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PostScript } from "@/components/remocn/post-script";

const PostScriptScene = () => (
  <PostScript
    signoff="Thanks for watching."
    signature="— the Acme team"
    ps="Your next launch film is a prop away."
    install="npx shadcn add @acme/launch-film"
  />
);

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

The `signoff` rises word by word with the `signature` beneath it. A P.S. line (`label` in the accent color, then `ps`) follows, the signoff shrinks and dims upward as the P.S. grows to full size, and the `install` command wipes in at the bottom. The defaults mention Remocn, so pass your own `signature` and `install`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `signoff` | `string` | `"Thanks for watching."` | Large first line that rises in and later shrinks. |
| `signature` | `string` | `"— the remocn team"` | Small line under the signoff; pass an empty string to hide it. |
| `label` | `string` | `"P.S."` | Accent-colored prefix of the P.S. line. |
| `ps` | `string` | `"The next launch film is yours."` | Text of the P.S. line after the label. |
| `install` | `string` | `"npx shadcn add @remocn/zoom-blur"` | Command or link that wipes in at the bottom; empty hides it. |
| `accent` | `string` | — | Color of the label and the install line. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A closing card that thanks the viewer and then drops a final call to action as a P.S.
- An end slate where the last line should be the install command or link.

## Don't use when
- You only need a logo and a short tagline to close — use `blink-cut`.
- The ending should be a big gradient title rather than a letter-style sign-off — use `landing-confirmed`.
- You want a quote-style close with an attribution — use `said-who`.

---

# Poster Crop
URL: https://remocn.dev/docs/typography/poster-crop

A poster headline crops in tight, line by line, over a ruled blue ground

- Install: `npx shadcn@latest add @remocn/poster-crop`
- Vibe: premium
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/poster-crop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PosterCrop } from "@/components/remocn/poster-crop";

const PosterCropScene = () => (
  <PosterCrop title={"Ship the film,\nnot the deck."} kicker="Acme 3.0" meta="Oct 24, 2026" />
);

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

The camera pulls out from a tight crop of the headline, line by line, while ruled grid lines and corner labels (kicker, date, note) fade in. Pass `title` (use `\n` for line breaks), `kicker`, `meta`, `note` and your own `logo`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Launch films,\nas code."` | Headline; use \n for line breaks. |
| `kicker` | `string` | `"remocn 3.0"` | Small label above the headline. |
| `meta` | `string` | `"Oct 24, 2026"` | Date or secondary label in the corner. |
| `note` | `string` | `"Production-ready motion for launch videos. Install a component, drop in your words, render."` | Short paragraph beneath the headline. |
| `logo` | `React.ReactNode` | — | Custom logo node shown in place of the built-in mark. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A launch poster beat where a big headline crops in tight over a ruled ground with a kicker and date.
- An announcement card for a release date, with a short note and your logo in the corner.

## Don't use when
- You only need a single plain headline with no poster furniture — use `scan-reveal`.
- The moment is a quick punchy statement, not a layout — use `two-hit`.

---

# Prompt Restyle
URL: https://remocn.dev/docs/typography/prompt-restyle

A headline is restyled by prompt instructions, ending in a serif italic gradient 'you own'

- Install: `npx shadcn@latest add @remocn/prompt-restyle`
- Vibe: premium
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/prompt-restyle
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PromptRestyle } from "@/components/remocn/prompt-restyle";

const PromptRestyleScene = () => (
  <PromptRestyle headline="Launch videos from parts you own." highlight="you own" />
);

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

Small instruction lines are typed one after another, and after each the headline changes size, tracking and style, ending with the highlight phrase in a serif italic gradient. Pass `headline`, `highlight` and your own `instructions` (up to three); it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | `"Launch videos from parts you own."` | The headline that gets restyled. |
| `highlight` | `string` | `"you own"` | Phrase set in serif italic gradient at the end. |
| `instructions` | `string[]` | — | Instruction lines typed in order; the last styles the highlight. |
| `accent` | `string` | `"#3B5BFD"` | 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 beat showing how an AI prompt reshapes copy: typed instructions that make a headline bigger, tighter and styled.
- A product video for a design or editing tool where the headline visibly responds to commands.

## Don't use when
- You want a plain typed headline without the instruction chrome — use `typewriter`.
- The headline should simply swap words, not be restyled — use `strikethrough-replace`.

---

# Pull in
URL: https://remocn.dev/docs/typography/pull-in

A fixed lead phrase stays while spaced-out place words pull into view one after another.

- Install: `npx shadcn@latest add @remocn/pull-in`
- Vibe: clean
- Natural length: 183f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/pull-in
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PullIn } from "@/components/remocn/pull-in";

const PullInScene = () => (
  <PullIn lead="Now in" places={["vertical.", "4K.", "your codebase."]} hold={24} />
);

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

The `lead` phrase holds while each entry in `places` pulls into view from a wide spread and then departs for the next. Pass `lead` and `places`, and tune `hold` for pace. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lead` | `string` | `"Now in"` | Phrase that stays in place. |
| `places` | `string[]` | `["vertical.", "4K.", "your codebase."]` | Words pulled into view in order. |
| `hold` | `number` | `24` | Frames each state stays on screen before the next one. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A platform-coverage beat, such as now in vertical, 4K and your codebase.
- A where-it-works list that should feel like arrivals.
- A short supporting line under a hero that names several targets.

## Don't use when
- You want a time-based countdown — use `on-approach`, which plays almost the same way.
- The slot should stay a fixed width — use `width-lock`.
- A word cycles through stops to a final word — use `layover`.

---

# Pulse Line
URL: https://remocn.dev/docs/typography/pulse-line

A heartbeat-style pulse runs through 'Every frame has a pulse.' with the last word in teal

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

## Installation

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

## Usage

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

const PulseLineScene = () => (
  <PulseLine text="Every frame has a pulse." highlight="a pulse." beats={2} />
);

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

A heartbeat pulse travels through the headline glyphs and lights the highlight phrase in an aurora gradient, then the caption fades in. Pass `text`, `highlight`, `caption` and `beats` (1 to 4 pulses); it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Every frame has a pulse."` | The headline the pulse runs through. |
| `highlight` | `string` | `"a pulse."` | Trailing phrase tinted with the aurora gradient. |
| `caption` | `string` | `"Motion components for Remotion. Copy one in, own every frame."` | Small line under the headline; empty to hide. |
| `beats` | `number` | `2` | Number of pulses, from 1 to 4. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A product beat about speed or liveness where a heartbeat pulse runs through the headline.
- A tagline scene that needs a glowing one-line statement with a short caption below.

## Don't use when
- You want a calm sweep of light across the text — use `shimmer-sweep`.
- The line should be written out rather than pulsed — use `typewriter`.

---

# Quote Hero
URL: https://remocn.dev/docs/typography/quote-hero

A big pull quote with an underlined italic phrase and a named founder attribution

- Install: `npx shadcn@latest add @remocn/quote-hero`
- Vibe: premium
- Natural length: 246f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/quote-hero
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { QuoteHero } from "@/components/remocn/quote-hero";

const QuoteHeroScene = () => <QuoteHero quoteDuration={120} quotes={[{ quote: "We shipped our launch video in an afternoon.", highlight: "in an afternoon", name: "Maya Chen", role: "Head of Design", company: "Kitebase" }]} />;

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

A big serif pull quote rises line by line beside an oversized opening mark, then the author row settles in and a marker sweeps behind the highlighted phrase before the quote exits and the next one plays. Pass `quotes` (quote, highlight, name, role, company, optional avatar) and `quoteDuration`; the total length is 6 plus quotes times `quoteDuration`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `quotes` | `Quote[]` | `DEFAULT_QUOTES` | Testimonials, each with quote, highlight, name, role, company and avatar. |
| `quoteDuration` | `number` | `120` | Frames each quote owns, including its exit. |
| `accent` | `string` | `"#3B5BFD"` | Color of the highlighter sweep behind the key phrase. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A customer testimonial in a launch or case-study video, with the key phrase marked.
- A rotation of two or three short quotes from different people, each with a name and role.
- A trust beat near the end of a product video, before the call to action.

## Don't use when
- The quote is a joke with a punchline attribution — use `deadpan-box`.
- You want a social post card style testimonial — use `testimonial-stack`.
- The quote should change in place between versions — use `changed-mind`.

---

# Rep Stack
URL: https://remocn.dev/docs/typography/rep-stack

A caps word scrolls past a gate as a reel of outlined copies, then locks as a cutout.

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

## Installation

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

## Usage

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

const RepStackScene = () => <RepStack word="AGAIN." reps={6} accent="#3B5BFD" />;

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

A reel of outlined copies of the word runs upward through a cap-height gate, braking, and the last copy settles into it as a cutout of the dusk band. The echoes above and below dim back. Pass `word` (one short word, trailing punctuation takes the accent) and `reps` for the number of copies; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"AGAIN."` | One short word, set in caps. Trailing punctuation takes the accent. |
| `reps` | `number` | `6` | How many rows run through the gate before the last one locks. |
| `accent` | `string` | `"#3B5BFD"` | Color of the trailing punctuation. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A one-word statement about repetition or iteration, like AGAIN. or REPEAT.
- A bold typographic beat where letters read as cutouts of a dusk-colored band.
- A closing word with trailing punctuation that should pick up the accent color.

## Don't use when
- You have several different words, not one repeated word — use `word-stack`.
- You want a focused line with outlined copies that keep drifting above and below — use `echo-stack`.
- The word needs to arrive with an impact slam and shake — use `round-slam`.

---

# Rewrite Bars
URL: https://remocn.dev/docs/typography/rewrite-bars

Bars sweep over a headline to rewrite it, 'Your launch video, rendered from code.'

- Install: `npx shadcn@latest add @remocn/rewrite-bars`
- Vibe: premium
- Natural length: 161f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rewrite-bars
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RewriteBars } from "@/components/remocn/rewrite-bars";

const RewriteBarsScene = () => (
  <RewriteBars headlines={["Scenes you copy.", "Captions that follow the voice.", "Rendered from code."]} highlight="rendered from code" />
);

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

Bars sweep over the current headline, collapse, and reflow it into the next one, with a small eyebrow label above each. Pass `headlines`, `eyebrows` and the `highlight` phrase; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headlines` | `string[]` | — | Headlines in order; bars rewrite each into the next. |
| `eyebrows` | `string[]` | — | Small label above each headline. |
| `highlight` | `string` | `"rendered from code"` | Phrase tinted with the accent colour. |
| `align` | `"center" \| "left"` | `"center"` | Text alignment of the headline block. |
| `hold` | `number` | `20` | Frames the text holds before the next beat. |
| `accent` | `string` | `"#3B5BFD"` | 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 feature walkthrough where one headline is rewritten into the next as bars sweep across it.
- A launch beat that cycles three claims, each with a small numbered eyebrow.

## Don't use when
- You only have one line and no rewrite is needed — use `scan-reveal`.
- You want the words swapped by fading rather than bars — use `per-word-crossfade`.

---

# RGB Glitch Text
URL: https://remocn.dev/docs/typography/rgb-glitch-text

Three RGB-offset text copies jitter for a few frames to create a chromatic aberration glitch

- Install: `npx shadcn@latest add @remocn/rgb-glitch-text`
- Vibe: tech
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rgb-glitch-text
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RGBGlitchText } from "@/components/remocn/rgb-glitch-text";

const RGBGlitchTextScene = () => (
  <RGBGlitchText text="SYSTEM" glitchAt={20} glitchDuration={8} intensity={6} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to display and glitch |
| `fontSize` | `number` | `96` | Font size in pixels |
| `color` | `string` | `"#171717"` | Base text color (visible at all times) |
| `fontWeight` | `number` | `700` | CSS font-weight |
| `glitchAt` | `number` | `20` | Frame at which the glitch starts |
| `glitchDuration` | `number` | `8` | Duration of the glitch window in frames |
| `intensity` | `number` | `6` | Maximum offset (in pixels) for the RGB copies |
| `seed` | `string` | `"glitch"` | Seed used by `random()` so the jitter stays deterministic |
| `speed` | `number` | `1` | Playback speed multiplier (1 = normal, 2 = twice as fast) |
| `className` | `string` | — | Optional className passed to the inline-block wrapper |

## Use when
- A tech, hacker, or cyberpunk scene needs a moment of digital corruption on a title.
- You want a deterministic glitch that renders identically every time (use `seed` to vary it per clip).
- The entrance is already complete and you want a brief mid-scene disruption rather than a full reveal animation.

## Don't use when
- You need a full text entrance animation — the glitch is a momentary effect, not a reveal; use `tracking-in` or `soft-blur-in` to bring text in.
- The brand aesthetic is clean or premium — RGB splits read as intentionally broken; use `shimmer-sweep` for a high-end shimmer moment instead.
- The text is long — offset copies of a full paragraph are illegible during the glitch window; keep it to a short word or phrase.
- The whole frame should break at a scene change rather than a headline mid-scene — use `glitch-cut`.

---

# Riddle Clues
URL: https://remocn.dev/docs/typography/riddle-clues

A numbered clue sets up a line, an accent twist completes it, and the clues repeat before a closing reveal.

- Install: `npx shadcn@latest add @remocn/riddle-clues`
- Vibe: playful
- Natural length: 214f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/riddle-clues
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RiddleClues } from "@/components/remocn/riddle-clues";

const RiddleCluesScene = () => (
  <RiddleClues
    clues={[
      { line: "It has scenes,", turn: "but no camera." },
      { line: "It has a timeline,", turn: "but no editor." },
    ]}
    closer={{ line: "Give up?", turn: "Answer on the 14th." }}
  />
);

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

Each clue shows a small numbered label and a `line` in white; a beat later its `turn` rises in the accent color beside or below it, then the clue lifts out and the next arrives. The `closer` is the last frame and stays on screen. Pass `clues` and `closer` as `{ line, turn }` pairs. Timing compresses if the composition is shorter than the 214 frames plus a short hold. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `clues` | `{ line: string; turn: string }[]` | `DEFAULT_CLUES` | Riddle clues played in order, each a setup line and an accent twist. |
| `closer` | `{ line: string; turn: string }` | `DEFAULT_CLOSER` | Final reveal frame that stays on screen after the clues. |
| `label` | `string` | `"Clue"` | Word used in the small numbered label above each clue. |
| `accent` | `string` | — | Color of the twist lines; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A teaser campaign beat that hints at the product through a few what it has but what it lacks riddles.
- A countdown-style moment where the last line gives the reveal date.

## Don't use when
- You want a single hesitant line answered by a reply — use `no-buts`.
- The tease should reveal a sliver of the real product image — use `peek-shut`.
- There is one quiet line and no riddle structure — use `coy-denial`.

---

# Ring Text
URL: https://remocn.dev/docs/typography/ring-text

Text runs around a tilted 3D band that spins, reading on the near side and mirrored on the far side

- Install: `npx shadcn@latest add @remocn/ring-text`
- Vibe: playful
- Natural length: sustained

## Installation

```bash
npx shadcn@latest add @remocn/ring-text
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { RingText } from "@/components/remocn/ring-text";

const Ring = () => (
  <AbsoluteFill style={{ backgroundColor: "#d4ff1f" }}>
    <RingText text="Type in motion" color="#d4ff1f" band="#0a0a0a" />
  </AbsoluteFill>
);

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

Every character sits on its own panel, placed around the ring with
`rotateY(θ) translateZ(radius)`, and the panel background forms the band. The
text and separator repeat as many times as fit the circumference, and the
remainder is spread as letter spacing so the band closes without a gap. A
phrase longer than one lap grows the radius instead.

The ring is viewed from above: the near side reads left to right, and the far
side shows the letters mirrored and dimmed. It turns once every `period`
frames, and its tilt sways by six degrees. It arrives scaled down, spinning
fast, and settles into its cruise speed by frame 30.

The ring is centered in its parent; place it with a wrapper. Sizes scale with
`height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Type in motion"` | The phrase around the ring |
| `separator` | `string` | `"•"` | Glyph between repeats. An empty string leaves a space |
| `radius` | `number` | `210` | Ring radius in reference px. Long text grows it |
| `fontSize` | `number` | `40` | Font size in reference px. The band is 1.5em tall |
| `fontWeight` | `number` | `800` | Font weight |
| `fontFamily` | `string` | `Inter` | Font family |
| `color` | `string` | `"#fafafa"` | Letter color |
| `band` | `string` | `"#0a0a0a"` | Band color |
| `tilt` | `number` | `38` | Degrees the ring leans toward the camera |
| `roll` | `number` | `-16` | Degrees the ring is rotated in the frame |
| `period` | `number` | `240` | Frames for one full turn |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A headline needs a dimensional object next to it, and the object itself should carry a short phrase.
- A tagline, a feature name or a slogan should loop continuously in a compact spot.
- You want a badge-like accent that reads as 3D without any 3D library or assets.

## Don't use when
- The phrase should scroll flat across the frame — use `infinite-marquee`.
- The text should pop out of the plane as a solid extruded word — use `extrude-pop`.
- The motion should be ribbons bursting outward rather than a steady ring — use `radial-burst`.

---

# Rolling Number
URL: https://remocn.dev/docs/typography/rolling-number

Odometer where every place rolls at its own speed, new places rising into view, settling exactly on the target value

- Install: `npx shadcn@latest add @remocn/rolling-number`
- Vibe: data
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rolling-number
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RollingNumber } from "@/components/remocn/rolling-number";

const RollingNumberScene = () => (
  <RollingNumber from={0} to={24813} fontSize={120} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `number` | `0` | Starting value. Direction is inferred from whether to is greater or less than from. |
| `to` | `number` | `24813` | Target value the number settles on, landing pixel-exact on every place. |
| `fontSize` | `number` | `120` | Font size in pixels |
| `color` | `string` | `"#171717"` | Text color |
| `speed` | `number` | `1` | Multiplier for animation speed |

Every place rolls at once, each travelling roughly ten times as far as the place to its left, so the ones spin fastest and the highest place barely turns. As the number grows past each power of ten, the new leading place rises gently into view rather than popping in, and the whole number settles pixel-exact on the target. All values must be integers and non-negative.

## Count Up

Rolls upward from 0 to 24813:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { RollingNumber } from "@/components/remocn/rolling-number";

<Backdrop fill={{ type: "color", value: "#ffffff" }}>
  <RollingNumber from={0} to={24813} fontSize={120} />
</Backdrop>
```

## Count Down

Rolls downward from 24813 to 0:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { RollingNumber } from "@/components/remocn/rolling-number";

<Backdrop fill={{ type: "color", value: "#ffffff" }}>
  <RollingNumber from={24813} to={0} fontSize={120} />
</Backdrop>
```

## With Confetti

Pair it with [Confetti](/docs/effects/confetti) to celebrate the moment the number lands — fire the burst on the frame the count settles (`durationInFrames × 0.8`):

`Confetti` is a separate component — add it with `npx shadcn add @remocn/confetti`. Both render as full-canvas overlays, so the burst layers cleanly over the number. Keep `startFrame` equal to `durationInFrames × 0.8` (where the count settles): this 210-frame composition settles at frame 168, leaving the 42-frame `lifetime` room to play out before it loops.

## Use when
- Animating a large integer metric on a stats or milestone slide (revenue, signups, impressions).
- You need each digit place to animate independently so the viewer can read the number building up.
- The `from`/`to` values are pure numbers with no currency symbol or unit mixed into the string.

## Don't use when
- The value includes a prefix or suffix like `$99` or `1.2M` — use `slot-machine-roll` which accepts arbitrary strings instead.
- The number change is small or decorative and you want a playful reel feel rather than a data-serious odometer; `slot-machine-roll` reads friendlier.
- The counter is a secondary UI element that should feel lightweight — 150f is a long animation; shorten with `speed` or pick a simpler fade.
- The value is a small integer or needs to count DOWN — use `number-wheel` (direction inferred from `from`/`to`, lighter 112f); `rolling-number` is tuned for large multi-digit metrics counting up.

---

# Rolodex Flip
URL: https://remocn.dev/docs/typography/rolodex-flip

Cycle a word through a list of values with a 3D rolodex card flip

- Install: `npx shadcn@latest add @remocn/rolodex-flip`
- Vibe: tech
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rolodex-flip
```

## Usage

`RolodexFlip` renders an inline `span` and inherits the surrounding typography — drop it into the middle of a line and it flips through `items` while the rest of the line stays perfectly still: the outgoing value tips up and away, the incoming one turns in from below half a flip later, and an invisible sizer holds the width and baseline of the longest value. The first value is visible from the start and the last one stays for the rest of the scene.

```tsx
import { RolodexFlip } from "@/components/remocn/rolodex-flip";

export const MyScene = () => (
  <span style={{ fontFamily: "monospace", fontSize: 36 }}>
    $ npx shadcn add{" "}
    <RolodexFlip items={["button", "dialog", "command", "tabs", "chart-area"]} />
  </span>
);
```

## Sizing

The sizer uses the longest item by character count as real hidden text, so it works in any font. In a proportional font two equal-length strings can differ in width, so if your values are the same length put the visually widest one last — or anywhere, it just needs to be in the list.

`slot-machine-roll` and `number-wheel` are numeric reels, `per-word-crossfade` is a flat opacity swap, and `value-swap` slides values vertically at explicit frames — reach for `RolodexFlip` when arbitrary strings should cycle with physical depth at a fixed width.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | `—` | Values shown in order. The last one stays. |
| `from` | `number` | `0` | Frame of the first flip. |
| `interval` | `number` | `20` | Frames each value holds before flipping. |
| `flipDuration` | `number` | `10` | Length of the flip itself in frames. |
| `className` | `string` | `—` | Passed to the wrapper span. |
| `style` | `CSSProperties` | `—` | Merged onto the wrapper span. |

## Use when
- Cycling package, feature, or value names inside a held line — install commands, "works with X" beats, plan-name cycling.
- The canonical "any component, same command" bit.

## Don't use when
- The values are numbers with a counting narrative — use `number-wheel` or `rolling-number`.
- Only two values swap once — `value-swap`, `shared-axis-y`, or `per-word-crossfade` is lighter.
- The line reflows per value — the fixed sizer width shows a gap next to short values.

---

# Round Slam
URL: https://remocn.dev/docs/typography/round-slam

'ROUND 1' slams in in two hits, then 'SHIP!' punches over a red slashed band.

- Install: `npx shadcn@latest add @remocn/round-slam`
- Vibe: playful
- Natural length: 66f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/round-slam
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RoundSlam } from "@/components/remocn/round-slam";

const RoundSlamScene = () => <RoundSlam round="ROUND 2" call="DEPLOY!" />;

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

'ROUND' then the number slam in with echoes and a shake, hold with a slow push, then the call ducks up to a label. The `call` word punches in bigger, cracks along a diagonal, and speed slashes open a band behind it before the logo rises. Pass `round` and `call`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `round` | `string` | `"ROUND 1"` | The round call, slammed in first in two hits. |
| `call` | `string` | `"SHIP!"` | The finisher word, punched in bigger and cracked open by the slashes. |
| `accent` | `string` | `"#3B5BFD"` | Color of one of the thin speed slashes. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A game-style announcement beat: a round or level call followed by a one-word finisher.
- A high-energy launch moment where two impact frames and camera shakes sell the hit.
- A short hype sting that ends on the logo under a chrome speed-slash band.

## Don't use when
- You want a count to ten before the verdict word — use `ko-count`.
- The tone is quiet and editorial rather than loud — use `cool-down`.
- You just need one big word to slam in without the game framing — use `full-bleed-type`.

---

# Rsvp
URL: https://remocn.dev/docs/typography/rsvp

A big invitation headline, then a what, when and where table that builds up to an accent install command.

- Install: `npx shadcn@latest add @remocn/rsvp`
- Vibe: playful
- Natural length: 117f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rsvp
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Rsvp } from "@/components/remocn/rsvp";

const RsvpScene = () => (
  <Rsvp
    headline="You are invited."
    fields={[
      { label: "What", value: "The 2.0 launch film" },
      { label: "When", value: "Tuesday, 9 AM" },
    ]}
    rsvp="acme.dev/launch"
  />
);

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

The `headline` rises word by word, then rows of label and value (the `fields`) build below it, ending on an accent row labeled `rsvpLabel` that shows the `rsvp` text and pulls focus as the other rows dim. The default `rsvp` is a Remocn install command, so pass your own link or command. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | `"You’re invited."` | Large invitation line at the top. |
| `fields` | `{ label: string; value: string }[]` | `DEFAULT_FIELDS` | Label and value rows shown under the headline. |
| `rsvpLabel` | `string` | `"RSVP"` | Label of the final, accent-colored row. |
| `rsvp` | `string` | `"npx shadcn add @remocn/whip-pan"` | Text of the final row, such as a link or command; empty hides the row. |
| `accent` | `string` | — | Color of the labels and the final row. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A launch or event invite that spells out what, when and where, ending on how to join.
- A closing call to action presented as a short itinerary, with the final row as a command or link.

## Don't use when
- You want a thank-you sign-off followed by a P.S. line — use `post-script`.
- You only need a bold release announcement line — use `embargo-lift`.
- The last beat is a countdown to going live — use `drop-timer`.

---

# Rubberband Word
URL: https://remocn.dev/docs/typography/rubberband-word

A cursor grabs a word by its last letter, stretches it like elastic, and it snaps into a new word.

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

## Installation

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

## Usage

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

const RubberbandWordScene = () => (
  <RubberbandWord word="stretch" snapWord="deliver" />
);

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

A cursor reaches in, grabs the last letter of `word` and pulls it out on a taffy band while the letters spread and squash. On release the word snaps back, overshoots, and swaps to `snapWord`, closing with an accent period. Pass `word` and `snapWord`. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"tension"` | The word the cursor grabs by its last letter. |
| `snapWord` | `string` | `"release"` | What the word becomes on the snap. Empty keeps the word and only accents it. |
| `period` | `boolean` | `true` | Close the final word with an accent period. |
| `accent` | `string` | `"#3B5BFD"` | Color of the pulled letter and the closing period. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A tension-and-release beat where a word is pulled tight and then snaps into its resolution.
- A tagline that turns one word into another with a physical, elastic gesture.
- A playful interaction moment where a cursor is part of the story.

## Don't use when
- The word change should morph letters smoothly, with no cursor - use `kinetic-morph-text`.
- You just want an edit-style swap - use `strikethrough-replace`.
- A single word only needs to pop onto screen - use `spring-scale-in`.

---

# Ruby Press
URL: https://remocn.dev/docs/typography/ruby-press

A word in a sentence is pressed out and replaced from a list, with small glosses above.

- Install: `npx shadcn@latest add @remocn/ruby-press`
- Vibe: clean
- Natural length: 134f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ruby-press
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RubyPress } from "@/components/remocn/ruby-press";

const RubyPressScene = () => (
  <RubyPress before="Subtitles for every market in" words={["a fortnight", "a morning", "one render"]} after="." />
);

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

Each entry in `words` is pressed down and swapped for the next inside a sentence built from `before` and `after`, with a small gloss rising above each. Pass `before`, `words` and `after`. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Subtitles for every market in"` | Text before the swapping word. |
| `words` | `string[]` | — | Words pressed in order. |
| `after` | `string` | `"."` | Text after the swapping word. |
| `hold` | `number` | `14` | Frames each state stays on screen before the next one. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A claim like subtitles for every market where the time frame keeps shrinking.
- A localization or speed beat that cycles through variations of one phrase.
- A sentence with one swappable noun and a short annotation per option.

## Don't use when
- The swapped words need a stable width — use `width-lock`.
- A word should be selected and retyped like an editor — use `select-replace`.
- The slot should be an inline roll — use `inline-word-roll`.

---

# Ruler Align
URL: https://remocn.dev/docs/typography/ruler-align

A ruler slides under a messy line of text and straightens its letters onto the edge.

- Install: `npx shadcn@latest add @remocn/ruler-align`
- Vibe: clean
- Natural length: 151f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ruler-align
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RulerAlign } from "@/components/remocn/ruler-align";

const RulerAlignScene = () => <RulerAlign text="Made to measure." accent="#3B5BFD" />;

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

The letters appear scattered at uneven heights, a ruler slides in beneath them, levels, then lifts so high letters drop onto its edge. Two taps then nudge the spacing tight. Pass `text` for your own line; letters without descenders sit best on the edge. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Made to measure."` | The line the ruler straightens. Letters without descenders sit best on the edge. |
| `accent` | `string` | `"#3B5BFD"` | The ruler's straight edge. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A message about precision, polish or alignment where messy text snaps into order.
- A before-and-after beat where scattered letters get fixed by a tool in frame.
- A tagline whose punchline is that everything is now measured and lined up.

## Don't use when
- You only need letter spacing to tighten, not baseline fixing - use `kerning-snap`.
- The line should simply appear, with no gag - use `staggered-fade-up`.
- The text should arrive as if being typed - use `typewriter`.

---

# Run on
URL: https://remocn.dev/docs/typography/run-on

A breathless run-on sentence speeds up and scrolls away, then a full stop drops into a short promise line.

- Install: `npx shadcn@latest add @remocn/run-on`
- Vibe: clean
- Natural length: 188f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/run-on
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RunOn } from "@/components/remocn/run-on";

const RunOnScene = () => (
  <RunOn
    text="Open the old project and relink the fonts and nudge every keyframe and render and spot a typo and render it all again"
    promise="Or change one line."
    highlight="one line"
  />
);

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

The `text` runs in word by word at an accelerating pace, joiner words like and dimmed, and scrolls up as it fills the frame. A final accent full stop slams in, the wall drains away, and the stop slides down to end the `promise` line, whose `highlight` phrase lights up. Pass a long `text` without its final period, plus `promise` and `highlight`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Open last year’s project and relink the fonts and nudge every keyframe and render and spot a typo and render it all again"` | Long sentence to run on; its trailing punctuation is removed. |
| `promise` | `string` | `"Or change one line."` | Short line that follows once the long sentence drains away. |
| `highlight` | `string` | `"one line"` | Phrase inside promise that turns accent-colored. |
| `joiners` | `string[]` | `["and", "then"]` | Words dimmed within the run-on, such as and or then. |
| `accent` | `string` | — | Color of the full stop and highlight; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A pain-point beat that shows a tedious workflow as one exhausting sentence before the fix.
- A before and after moment where the long version should feel endless and the answer one short line.

## Don't use when
- The pain is a repeating loop of short steps rather than one sentence — use `loop-break`.
- You want the chore list to be crossed out, not scrolled away — use `filler-cut`.
- You only need the short answer with a highlighted phrase — use `answer-first`.

---

# Rush Type
URL: https://remocn.dev/docs/typography/rush-type

White words blast into vertical RGB shutter trails generated entirely by motion

- Install: `npx shadcn@latest add @remocn/rush-type`
- Vibe: tech
- Natural length: 104f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rush-type
```

## Usage

`RushType` shows one word of a short phrase on a flat opaque frame — black
with white type by default. The word rests pixel-sharp, then grows rapidly
through a vertical orbit. During
that motion, the same monochrome glyph is accumulated into red, green, and blue
channels over different shutter lengths. Green travels furthest, blue remains
tightest, and red sits between them.

The channels are divided by their accumulated sample weights, so the effect
conserves energy instead of brightening as blur length increases. When motion
stops, the shutter sweep collapses, all channels sample the same pixels, and the
word resolves to white without a crossfade or a separately colored layer.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import {
  RushType,
  rushTypeLength,
} from "@/components/remocn/rush-type";

export const RemotionRoot = () => (
  <Composition
    id="RushType"
    component={RushType}
    durationInFrames={rushTypeLength}
    fps={30}
    width={1280}
    height={720}
    defaultProps={{ phrase: "gone before you look" }}
  />
);
```

### Controlling The Color Split

`chromaticSpread` changes the distance between the three shutter lengths. At
`0`, all three channels share the same shutter and no color appears. At `1`,
the component uses the reference ratio of approximately `0.62 / 1 / 0.34` for
red, green, and blue. Higher values widen that timing difference; they do not
apply new colors to the word.

`color` and `backgroundColor` remap those accumulated intensities onto your own
palette: every pixel blends from the background toward the text color. The
chromatic trails live in the difference between channels, so they stay visible
with white, light, or pastel text but fade as the text color approaches a
saturated primary — pure `#ff0000` leaves nothing for the green and blue
shutters to show.

```tsx
<RushType
  phrase="move before it settles"
  verticalStretch={8}
  chromaticSpread={1.25}
  restDuration={15}
  peakHoldDuration={4}
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `phrase` | `string` | `"gone before you look"` | Whitespace-delimited phrase shown one word per cycle |
| `fontSize` | `number` | `68` | Cap height of the resting word in composition pixels |
| `fontFamily` | `string` | `"Arial, Helvetica, sans-serif"` | Canvas font-family used to rasterize the glyph atlas |
| `fontWeight` | `number` | `400` | Font weight used for every word |
| `color` | `string` | `"#ffffff"` | Hex color of the type and its motion trails |
| `backgroundColor` | `string` | `"#000000"` | Hex color of the opaque frame behind the type |
| `verticalStretch` | `number` | `7` | Authored peak vertical scale before perspective |
| `chromaticSpread` | `number` | `1` | Distance between the three motion-shutter lengths |
| `restDuration` | `number` | `12` | Readable resting phase in frames |
| `peakHoldDuration` | `number` | `3` | Total near-point hang around each word swap in frames |
| `speed` | `number` | `1` | Global playback multiplier |
| `className` | `string` | `—` | Optional class name applied to the full-frame root |

## Notes

The blur is vertical-only and sweeps scale rather than position. Bloom, CRT
modulation, the neutral ground, stroke thinning, and swap separation are all
driven by motion progress and become exactly zero during the resting phase.
The component uses deterministic frame time only: it has no timers, animation
frames, pointer state, scroll state, random samples, or device-dependent quality
switches.

## Use when
- A short phrase should cycle one forceful word at a time.
- Chromatic separation should emerge from motion rather than tinting the text.
- A kinetic-type beat needs a sharp readable rest between extreme blasts.

## Don't use when
- The text must remain readable throughout the motion — use `word-push` or `zoom-words`.
- You want a horizontal digital glitch — use `rgb-glitch-text`.
- The component must remain transparent — it always paints an opaque background.

---

# Said Who
URL: https://remocn.dev/docs/typography/said-who

A big serif pull quote, "Took me one evening.", with a backend-engineer attribution

- Install: `npx shadcn@latest add @remocn/said-who`
- Vibe: premium
- Natural length: 140f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/said-who
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SaidWho } from "@/components/remocn/said-who";

const SaidWhoScene = () => <SaidWho quote="Took me one evening." highlight="one evening" name="Tobias Lind" details={["backend engineer", "never edited a video before"]} />;

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

A big serif quote appears word by word, then the attribution line builds beneath it a piece at a time: first the name, then each detail, while the quote slowly grows and its highlighted phrase turns to the accent color. Pass `quote`, `highlight`, `name` and `details`; it spaces the builds to fit the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `quote` | `string` | `"Took me one evening."` | The quote text, without quote marks. |
| `highlight` | `string` | `"one evening"` | Phrase in the quote that turns to the accent color. |
| `name` | `string` | `"Tobias Lind"` | Speaker name, shown first in the attribution. |
| `details` | `string[]` | — | Extra attribution phrases added one by one after the name. |
| `accent` | `string` | — | Color for the highlighted phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A single short quote whose credibility comes from who said it, revealed bit by bit.
- A surprising claim that lands before the speaker's unexpected background is shown.
- A one-line testimonial beat in a serif editorial style.

## Don't use when
- You have a longer testimonial with a role and company row — use `quote-hero`.
- The quote should be answered by a second voice — use `overheard`.
- The attribution is the joke, in a flat box — use `deadpan-box`.

---

# Scale Down Fade
URL: https://remocn.dev/docs/typography/scale-down-fade

Subtle premium settle-in with a restrained scale-down fade on exit

- Install: `npx shadcn@latest add @remocn/scale-down-fade`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/scale-down-fade
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScaleDownFade } from "@/components/remocn/scale-down-fade";

const ScaleDownFadeScene = () => (
  <ScaleDownFade text="Quietly refined." fontSize={72} />
);

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

The text settles in, holds steady in the middle of the composition, then scales down and fades out near the end—so the duration should leave room for the exit animation.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { ScaleDownFade } from "@/components/remocn/scale-down-fade";
import { Backdrop } from "@/components/remocn/backdrop";

const ScaleDownFadeScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <ScaleDownFade text="Quietly refined." fontSize={72} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A headline needs a confident, minimal entrance without any kinetic exaggeration.
- The surrounding content is already in motion and you need one element to settle calmly into focus.
- The brand is clean or corporate and bounce or blur would feel off-brand.

## Don't use when
- You want energy or playfulness — the scale-down reads as composed, not exciting; use `spring-scale-in` for an overshoot bounce instead.
- The text should feel like it is being revealed rather than settling in — use `staggered-fade-up` or `soft-blur-in` for a character-by-character or word-by-word reveal.
- You need an exit animation — scale-down-fade is an entrance only; compose with a separate exit primitive inside a `<Sequence>`.

---

# Scan Reveal
URL: https://remocn.dev/docs/typography/scan-reveal

A scan line reveals a headline over an underline with a small subtitle below

- Install: `npx shadcn@latest add @remocn/scan-reveal`
- Vibe: premium
- Natural length: 107f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/scan-reveal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScanReveal } from "@/components/remocn/scan-reveal";

const ScanRevealScene = () => (
  <ScanReveal title="Built frame by frame" subtitle="Launch films from components you own." />
);

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

Guide marks appear, a scan line travels down to reveal the headline, then it moves up and parks while the subtitle fades in beneath. Pass `title` and `subtitle`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Built frame by frame"` | The headline revealed by the scan. |
| `subtitle` | `string` | `"Launch films from components you own."` | One-line subtitle under the headline. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A section title where a scan line sweeps down and reveals the headline over an underline.
- A short opener with a headline and one-line subtitle, in a precise, technical tone.

## Don't use when
- You need several headlines in sequence — use `rewrite-bars`.
- You want a soft blurred entrance instead of a scan — use `focus-blur-resolve`.

---

# Scissors Cut
URL: https://remocn.dev/docs/typography/scissors-cut

Scissors cut a word out of a line, and a replacement word slides into the gap.

- Install: `npx shadcn@latest add @remocn/scissors-cut`
- Vibe: playful
- Natural length: 202f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/scissors-cut
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScissorsCut } from "@/components/remocn/scissors-cut";

const ScissorsCutScene = () => (
  <ScissorsCut before="Ship " cut="next quarter" after="." replacement="now" />
);

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

A line appears, a dashed outline traces the `cut` phrase and a pair of scissors snips along it. The cut piece falls away, the line reflows, and the `replacement` slides into the gap. Pass `before`, `cut`, `after` and `replacement`. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Launch "` | Text before the cut-out. Keep the trailing space. |
| `cut` | `string` | `"next month"` | The words the scissors cut out. |
| `after` | `string` | `"."` | Text after the cut-out. |
| `replacement` | `string` | `"today"` | What slides into the gap. |
| `accent` | `string` | `"#3B5BFD"` | Scissor handles and the replacement word. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A tagline where one phrase is cut out and replaced, such as swapping a slow timeline for a fast one.
- A playful edit beat that shows removal, then the better word taking its place.
- A closing line where the replacement is the payoff after a dashed cut outline.

## Don't use when
- The swap should be quiet and fast - use `strikethrough-replace`.
- You want several words cycling beside a fixed prefix - use `inline-word-roll`.
- No gag is needed, just a clean replacement - use `fade-through`.

---

# Script Cut
URL: https://remocn.dev/docs/typography/script-cut

A one-line script is cut by accent ticks into shots, and each piece flies up to fill the frame.

- Install: `npx shadcn@latest add @remocn/script-cut`
- Vibe: clean
- Natural length: 176f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/script-cut
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScriptCut } from "@/components/remocn/script-cut";

const ScriptCutScene = () => (
  <ScriptCut
    shots={["We wrote the launch as one line,", "cut it twice,", "and every piece became a shot."]}
  />
);

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

The whole script appears as a small line along the bottom, then accent ticks drop in to cut it into pieces. Each shot lights up in turn and its words fly up from the row to fill the frame at large size, then exit for the next. Pass `shots` as the script split into phrases; timing adapts to the composition length, and 176 frames assumes the three defaults in 200. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `shots` | `string[]` | `DEFAULT_SHOTS` | Script pieces in order; together they form the small line below. |
| `accent` | `string` | — | Color of the cut ticks and the lit shot. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A how-we-made-it beat that shows one written line being split into separate shots.
- A sequence of three or four phrases that should each get a full-frame moment in order.

## Don't use when
- A cut should remove filler words from a transcript — use `filler-cut`.
- You want a single word cut out of a line and replaced — use `scissors-cut`.
- The phrases should build on one centered line instead of flying up — use `word-stream`.

---

# Scrub Reveal
URL: https://remocn.dev/docs/typography/scrub-reveal

A dim paragraph climbs as a soft front brightens it word by word, with one phrase in gradient italic.

- Install: `npx shadcn@latest add @remocn/scrub-reveal`
- Vibe: premium
- Natural length: 142f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/scrub-reveal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScrubReveal } from "@/components/remocn/scrub-reveal";

const ScrubRevealScene = () => (
  <ScrubReveal
    text="Every frame is code. Every cut is yours. Ship the film your product deserves."
    highlight="Every cut is yours."
  />
);

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

A dim paragraph sits low in the frame and climbs while a soft front brightens it word by word, like a trackpad scroll. The `highlight` phrase inside `text` switches to a serif italic filled with a gradient, and at the end the plain words settle back a step. Pass your own `text` and a `highlight` that appears in it, or an empty string for none. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Every frame is code. Every cut is yours. Ship the film your product deserves."` | The statement. Each word brightens as the reveal front passes it. |
| `highlight` | `string` | `"Every cut is yours."` | A phrase inside `text` that turns to an italic serif and lights up in a gradient. Pass "" for none. |
| `accent` | `string` | `"#3B5BFD"` | Final stop of the highlight gradient. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A manifesto or value statement that should read like scrolling through a page and lighting up as you go.
- A short paragraph where one key phrase deserves an editorial italic gradient treatment.

## Don't use when
- You want a light sheen sweeping across muted text instead of a reading scrub — use `shimmer-sweep`.
- The key phrase should get a marker block behind it — use `marker-highlight`.
- You want a soft blurred fade-in of the whole line — use `soft-blur-in`.

---

# Select Replace
URL: https://remocn.dev/docs/typography/select-replace

A phrase is selected like text in an editor, deleted, and replaced with new styled words.

- Install: `npx shadcn@latest add @remocn/select-replace`
- Vibe: tech
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/select-replace
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SelectReplace } from "@/components/remocn/select-replace";

const SelectReplaceScene = () => (
  <SelectReplace text="Draft it next week." edits={[{ from: "Draft", to: "Ship" }, { from: "next week", to: "tonight" }]} />
);

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

The `text` shows, then each `edits` item selects a `from` phrase and swaps in its `to` replacement with a highlight. Pass `text` and `edits` with the phrases you want changed. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Draft it next week."` | Starting sentence containing every `from` phrase. |
| `edits` | `SelectReplaceEdit[]` | — | List of `{ from, to }` replacements applied in order. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- An editor-style beat that rewrites a slow plan into a fast one.
- A copy-change demo where two phrases are corrected in sequence.
- A dev or writing tool scene that mimics a real text selection.

## Don't use when
- A single misspelling should be fixed in place — use `typo-fix`.
- The change should read as a code diff — use `diff-swap`.
- Words should be inserted into a sentence, not replaced — use `word-insert`.

---

# Selection Snap
URL: https://remocn.dev/docs/typography/selection-snap

A thin word in a loose viewfinder snaps into a design-tool selection while it goes from Thin to Black, pops its handles and counts up a size badge

- Install: `npx shadcn@latest add @remocn/selection-snap`
- Vibe: tech
- Natural length: 38f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/selection-snap
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { SelectionSnap } from "@/components/remocn/selection-snap";

const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <SelectionSnap text="Frame" accent="#ff4d1a" selectionColor="#3d5afe" />
  </AbsoluteFill>
);

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

The word starts at `fromWeight` inside four corner brackets. Around frame 14
the frame snaps tight with a small overshoot while the weight runs to
`toWeight` and the color turns to `accent`. The bracket arms grow along the
edges until they close into a one-pixel box, the eight handles pop in corners
first, and the badge counts up to the snapped box size in reference px.

The weight is continuous because Inter from `@remotion/google-fonts` is one
variable file: the component drives `font-variation-settings`. The box is a
wrapper around the text, so it follows the word as it widens. With a static
`fontFamily` the weight steps through the faces you load instead of gliding.

The component paints no background and centers the word in its parent. Sizes
are reference px at a 720px-tall composition and scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Frame"` | The word inside the selection. One short word reads best |
| `fontSize` | `number` | `150` | Font size in reference px at 720p |
| `fontFamily` | `string` | `Inter` | Font family. Use a variable font for a continuous weight change |
| `fromWeight / toWeight` | `number` | `100 / 900` | Weight before and after the snap |
| `color` | `string` | `"#fafafa"` | Text color before the snap |
| `accent` | `string` | `"#D97757"` | Text color after the snap |
| `selectionColor` | `string` | `"#0d99ff"` | Brackets, box, handle borders and badge |
| `badge` | `boolean` | `true` | Show the W × H badge under the box |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A single word should read as something being designed: a design tool, a component library, a type or layout feature.
- You want a weight change to carry the beat — the word grows from Thin to Black inside the frame instead of just appearing.
- The title needs a precise, UI-flavored accent (selection box, handles, a W × H readout) without building any interface chrome.

## Don't use when
- The word should enter with physical motion rather than change in place — use `stretch-in`.
- A plain, quiet reveal is enough and the design-tool look would distract — use `soft-blur-in`.
- The text is a full sentence; the selection frames one short word and reads poorly around a line — use `kinetic-center-build`.

---

# Serif Rise
URL: https://remocn.dev/docs/typography/serif-rise

A large serif line rises into place, 'From rough cut to final cut.', end phrase in red

- Install: `npx shadcn@latest add @remocn/serif-rise`
- Vibe: premium
- Natural length: 92f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/serif-rise
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SerifRise } from "@/components/remocn/serif-rise";

const SerifRiseScene = () => (
  <SerifRise lines={["From rough cut", "to final cut."]} highlight="final cut." />
);

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

Large serif lines rise into place one after another under thin rules, then a sweep lights the highlight phrase in the accent colour. Pass `lines` and `highlight`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["From rough cut", "to final cut."]` | Headline lines, each rising in turn. |
| `highlight` | `string` | `"final cut."` | Phrase set in the accent colour. |
| `accent` | `string` | — | Highlight 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
- An emotional or editorial line, like a before-and-after claim, that should feel crafted rather than techy.
- A closing statement where the final phrase is emphasised in colour.

## Don't use when
- The line is a bold sans statement that should slam in — use `full-bleed-type`.
- You want a soft blur-in instead of a rise — use `focus-blur-resolve`.

---

# Shader Text Reveal
URL: https://remocn.dev/docs/typography/shader-text-reveal

Reveal words through the original OpenShaders hero material, then settle into white type

- Install: `npx shadcn@latest add @remocn/shader-text-reveal`
- Vibe: premium
- Natural length: 48f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shader-text-reveal
```

## Usage

The original [@remocn OpenShaders shader](https://openshaders.com/@remocn) from the
site's hero fills the letters, including its magenta-violet field and halftone
texture. A reveal exposes the material, then leaves clean white type. A diagonal
dark wave removes the word before the next one appears. The final word stays
visible. The hero field and halftone GLSL are included unchanged; Remotion drives
their clock and a separate compositing pass applies the text shape and timing.

```tsx
import { AbsoluteFill } from "remotion";
import { ShaderTextReveal } from "@/components/remocn/shader-text-reveal";

export const Headline = () => (
  <AbsoluteFill style={{ background: "#000" }}>
    <ShaderTextReveal text="Your product" wordDuration={30} />
  </AbsoluteFill>
);
```

At 30 fps the default shows **Your** during the first second and **product**
during the second. Give the composition at least 60 frames; 75 frames includes
a short final hold. Animation timing is measured in frames. For N words,
allocate at least `(N - 1) * wordDuration + 0.6 * wordDuration` frames, then add
any hold you need.

Space-separated text plays word by word. Use newlines to keep phrases together:
`text={"Your product\nOne clear story"}`. Blank lines are ignored.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Your product"` | Words, or newline-separated phrases, shown in sequence. |
| `fontSize` | `number` | `400` | Maximum font size in composition pixels. Text automatically fits within 72% of the frame width and a font-size cap of 58% of its height. |
| `fontFamily` | `string` | `"Arial, sans-serif"` | Canvas font family. Load custom font faces in your composition; rendering waits for the selected font. |
| `fontWeight` | `number` | `500` | Font weight. |
| `wordDuration` | `number` | `30` | Frames per word, rounded and clamped to at least 12. The final word remains after its entrance. |
| `intensity` | `number` | `1` | Original hero material and subtle refraction; clamped to 0–1. At 0, the reveal uses white letters. |

The background is transparent. A black backdrop matches the preview; the shader
can also be composed over other layers. Text is rasterized once per font or
content change and uploaded when the active word changes. GLSL controls the
hero field, halftone texture, reveal, exit and local refraction. All timing comes from Remotion
frames, so seeking is deterministic. WebGL2 is required; shader or font errors
fail the render explicitly.

## Use when
- A short headline needs the hero shader reveal, one word at a time.
- The hero material should appear inside letters before they settle into white.

## Don't use when
- A quiet text entrance is enough — use `soft-blur-in`.
- Words should physically morph into each other — use `kinetic-morph-text`.

---

# Shadow Sweep Text
URL: https://remocn.dev/docs/typography/shadow-sweep-text

A rising line is uncovered and removed by two dense dark shadow sweeps

- Install: `npx shadcn@latest add @remocn/shadow-sweep-text`
- Vibe: premium
- Natural length: 37f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shadow-sweep-text
```

## Usage

`ShadowSweepText` keeps the text at constant opacity for the complete cycle.
Frames 0–23 move a directional mask and a broad Gaussian shadow field to the
right, uncovering the line without exposing a rectangular layer. After a
three-frame hold, the same paired motion returns from the left and covers the
line by frame 36. Independently, the text eases 96 pixels up and 16 pixels left
across the shot.

The component paints its own near-black violet background. That field and the
slightly darker shadow are part of the animation rather than preview chrome, so
the installed result matches the customizer without requiring a separate
backdrop.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShadowSweepText } from "@/components/remocn/shadow-sweep-text";

const ShadowSweepTextScene = () => (
  <ShadowSweepText text="are abandoned" />
);

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

### Tuning The Shadow

`backgroundColor` fills the canvas. By default, `shadowColor` inherits that
same color, so the radial field is visible over the letters without becoming a
separate black shape on the blue field. It still fades to transparency
horizontally and vertically. Reducing `shadowSoftness` makes the reveal feel
like a hard wipe, while increasing it leaves more of each glyph partially
covered.

```tsx
<ShadowSweepText
  text="built for motion"
  backgroundColor="#030012"
  shadowColor="#030012"
  shadowSoftness={130}
  rise={96}
  driftLeft={16}
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | Single-line copy rendered beneath both shadow layers |
| `fontSize` | `number` | `96` | Font size in pixels |
| `color` | `string` | `"#aaa6b5"` | Text color |
| `fontWeight` | `number` | `700` | CSS font-weight |
| `backgroundColor` | `string` | `"#030012"` | Canvas color |
| `shadowColor` | `string` | `backgroundColor` | Color at the center of the moving Gaussian shadow; inherits the background by default |
| `shadowSoftness` | `number` | `130` | Approximate width of each soft shadow edge in pixels |
| `rise` | `number` | `96` | Vertical travel from the starting position in pixels |
| `driftLeft` | `number` | `16` | Horizontal travel toward the left in pixels |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the full-frame root |

## Use when
- A short statement should emerge through a dense shadow instead of fading or clipping into view.
- The text needs a subtle diagonal rise while the reveal travels independently across the line.
- A compact title beat needs a matched shadow enter and exit on a dark field.

## Don't use when
- The text should stay visible after entering — use `mask-reveal-up` for a one-way reveal.
- Each word needs its own entrance timing — use `per-word-crossfade` or `centered-word-build`.
- The background must remain transparent because this effect relies on a matched dark field and occluders.

---

# Shared Axis Y
URL: https://remocn.dev/docs/typography/shared-axis-y

Per-word hard-cut staircase transition for sharp editorial phrase swaps

- Install: `npx shadcn@latest add @remocn/shared-axis-y`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shared-axis-y
```

## Usage

```tsx
// src/Root.tsx
import { Composition, Sequence } from "remotion";
import { SharedAxisY } from "@/components/remocn/shared-axis-y";

const SharedAxisYScene = () => (
  <>
    <Sequence durationInFrames={40}>
      <SharedAxisY fromText="Layered navigation." toText="Hierarchy made clear." />
    </Sequence>
    <Sequence from={40} durationInFrames={40}>
      <SharedAxisY fromText="Hierarchy made clear." toText="Depth with restraint." />
    </Sequence>
  </>
);

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

Each word in the outgoing phrase snaps off in a hard cut, then the incoming phrase's words snap on in a staircase pattern—no fade or motion, just a sharp editorial swap. Chaining two instances in back-to-back `Sequence`s walks through a full phrase chain—the second transition reuses the first's `toText` as its `fromText`, so the text flows A → B → C.

### Chained example

This is the two-`Sequence` chain above rendered on an 80-frame timeline:

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { SharedAxisY } from "@/components/remocn/shared-axis-y";
import { Backdrop } from "@/components/remocn/backdrop";

const SharedAxisYScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SharedAxisY
      fromText="Layered navigation."
      toText="Hierarchy made clear."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The outgoing phrase, shown first then hard-cuts off word by word. |
| `toText` (required) | `string` | — | The incoming phrase that snaps in word by word. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- Swapping two text values in a slide-deck style transition (A → B → C chained in `<Sequence>`).
- You want a crisp, editorial replacement without blur or scale — vertical word-by-word staircase reads as confident.
- The outgoing and incoming phrases are thematically related (before/after, old/new, step N / step N+1).

## Don't use when
- You only need to bring text in for the first time with no outgoing content — use `short-slide-down` or `staggered-fade-up` for a clean entrance instead.
- You want a depth or focus-shift feel between two contexts — use `shared-axis-z` which scales rather than slides for that spatial metaphor.
- The transition should feel playful or bouncy — the hard-cut staircase is intentionally sharp; use `spring-scale-in` for a springy swap.

---

# Shared Axis Z
URL: https://remocn.dev/docs/typography/shared-axis-z

Scale-based shared-axis transition for focus shifts and context depth

- Install: `npx shadcn@latest add @remocn/shared-axis-z`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shared-axis-z
```

## Usage

```tsx
// src/Root.tsx
import { Composition, Sequence } from "remotion";
import { SharedAxisZ } from "@/components/remocn/shared-axis-z";

const SharedAxisZScene = () => (
  <>
    <Sequence durationInFrames={40}>
      <SharedAxisZ fromText="Zooming between states." toText="Elevate and settle." />
    </Sequence>
    <Sequence from={40} durationInFrames={40}>
      <SharedAxisZ fromText="Elevate and settle." toText="Scale with purpose." />
    </Sequence>
  </>
);

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

A Material shared-axis (Z) depth swap — the old phrase scales up and blurs away as it fades, while the new phrase rises from a smaller scale and sharpens into focus. Chaining two in Sequence flows A → B → C.

### Chained example

This is the two-`Sequence` chain above rendered on an 80-frame timeline:

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { SharedAxisZ } from "@/components/remocn/shared-axis-z";
import { Backdrop } from "@/components/remocn/backdrop";

const SharedAxisZScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SharedAxisZ
      fromText="Zooming between states."
      toText="Elevate and settle."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The outgoing phrase, scales up and fades away. |
| `toText` (required) | `string` | — | The incoming phrase, rises from a smaller scale into focus. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- Conveying a zoom-in narrative: moving from a broad context to a focused point.
- Transitioning between two text values where the second is a more specific or deeper layer of the first.
- Chaining multiple topic shifts in a `<Sequence>` where each swap should feel like a camera push forward.

## Don't use when
- The swap is a lateral topic change with no depth relationship — use `shared-axis-y` for a horizontal-edit-style cut instead.
- You only need to bring text in for the first time with no outgoing content — use `scale-down-fade` or `soft-blur-in` for a single-text entrance.
- The scene already has a lot of scale motion and you need variety — mix in `shared-axis-y` to alternate the spatial grammar.

---

# Shed Weight
URL: https://remocn.dev/docs/typography/shed-weight

One line repeats at growing sizes, each cut redrawn with its own optical weight, with size labels.

- Install: `npx shadcn@latest add @remocn/shed-weight`
- Vibe: tech
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shed-weight
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShedWeight } from "@/components/remocn/shed-weight";

const ShedWeightScene = () => <ShedWeight text="Sharp at any size." sizes={5} />;

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

The same line is stacked at a growing size ladder, each row drawing in under a hairline rule with a small point-size label, and every size uses its own optical cut. Pass `text` and `sizes` for the number of rows; `showSizes` toggles the labels. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Sharp at any size."` | The line repeated down the size ladder. |
| `sizes` | `number` | `6` | How many rows in the ladder, from 2 to 9. |
| `showSizes` | `boolean` | `true` | Show the small point-size label beside each row. |
| `accent` | `string` | — | Spot color for the largest row, its rule and label. |
| `background` | `string` | — | Override the background color; use "transparent" to composite over your own. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |

## Use when
- A typography-focused beat showing that a typeface holds up from tiny to huge sizes.
- A design-tool or font launch where the size ladder with point labels explains the feature.
- A technical, precise tagline that wants a stacked, specimen-like layout.

## Don't use when
- The point is a weight or width that animates on one word - use `axis-flex`.
- You want a single word to switch typefaces - use `font-cycle`.
- The line should simply be revealed once, with no repetition - use `tracking-in`.

---

# Sheen Slide In
URL: https://remocn.dev/docs/typography/sheen-slide-in

A title glides in from the right with a long settle while a gradient sheen sweeps through the glyphs

- Install: `npx shadcn@latest add @remocn/sheen-slide-in`
- Vibe: premium
- Natural length: 64f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/sheen-slide-in
```

## Usage

The title enters from the right at peak velocity and settles as a sum of two exponentials — a fast settle (τ ≈ 2.5 frames) plus a slow creep (τ ≈ 12 frames) that eases it into exact center. The sheen starts moving with the text on frame 0 and sweeps left-to-right through the glyphs on an ease-in-out over 48 frames — gaining speed while the text sheds it — then cools down by frame 58. At `exitAt` the title shrinks to 0.9 over four frames at full opacity and vanishes with a hard cut. All timings were measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SheenSlideIn } from "@/components/remocn/sheen-slide-in";

const SheenSlideInScene = () => <SheenSlideIn text="Introducing" />;

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

```tsx
import { Composition } from "remotion";
import { SheenSlideIn } from "@/components/remocn/sheen-slide-in";
import { Backdrop } from "@/components/remocn/backdrop";

const SheenSlideInScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SheenSlideIn text="Introducing" />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The title text |
| `exitAt` | `number` | `60` | Frame at which the title shrinks to 0.9 and hard-cuts away |
| `fontSize` | `number` | `72` | Font size in pixels; travel distances scale with it |
| `baseColor` | `string` | `"#18181b"` | Resting text color |
| `sheenColor` | `string` | `"#4f8ef7"` | Color of the gradient highlight sweeping through the glyphs |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- An intro title should arrive with momentum — a fast entrance, a long exponential settle and a barely visible final creep into center.
- You want a colored gradient highlight to sweep once through the glyphs while the title is settling, then cool down to the base color.
- The brand moment needs more physicality than a plain fade but no per-character or per-word choreography.

## Don't use when
- You want a repeating metallic shimmer loop rather than a single arrival — use `shimmer-sweep`.
- The title should build word by word — use `word-push` or `word-stream`.
- The entrance should be soft and blurred rather than kinetic — use `soft-blur-in` or `focus-blur-resolve`.

---

# Shimmer Sweep
URL: https://remocn.dev/docs/typography/shimmer-sweep

A bright shine travels across muted text to draw attention

- Install: `npx shadcn@latest add @remocn/shimmer-sweep`
- Vibe: premium
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shimmer-sweep
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShimmerSweep } from "@/components/remocn/shimmer-sweep";

const ShimmerSweepScene = () => (
  <ShimmerSweep text="Generating..." fontSize={96} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate the shine across |
| `baseColor` | `string` | `"#3f3f46"` | Dim color of the text underneath the shine |
| `shineColor` | `string` | `"#fafafa"` | Color of the moving highlight gradient |
| `fontSize` | `number` | `96` | Font size in pixels |
| `fontWeight` | `number` | `700` | CSS font-weight |
| `speed` | `number` | `1` | Multiplier for animation speed |
| `className` | `string` | — | Optional className passed to the shine span |

## Use when
- Highlighting a product name or pricing tier with a refined, metallic gleam — luxury SaaS, pricing slides.
- The text is already visible and you want a continuous or looped attention effect rather than an entrance.
- The design calls for a dark background where a light sweep across dark text creates contrast without a harsh cut.

## Don't use when
- You need the text to enter the scene — shimmer-sweep does not animate the text in; use `tracking-in` or `soft-blur-in` for the entrance, then layer a shimmer if needed.
- The brand aesthetic is casual or energetic — the metallic sweep reads as premium/luxury; use `spring-scale-in` or `staggered-fade-up` for a lighter feel.
- You want per-character color or gradient control — `shimmer-sweep` sweeps a single shine beam; use `rgb-glitch-text` for character-level color splitting.

---

# Short Slide Down
URL: https://remocn.dev/docs/typography/short-slide-down

Words drop in from above and stack into a centered multi-line composition

- Install: `npx shadcn@latest add @remocn/short-slide-down`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/short-slide-down
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShortSlideDown } from "@/components/remocn/short-slide-down";

const ShortSlideDownScene = () => (
  <ShortSlideDown text="Build from above." entryOffset={28} />
);

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

Each word drops in from above onto its own line and pushes the existing words down so the growing stack stays vertically centered — the words split onto separate lines, best for short three-word headings.

This is a layout-aware effect — it measures word heights to keep the stack centered, so it works best with short headings.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { ShortSlideDown } from "@/components/remocn/short-slide-down";
import { Backdrop } from "@/components/remocn/backdrop";

const ShortSlideDownScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <ShortSlideDown text="Build from above." entryOffset={28} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The phrase to build. Each word becomes its own line; best with short three-word phrases. |
| `entryOffset` | `number` | `28` | How far in pixels each incoming word starts above its line before dropping in. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the stack container |

## Use when
- A multi-word headline should build its layout visibly — each word stacking to create a composed block.
- The scene is short and you need a fast (60f) entrance that still feels structured.
- You want vertical motion on entrance without a transition between two different texts.

## Don't use when
- You are swapping between two text values — use `shared-axis-y` which handles the outgoing text exit properly.
- The text is a single word or short phrase that doesn't benefit from a stacking effect — use `scale-down-fade` or `soft-blur-in` for a cleaner single-unit entrance.
- You want horizontal entry motion — use `short-slide-right` for a left-to-right glide instead.

---

# Short Slide Right
URL: https://remocn.dev/docs/typography/short-slide-right

The whole phrase glides in from the left while words reveal in sequence through opacity

- Install: `npx shadcn@latest add @remocn/short-slide-right`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/short-slide-right
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShortSlideRight } from "@/components/remocn/short-slide-right";

const ShortSlideRightScene = () => (
  <ShortSlideRight text="Move with intent." distance={24} staggerDelay={3} />
);

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

The whole phrase shares one compact left-to-right slide while the words themselves reveal only through a staggered opacity cascade — motion stays controlled, the word order reads clearly.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { ShortSlideRight } from "@/components/remocn/short-slide-right";
import { Backdrop } from "@/components/remocn/backdrop";

const ShortSlideRightScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <ShortSlideRight text="Move with intent." distance={24} staggerDelay={3} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `distance` | `number` | `24` | Horizontal slide distance in pixels the whole phrase travels from the left. |
| `staggerDelay` | `number` | `3` | Per-word delay in frames for the opacity reveal cascade. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the phrase container span |

## Use when
- A short headline should enter with horizontal momentum — reads as forward motion or progress.
- You want word-level opacity stagger layered on top of a single group translation, giving depth without complexity.
- The composition requires a fast (60f) entrance that feels purposeful and directional.

## Don't use when
- You are transitioning between two texts — use `shared-axis-z` (depth) or `shared-axis-y` (vertical swap) which handle the outgoing content.
- You want vertical stacking motion — use `short-slide-down` where each word drops onto its own line to build a layout.
- The slide distance needs to be large or cinematic — `short-slide-right` is intentionally compact (default 24px); use a custom composition for a wide pan.

---

# Slash Wipe
URL: https://remocn.dev/docs/typography/slash-wipe

A gradient slash wipes across and reveals a large title, '/transitions', with a one-line sub

- Install: `npx shadcn@latest add @remocn/slash-wipe`
- Vibe: premium
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/slash-wipe
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SlashWipe } from "@/components/remocn/slash-wipe";

const SlashWipeScene = () => (
  <SlashWipe sections={[{ title: "captions", sub: "Styles that follow every word." }, { title: "transitions", sub: "Cuts that land on the beat." }]} />
);

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

A gradient slash sweeps across the frame and reveals the first title, then another slash wipes in the next, each with a one-line sub. Pass `sections` (title and optional sub) and your own `logo`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `sections` | `SlashSection[]` | `DEFAULT_SECTIONS` | Titles with optional sub, each revealed by a slash. |
| `every` | `number` | `56` | Frames between one section and the next. |
| `logo` | `React.ReactNode` | — | Custom logo node shown in place of the built-in mark. |
| `accent` | `string` | `"#3B5BFD"` | 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 section title card where a bright slash wipes across and reveals a big title with a one-line sub.
- A tour of product areas, one title per slash, each with a short description.

## Don't use when
- You need a single headline with no wipe between sections — use `scan-reveal`.
- The titles should scroll as a list — use `index-list`.

---

# Slide Doors
URL: https://remocn.dev/docs/typography/slide-doors

Two panels slide apart like doors to reveal 'Arriving in your repo.' with an accent word

- Install: `npx shadcn@latest add @remocn/slide-doors`
- Vibe: clean
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/slide-doors
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SlideDoors } from "@/components/remocn/slide-doors";

const SlideDoorsScene = () => (
  <SlideDoors lines={["Scenes that move.", "Code you own.", "Arriving in your repo."]} highlight="repo." />
);

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

Each line slides apart like a pair of doors and the next line is revealed in the gap, ending with the last line and its highlight word in the accent colour. Pass `lines` and `highlight`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Lines shown in turn; the last one gets the highlight. |
| `highlight` | `string` | `"repo."` | Word or phrase set in the accent colour. |
| `hold` | `number` | `28` | Frames the final line holds. |
| `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 rhythmic three-line pitch where each line is pushed out by the next, like doors sliding apart.
- A final line that lands on a highlighted word, such as where the product ends up.

## Don't use when
- You need a single line, not a sequence — use `scan-reveal`.
- You want lines to rewrite in place — use `rewrite-bars`.

---

# Slit Scan
URL: https://remocn.dev/docs/typography/slit-scan

A word is slit-scanned into view through fluted slices, with a speed stat in the caption

- Install: `npx shadcn@latest add @remocn/slit-scan`
- Vibe: premium
- Natural length: 98f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/slit-scan
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SlitScan } from "@/components/remocn/slit-scan";

const SlitScanScene = () => (
  <SlitScan word="Faster." caption="First render in 1.8s, down from 4.7s" />
);

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

A word streaks through vertical fluted slices and resolves into clean type, then a caption with a stat fades in under it. Pass `word`, `caption` and `slices`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Faster."` | The word that resolves from the scan. |
| `caption` | `string` | `"First render in 1.8s, down from 4.7s"` | Stat line under the word. |
| `slices` | `number` | `120` | Number of vertical slices in the scan. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A speed or performance claim where a single word resolves out of a streaked, fluted blur.
- A benchmark beat with a one-line stat caption under the word.

## Don't use when
- You want the word to slow down on a key syllable — use `speed-ramp-word`.
- The word should resolve from a plain blur — use `focus-blur-resolve`.

---

# Slot Machine Roll
URL: https://remocn.dev/docs/typography/slot-machine-roll

Vertical reel scrolls each character from an old value to a new value

- Install: `npx shadcn@latest add @remocn/slot-machine-roll`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/slot-machine-roll
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SlotMachineRoll } from "@/components/remocn/slot-machine-roll";

const SlotMachineRollScene = () => (
  <SlotMachineRoll from="$99" to="$199" fontSize={120} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"$99"` | Starting value shown before the reel rolls |
| `to` | `string` | `"$199"` | Target value the reel settles on |
| `fontSize` | `number` | `120` | Font size in pixels. Used to compute reel travel distance. |
| `color` | `string` | `"#171717"` | Text color |
| `fontWeight` | `number` | `700` | CSS font-weight |
| `speed` | `number` | `1` | Multiplier for animation speed |
| `className` | `string` | — | Optional className passed to the outer text span |

## Use when
- Revealing a price change, plan upgrade, or before/after value where the string includes symbols (`$`, `%`, `×`).
- You want a playful, casino-reel feel on a pricing or comparison slide.
- The values are short (1–6 characters) and the character-by-character drum motion will be legible.

## Don't use when
- The value is a large pure integer like `1,240,000` — use `rolling-number` which animates each decimal place independently and reads as a serious data metric.
- The text is more than ~6 characters — long strings become hard to read while the reel spins; use `staggered-fade-up` to reveal a longer phrase.
- The brand tone is formal or data-driven — the slot machine metaphor is inherently playful; use `rolling-number` for a composed odometer feel.

---

# Soft Blur In
URL: https://remocn.dev/docs/typography/soft-blur-in

Per-character fade-in with a gentle blur and upward motion

- Install: `npx shadcn@latest add @remocn/soft-blur-in`
- Vibe: premium
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/soft-blur-in
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SoftBlurIn } from "@/components/remocn/soft-blur-in";

const SoftBlurInScene = () => (
  <SoftBlurIn text="Think different." blur={12} fontSize={72} />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { SoftBlurIn } from "@/components/remocn/soft-blur-in";
import { Backdrop } from "@/components/remocn/backdrop";

const SoftBlurInScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SoftBlurIn text="Think different." blur={12} fontSize={72} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `blur` | `number` | `12` | Initial blur radius in pixels. Animates down to 0 per character. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A hero headline needs the Apple-style per-character soft reveal — premium, airy, cinematic.
- The text is long enough that a word-by-word stagger would take too long; per-character stagger with blur reads faster.
- The overall scene is clean and bright, letting the blur-clear motion read clearly against the background.

## Don't use when
- You want a hard exit animation — `soft-blur-in` is an entrance only; pair with `blur-out-up` in a `<Sequence>` for a matching exit.
- The vibe is tech, gritty, or high-energy — the soft blur reads as refined and calm; use `rgb-glitch-text` or `tracking-in` for a sharper feel.
- You are swapping between two texts — use `shared-axis-z` or `shared-axis-y` which handle both the outgoing and incoming content.

---

# Sold Out
URL: https://remocn.dev/docs/typography/sold-out

A stock counter races to zero, then a tilted chrome 'SOLD OUT' band slams across.

- Install: `npx shadcn@latest add @remocn/sold-out`
- Vibe: playful
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/sold-out
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SoldOut } from "@/components/remocn/sold-out";

const SoldOutScene = () => <SoldOut stock={64} unit="LEFT" stamp="SOLD OUT" tail="every launch." />;

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

'128 LEFT' punches in, the reels race down to ten, then tick down hard with a LOW STOCK flash and red figures. At zero the diagonal band slams across with the stamp, and a subline rises. Pass `stock`, `unit`, `stamp`, `lead` and `tail`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `stock` | `number` | `128` | Stock when the shot opens; it races down to zero. |
| `unit` | `string` | `"LEFT"` | Word after the counter. |
| `warning` | `string` | `"LOW STOCK"` | Tag that flashes once the stock hits ten. |
| `stamp` | `string` | `"SOLD OUT"` | Set huge on the diagonal band at zero. |
| `lead` | `string` | `"Restocking:"` | Subline lead, in the grotesk. |
| `tail` | `string` | `"every launch."` | Subline accent, in the serif italic. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `accent` | `string` | — | Unused; kept for API parity, the band uses a fixed chrome gradient. |

## Use when
- A scarcity beat for a limited drop, showing stock draining before a sold-out stamp.
- A launch moment where a number should create urgency with a low-stock warning flash.
- A teaser that ends on a one-line subline about the next release.

## Don't use when
- You count down to a live time rather than draining stock — use `drop-timer`.
- You just need a number to change smoothly to a target — use `number-wheel`.
- The number should climb up as a positive stat — use `rolling-number`.

---

# Speed Ramp Word
URL: https://remocn.dev/docs/typography/speed-ramp-word

Time slows on the key word as it warms to a gradient, with a timecode HUD

- Install: `npx shadcn@latest add @remocn/speed-ramp-word`
- Vibe: premium
- Natural length: 119f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/speed-ramp-word
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpeedRampWord } from "@/components/remocn/speed-ramp-word";

const SpeedRampWordScene = () => (
  <SpeedRampWord text="Everything changes in an instant." keyWord="instant" hud />
);

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

The phrase rushes across the frame, then time slows on the key word as it warms to a gradient, with a small timecode and speed readout slowing alongside. Pass `text` and `keyWord`; set `hud` to false to hide the readout. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Everything changes in an instant."` | The phrase that rushes across. |
| `keyWord` | `string` | `"instant"` | The word inside `text` that drops into slow motion. Defaults to the last word. |
| `hud` | `boolean` | `true` | Show the small timecode and speed readout that slow down with the shot. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A line that rushes by and drops into slow motion on one key word for emphasis.
- A performance or instant-feel beat where a timecode HUD sells the speed ramp.

## Don't use when
- You want a streaked blur resolving into a word — use `slit-scan`.
- The line should just be typed in — use `typewriter`.

---

# Spine Turn
URL: https://remocn.dev/docs/typography/spine-turn

Titles rise in large, then turn 90 degrees to become book spines along the bottom rule.

- Install: `npx shadcn@latest add @remocn/spine-turn`
- Vibe: clean
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/spine-turn
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpineTurn } from "@/components/remocn/spine-turn";

const SpineTurnScene = () => <SpineTurn titles={["Kickoff", "Deep dive", "Wrap-up"]} hold={26} />;

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

Each title rises in large over a hairline rule, holds, then rotates 90 degrees and shrinks into a spine at the bottom while the next title enters. The last title stays large. Pass `titles` and `hold`; `accent` and `background` override the colors, and it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `titles` | `string[]` | `["Kickoff", "Deep dive", "Wrap-up"]` | Titles in order; each turns into a spine except the last. |
| `hold` | `number` | `26` | Frames each title holds before it turns. |
| `accent` | `string` | — | Hero title color. Defaults to the theme accent. |
| `background` | `string` | — | Stage color. Use "transparent" to composite over other layers. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |

## Use when
- An agenda or chapter sequence where each title hands off to the next and stacks as a spine.
- A clean explainer that needs to show progress through three or four sections.
- A recap beat where earlier points shrink into a growing row while the newest one stays large.

## Don't use when
- You want a numbered list that highlights row by row — use `index-list`.
- Each step needs its own full beat with a number — use `three-steps`.
- The titles should just replace each other with no history — use `fade-through`.

---

# Split Word
URL: https://remocn.dev/docs/typography/split-word

A huge word is cut open by a hairline and a second word slides into the gap.

- Install: `npx shadcn@latest add @remocn/split-word`
- Vibe: premium
- Natural length: 94f @ 30fps

## Installation

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

## Usage

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

const SplitWordScene = () => <SplitWord word="Now" insert="Available" accent="#3B5BFD" />;

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

`word` rises in letter by letter, a hairline cuts through its middle, and the two halves slide apart to open an aurora-gradient band where `insert` sits. The halves then settle back with a small offset. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Now"` | The huge word that gets split open. |
| `insert` | `string` | `"Available"` | The word revealed inside the gap. |
| `accent` | `string` | `"#3B5BFD"` | Color of the hairline cut. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A 'Now Available' style reveal where a status word appears inside the headline itself.
- A premium announcement where one word is split to let a second word through a gradient sky.
- A short two-word message that should feel like the first word opens up to reveal the second.

## Don't use when
- You want a gradient slash to wipe a large title in — use `slash-wipe`.
- The words should build up one after another into a phrase — use `kinetic-center-build`.
- The reveal is plain text appearing, not a physical split — use `typewriter`.

---

# Spotlight Text
URL: https://remocn.dev/docs/typography/spotlight-text

A spotlight travels across a dark headline, 'Launch videos, in code.', with a mono eyebrow

- Install: `npx shadcn@latest add @remocn/spotlight-text`
- Vibe: tech
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/spotlight-text
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpotlightText } from "@/components/remocn/spotlight-text";

const SpotlightTextScene = () => (
  <SpotlightText title="Launch videos, in code." eyebrow="remocn 2.0" />
);

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

A soft spotlight enters and glides across the single-line headline, lighting it as it passes and widening until the whole line is lit. Pass `title` and `eyebrow`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Launch videos, in code."` | The headline the light travels across. One line. |
| `eyebrow` | `string` | `"remocn 2.0"` | Tiny mono label above the headline's left edge. Empty to hide. |
| `accent` | `string` | `"#3B5BFD"` | Faint tint at the rim of the spotlight, and the eyebrow marker. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A tech or developer-tool headline revealed by a spotlight that travels across dark type.
- An opener with a tiny mono eyebrow label above a one-line title.

## Don't use when
- You want a bright band of shine over visible text — use `shimmer-sweep`.
- The headline wraps over several lines — use `line-by-line-slide`.

---

# Spring Scale In
URL: https://remocn.dev/docs/typography/spring-scale-in

Words pop in with a soft overshoot scale, like a spring settling into place

- Install: `npx shadcn@latest add @remocn/spring-scale-in`
- Vibe: playful
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/spring-scale-in
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpringScaleIn } from "@/components/remocn/spring-scale-in";

const SpringScaleInScene = () => (
  <SpringScaleIn text="Fast. Crisp. Fluid." staggerDelay={3} scaleFrom={0.7} />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { SpringScaleIn } from "@/components/remocn/spring-scale-in";
import { Backdrop } from "@/components/remocn/backdrop";

const SpringScaleInScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SpringScaleIn text="Fast. Crisp. Fluid." staggerDelay={3} scaleFrom={0.7} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `staggerDelay` | `number` | `3` | Per-word delay in frames between each word popping in. |
| `scaleFrom` | `number` | `0.7` | Starting scale each word grows from. The easing overshoots slightly past 1 before settling. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- The scene calls for energy and bounce — product launches, celebration moments, fun CTAs.
- You want each word to feel like it physically snaps into place, giving kinetic weight to short phrases.
- The audience is consumer-facing and a playful entrance matches the brand tone.

## Don't use when
- The brand is serious, corporate, or premium — spring bounce reads as casual; use `scale-down-fade` or `soft-blur-in` for a composed entrance instead.
- The text is long — many words bouncing in rapid succession becomes visually noisy; use `staggered-fade-up` for a calmer word-by-word reveal.
- You need precise timing for a word to land on a beat — spring physics are frame-accurate but the overshoot makes the visual "land" slightly after the spring resolves.

---

# Squeeze In
URL: https://remocn.dev/docs/typography/squeeze-in

Characters appear one by one, then the whole word squeezes as the last one lands

- Install: `npx shadcn@latest add @remocn/squeeze-in`
- Vibe: premium
- Natural length: 34f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/squeeze-in
```

## Usage

The word is uncovered by an invisible wipe travelling left to right — as if a background-colored rectangle slides off the text, revealing character after character. Once the wipe clears the last character, every letter gap compresses leftward toward the first character simultaneously — one unified gap, so the word reads as settling tighter against its first letter. Motion profile measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SqueezeIn } from "@/components/remocn/squeeze-in";

const SqueezeInScene = () => <SqueezeIn text="Remocn" />;

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

```tsx
import { Composition } from "remotion";
import { SqueezeIn } from "@/components/remocn/squeeze-in";
import { Backdrop } from "@/components/remocn/backdrop";

const SqueezeInScene = () => (
  <Backdrop fill={{ type: "color", value: "#09090b" }}>
    <SqueezeIn text="Remocn" color="#fafafa" />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to assemble |
| `fontSize` | `number` | `72` | Font size in pixels |
| `stagger` | `number` | `3` | Frames of wipe travel per character; total reveal lasts stagger times the character count |
| `squeeze` | `number` | `0.03` | Extra gap between characters in em, collapsed to zero as one when the last character lands |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A wordmark or short title should be uncovered by a clean wipe, as if a background-colored cover slides off it.
- You want the signature detail where the arrival of the last character compresses every letter gap as one — the word visibly settles tighter.
- The animation must stay subtle: no blur, no bounce, just typography breathing in.

## Don't use when
- You want the whole word to collapse from a wide tracked-out state with blur — use `tracking-in`.
- Characters should rise or drop into place — use `per-character-rise` or `top-down-letters`.
- You need a typing rhythm with a caret — use `typewriter`.

---

# Squeeze Out
URL: https://remocn.dev/docs/typography/squeeze-out

Condensed text squeezes out line by line and relaxes into its full width.

- Install: `npx shadcn@latest add @remocn/squeeze-out`
- Vibe: clean
- Natural length: 64f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/squeeze-out
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SqueezeOut } from "@/components/remocn/squeeze-out";

const SqueezeOutScene = () => (
  <SqueezeOut text="Freshly pressed frames." highlight="frames" />
);

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

Each glyph leaves its line as a narrow squeezed shape and relaxes into full width, with lines starting in overlap from top to bottom. The text is balanced across up to five lines automatically. Pass `text`, and `highlight` with words to set in the accent color. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Freshly pressed frames."` | The line to squeeze out; wraps across up to five lines. |
| `highlight` | `string` | `""` | Space-separated words to set in the accent color. |
| `accent` | `string` | — | Color of highlighted words; defaults to the theme ink. |
| `background` | `string` | — | Override the background color; use "transparent" to composite over your own. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |

## Use when
- A headline that should feel pressed out and then settling, like a fresh print.
- A short statement over several lines where you want a steady line-by-line rhythm.
- A tagline with one or two words to call out in the accent color.

## Don't use when
- You want lines sliding up with a mask - use `mask-reveal-up`.
- Each line should slide in as a whole, not squeeze glyph by glyph - use `line-by-line-slide`.
- The text should appear as if typed - use `typewriter`.

---

# Stack Letters
URL: https://remocn.dev/docs/typography/stack-letters

Letters tumble and stack into place to spell a caps word over a warm gradient

- Install: `npx shadcn@latest add @remocn/stack-letters`
- Vibe: clean
- Natural length: 106f @ 30fps

## Installation

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

## Usage

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

const StackLettersScene = () => <StackLetters word="SHIPPED" accent="#3B5BFD" />;

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

Letters drop in one by one and stack into a tower, which rocks and topples; each letter then tumbles and lands in a row that spells the word, ticking a ground rule as it lands. Pass `word` (a short caps word works best) and `accent`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"STACK"` | The word to stack; short caps words fit best. |
| `accent` | `string` | `"#3B5BFD"` | Color of the landing ticks on the ground rule. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A one-word title card for a release or milestone where the letters should physically land.
- A playful, tactile reveal of a product or feature name over a warm gradient.
- A cold open that needs a single heavy beat before the real content starts.

## Don't use when
- The message is a full sentence or several words — use `word-stack` for a stacked poster.
- You want a calm, polished word reveal with no physics — use `bottom-up-letters`.
- You need the text to stay readable for a long hold while it animates — use `per-character-rise`.

---

# Staggered Fade Up
URL: https://remocn.dev/docs/typography/staggered-fade-up

Words slide up and fade in sequentially with a wave-like cascade

- Install: `npx shadcn@latest add @remocn/staggered-fade-up`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/staggered-fade-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StaggeredFadeUp } from "@/components/remocn/staggered-fade-up";

const StaggeredFadeUpScene = () => (
  <StaggeredFadeUp text="Ship videos faster" staggerDelay={4} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate. Split on spaces into words. |
| `staggerDelay` | `number` | `4` | Frames between the start of each word's animation |
| `distance` | `number` | `20` | Vertical distance in pixels each word travels upward |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier (1 = normal, 2 = twice as fast) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A headline or body sentence is long and a simpler single-unit entrance would feel flat.
- You want a neutral, versatile word-by-word reveal that works across any brand tone.
- You need the text fully on screen by a known frame — `staggerDelay` × word count gives a predictable total duration.

## Don't use when
- The text is very short (1–2 words) and the stagger has nothing to reveal gradually — use `scale-down-fade` or `spring-scale-in` for a single-unit entrance with more impact.
- You want a per-character (not per-word) reveal — use `soft-blur-in` for character-level stagger with a premium blur feel.
- The scene needs an exit animation — staggered-fade-up is entrance only; compose with a separate exit primitive inside a `<Sequence>`.

---

# Story Dip
URL: https://remocn.dev/docs/typography/story-dip

Three timestamped story lines enter in columns: a snag drops low and dims, then the resolution climbs and lights up.

- Install: `npx shadcn@latest add @remocn/story-dip`
- Vibe: paper
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/story-dip
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StoryDip } from "@/components/remocn/story-dip";

const StoryDipScene = () => (
  <StoryDip
    setup={{ slug: "Wednesday, 4:00 PM", line: "The film was one render away." }}
    snag={{ slug: "4:05 PM", line: "Then the client sent a new logo." }}
    resolution={{ slug: "4:15 PM", line: "One prop later, every scene had it." }}
  />
);

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

Three timestamped lines enter side by side, or in two columns on a tall frame. The setup appears first, the snag then drops lower and dims, and the resolution rises to the top and turns accent-colored. Pass `setup`, `snag` and `resolution` as `{ slug, line }`, where `slug` is the small timestamp. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `setup` | `{ slug: string; line: string }` | `DEFAULT_SETUP` | First beat: a small timestamp and the line. |
| `snag` | `{ slug: string; line: string }` | `DEFAULT_SNAG` | Second beat; it drops lower and dims. |
| `resolution` | `{ slug: string; line: string }` | `DEFAULT_RESOLUTION` | Third beat; it climbs to the top in the accent color. |
| `accent` | `string` | — | Color of the timestamps and the lit resolution line. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A short anecdote in three beats, such as setup, a snag and the fix, each with its own timestamp.
- A customer or founder story where the middle line should visibly dip before the answer rises.

## Don't use when
- The story is a night-to-morning arc told over changing grounds — use `overnight`.
- You only need one timestamped line — use `crunch`.
- The text is a spoken quote with attribution — use `said-who`.

---

# Stretch In
URL: https://remocn.dev/docs/typography/stretch-in

Letters fly in from off-canvas and smear horizontally on the way — a vertex-lag deformation, not a scale

- Install: `npx shadcn@latest add @remocn/stretch-in`
- Vibe: playful
- Natural length: 48f @ 30fps

## Installation

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

## Usage

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

const StretchInScene = () => <StretchIn text="REMOCN" />;

export const RemotionRoot = () => (
  <Composition
    id="StretchIn"
    component={StretchInScene}
    durationInFrames={60}
    fps={30}
    width={1920}
    height={1080}
  />
);
```

The letters are geometry, not text: glyph contours are parsed out of the font
file (`opentype.js`), so the animation can reach inside the letterforms. Each
vertex starts its travel late in proportion to how far it sits from the
letter's leading edge — the leading edge lands first, the trailing edge catches
up, and the letter smears without its stems changing width. Counters (the holes
in P, O, R) go through the same deformation, so they never detach.

`fontUrl` defaults to Anton served from Google Fonts' static CDN, so it works
out of the box; point it at any `.ttf`/`.otf` URL to change the face. The
render is held until the font file has loaded.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"REMOCN"` | The text to fly in — short display words read best |
| `fontUrl` | `string` | `Anton (gstatic ttf)` | URL of a .ttf/.otf font file the glyph outlines are parsed from |
| `fontSize` | `number` | `510` | Font size in comp pixels |
| `letterSpacing` | `number` | `0` | Extra spacing between letters in comp pixels |
| `fill` | `string` | `"#ffffff"` | Fill of the letterforms |
| `strokeWidth / stroke` | `number / string` | `0 / "#ffffff"` | Set `fill` to "none" and `strokeWidth` to 2 for the wireframe authoring view |
| `width / height` | `number` | `1920 / 1080` | Coordinate space of the composition. The word centers horizontally |
| `baselineY` | `number` | `vertically centered` | Baseline of the word in comp pixels |
| `entryStart` | `number` | `0` | Frame the first letter starts its travel |
| `entryStagger` | `number` | `3` | Frames between consecutive letters' entries |
| `travelFrames` | `number` | `33` | Frames one letter takes from off-canvas to rest |
| `travelDistance` | `number` | `1500` | How far off-canvas right the letters start, in comp pixels |
| `vertexLagFrames` | `number` | `3.5` | Frames the trailing edge lags the leading edge. This is the smear |
| `curveSteps` | `number` | `8` | Line segments each glyph curve is sampled into — every vertex must take part in the deformation |
| `className` | `string` | — | Optional className passed to the wrapper |

Inspired by [Stretched Type In After Effects](https://www.youtube.com/watch?v=H_z6XJ-b9bE) by Ben Marriott.

## Use when
- A heavy display word needs a fast, physical entrance where the letterforms visibly deform — bars stretch long while stems keep their exact width.
- You want per-letter rhythm: each letter enters on its own beat and snaps to rest crisp (tune `entryStagger` and `travelFrames`).
- Any text and any font should work — glyph contours are extracted from a real font file at runtime via `opentype.js`.

## Don't use when
- The type is small or body-size — the smear reads at display sizes; use `per-character-rise` for smaller text.
- You can't ship or reach a font file URL — the deformation needs real glyph outlines; use `short-slide-right` for a plain slide-in.
- The look should be soft or blurred rather than elastic — use `soft-blur-in`.

---

# Strikethrough Replace
URL: https://remocn.dev/docs/typography/strikethrough-replace

Draws a strike line through the old text, then fades the new text in beneath it for an editorial correction

- Install: `npx shadcn@latest add @remocn/strikethrough-replace`
- Vibe: clean
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/strikethrough-replace
```

## Usage

Keep `from` and `to` short. The strike reads as a deliberate edit, and a long struck-out line is
hard to parse at speed.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StrikethroughReplace } from "@/components/remocn/strikethrough-replace";

const StrikethroughScene = () => (
  <StrikethroughReplace from="Manual video editing" to="One-click export" fontSize={48} />
);

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

The line draws across `from` first, then `to` fades in beneath it — so the composition needs room
for both phases. Under-budgeting cuts the reveal.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`.

```tsx
import { Composition } from "remotion";
import { Backdrop } from "@/components/remocn/backdrop";
import { StrikethroughReplace } from "@/components/remocn/strikethrough-replace";

const StrikethroughScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <StrikethroughReplace from="$99 / month" to="$29 / month" lineColor="#ff5e3a" />
  </Backdrop>
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` (required) | `string` | — | The old text — the line is drawn across this string. |
| `to` (required) | `string` | — | The replacement text, revealed beneath the struck-out line. |
| `lineColor` | `string` | `"#ff5e3a"` | Color of the strike line. Defaults to a red-orange for maximum contrast against the text. |
| `fontSize` | `number` | `48` | Font size in pixels, applied to both strings. |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color). |
| `fontWeight` | `number` | `600` | CSS font-weight. |
| `speed` | `number` | `1` | Time multiplier applied as frame × speed. |
| `className` | `string` | — | Optional className passed to the root element. |

## Use when
- Showing a problem being replaced by a solution — the strike says you are crossing this out on purpose
- A pricing or comparison beat needs the old value visibly struck out before the new one appears
- You want editorial correction grammar — old thinking struck through, new thinking revealed below

## Don't use when
- There is no old text to cross out and you just need an entrance — use `staggered-fade-up` or `soft-blur-in`
- The swap should feel smooth and spatial rather than editorial — use `shared-axis-y` or `shared-axis-z`
- Both strings are long — the struck line gets hard to read and the full animation runs 120 frames

---

# Stripe Mask
URL: https://remocn.dev/docs/typography/stripe-mask

Slanted stripes mask a two-sentence bold headline into view

- Install: `npx shadcn@latest add @remocn/stripe-mask`
- Vibe: clean
- Natural length: 100f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/stripe-mask
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StripeMask } from "@/components/remocn/stripe-mask";

const StripeMaskScene = () => <StripeMask title="Faster. Every frame." slant={18} />;

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

Slanted stripes sweep in and mask the headline into view, then widen and retract, one line per sentence. Pass `title` (it breaks after each sentence) and `slant`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Faster. Every frame."` | Headline. Breaks into a new line after each sentence. |
| `slant` | `number` | `18` | Stripe slant in degrees, leaning right. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A bold two-sentence statement that should be revealed through slanted stripes.
- A punchy mid-video claim in a clean, sporty style.

## Don't use when
- You want a single bold word slamming in — use `full-bleed-type`.
- You want a soft reveal, not stripes — use `mask-reveal-up`.

---

# Stripe Type
URL: https://remocn.dev/docs/typography/stripe-type

A word cut into horizontal bands, as in the IBM logo, slides together from alternating sides and locks, then can pass on through

- Install: `npx shadcn@latest add @remocn/stripe-type`
- Vibe: tech
- Natural length: 30f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/stripe-type
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { StripeType } from "@/components/remocn/stripe-type";

const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#2b3bff" }}>
    <StripeType text="Launch" />
  </AbsoluteFill>
);

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

The bands cover the word's ink, from the top of its tallest letter to the
bottom of its lowest, measured from the loaded font. With `stripes` bands and
a `gap` share of each pitch left empty, the first band starts at the top and
the last ends at the bottom. Each band is a copy of the text clipped to its
strip.

Band 0 enters from the left, band 1 from the right, and so on, two frames
apart, each over 16 frames with an expo ease. The word is whole at frame 30
for eight bands. `settle="solid"` closes the gaps over the next ten frames.
With `exit`, after `hold` frames the bands carry on in the direction they came
from and leave through the other side. `getStripeTypeDuration` gives the
length for any set of props.

The component paints no background and centers the word in its parent. Sizes
scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Launch"` | The word to stripe |
| `fontSize` | `number` | `180` | Font size in reference px at 720p |
| `fontWeight` | `number` | `800` | Font weight. Heavy weights stripe best |
| `fontFamily` | `string` | `Inter` | Font family |
| `color` | `string` | `"#fafafa"` | Text color |
| `stripes` | `number` | `8` | Number of bands |
| `gap` | `number` | `0.35` | Share of each band pitch left empty |
| `settle` | `"striped" \| "solid"` | `"striped"` | Keep the gaps, or close them into solid type |
| `exit` | `boolean` | `true` | Let the bands pass on through after the hold |
| `hold` | `number` | `30` | Frames the word rests before the exit |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A bold word needs a graphic, engineered entrance on a flat field, such as a product name or a section title.
- You want the striped-logo look as the resting state, or as a transition into solid type with `settle` set to solid.
- A word should enter and leave in one move: the bands arrive from alternating sides and exit through the other.

## Don't use when
- The word should split along its letters rather than in horizontal bands — use `typed-split-wipe`.
- The whole frame should fill with moving rows of type — use `type-wall`.
- A soft, quiet entrance fits better — use `mask-reveal-up`.

---

# Strobe Words
URL: https://remocn.dev/docs/typography/strobe-words

Big words strobe in on flashing fields at a tightening rhythm, then land on a poster with the logo.

- Install: `npx shadcn@latest add @remocn/strobe-words`
- Vibe: premium
- Natural length: 68f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/strobe-words
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StrobeWords } from "@/components/remocn/strobe-words";

const StrobeWordsScene = () => <StrobeWords words={["Plan.", "Write.", "Render.", "Ship."]} accent="#3B5BFD" />;

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

The words cycle on hard cuts across glow, dark and light fields, with beats that start slow and tighten, then the last word holds as a poster with the logo below. Pass `words` and optionally `rhythm` (frames per cut) and `logo`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["Plan.", "Write.", "Render.", "Ship."]` | Words that strobe in order; the last one holds as the poster. |
| `rhythm` | `number[]` | — | Frames each cut holds. Defaults to a tightening beat. |
| `logo` | `React.ReactNode` | — | Replaces the default logo on the poster. |
| `accent` | `string` | `"#3B5BFD"` | Color of trailing punctuation on the dark and light fields. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A fast opener that cuts through a list of verbs, such as Plan, Write, Render, Ship.
- A hype beat where words flash on accent, dark and light fields before the final word holds.
- A launch sting that needs to end on the last word over a horizon glow with your logo.

## Don't use when
- The words should blink at a fixed rhythm and then cut to the logo with a one-line tagline — use `blink-cut`.
- Each word needs to slam in one at a time and stay on screen — use `full-bleed-type`.
- The pace should be gentle and readable, not flashing — use `staggered-fade-up`.

---

# Tagline Justify
URL: https://remocn.dev/docs/typography/tagline-justify

A tagline springs in word by word and sets as a justified block, with one word in gradient serif italic.

- Install: `npx shadcn@latest add @remocn/tagline-justify`
- Vibe: clean
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tagline-justify
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TaglineJustify } from "@/components/remocn/tagline-justify";

const TaglineJustifyScene = () => (
  <TaglineJustify
    text="Your launch deserves a film as good as the product."
    highlight="film"
  />
);

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

Words spring in one after another and the line breaks stretch and scale so every line fills the same width, like a justified column. The `highlight` word is set in serif italic and fills with a gradient, then a hairline and a logo land beneath. The default logo is the Remocn wordmark, so pass your own `logo`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | — | Pre-split words; overrides text when given. |
| `text` | `string` | `"Your launch deserves a film as good as the product."` | Tagline to justify; it is split on spaces. |
| `highlight` | `string` | `"film"` | Word set in gradient serif italic. |
| `logo` | `React.ReactNode` | — | Logo node under the block; defaults to the Remocn wordmark. |
| `accent` | `string` | `"#3B5BFD"` | Color of the short accent segment on the hairline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A closing tagline that should lock up as a tidy poster block with a logo beneath it.
- A one-sentence brand statement where a single key word deserves a gradient italic accent.

## Don't use when
- A paragraph should reflow its column width rather than set as a fixed block — use `column-reflow`.
- You want a three-line headline with parallax depth — use `parallax-lockup`.
- The text should crop in tight line by line over ruled lines — use `poster-crop`.

---

# Tategaki Turn
URL: https://remocn.dev/docs/typography/tategaki-turn

Words drop in as vertical columns, then swing upright into one horizontal line.

- Install: `npx shadcn@latest add @remocn/tategaki-turn`
- Vibe: clean
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tategaki-turn
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TategakiTurn } from "@/components/remocn/tategaki-turn";

const TategakiTurnScene = () => <TategakiTurn text="Read it both ways." highlight={3} />;

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

Each word of `text` drops in as a vertical column, letter by letter. After a hold, the columns swing 90 degrees and travel into a single horizontal line while the type scales up. The `highlight` word, the last by default, takes the accent color; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Read it both ways."` | The phrase; each word becomes a vertical column. |
| `highlight` | `number` | — | Index of the word set in the accent color. Defaults to the last. |
| `hold` | `number` | `16` | Frames the vertical columns hold before they turn. |
| `accent` | `string` | — | Highlight color. Defaults to vermilion. |
| `background` | `string` | — | Stage color. Overrides the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |

## Use when
- A tagline that plays on reading direction, with vertical Japanese-style columns turning to a line.
- A clean explainer beat where a short phrase should rearrange itself as the camera pulls out.
- A minimal title with a single accent word, for a calm editorial tone.

## Don't use when
- The phrase is long and should type out naturally — use `typewriter`.
- Words should build into a phrase from the center — use `kinetic-center-build`.
- You want a simple staggered entrance with no rotation — use `staggered-fade-up`.

---

# They Are You
URL: https://remocn.dev/docs/typography/they-are-you

Short statements about someone rise one by one, then the leading They flips to an accent You in each.

- Install: `npx shadcn@latest add @remocn/they-are-you`
- Vibe: playful
- Natural length: 93f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/they-are-you
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TheyAreYou } from "@/components/remocn/they-are-you";

const TheyAreYouScene = () => (
  <TheyAreYou
    facts={[
      "They write React for a living.",
      "They have a launch on Monday.",
      "They have never touched a timeline.",
    ]}
    from="They"
    to="You"
  />
);

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

Each fact rises in with its leading `from` word (They by default) in medium weight. After a beat the leading words flip one by one to the `to` word (You) in the accent color. Each fact must begin with the `from` word to flip; pass `facts`, `from` and `to`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `facts` | `string[]` | — | Statements that each begin with the from word. |
| `from` | `string` | `"They"` | Leading word that gets replaced, such as They. |
| `to` | `string` | `"You"` | Replacement word shown in the accent color, such as You. |
| `accent` | `string` | — | Color of the replacement word; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- An audience-recognition beat that describes the viewer in the third person, then turns it on them.
- A short list of two to four traits or situations that should land as this is you.

## Don't use when
- You want a list of audiences ending in a big and you — use `and-you`.
- The list is credits pointing at one person — use `crew-of-one`.
- A single phrase should turn on its last word — use `turnabout`.

---

# Three Steps
URL: https://remocn.dev/docs/typography/three-steps

Three large numerals light up along a line as a dot travels, each with a title and detail.

- Install: `npx shadcn@latest add @remocn/three-steps`
- Vibe: clean
- Natural length: 118f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/three-steps
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ThreeSteps } from "@/components/remocn/three-steps";

const ThreeStepsScene = () => (
  <ThreeSteps
    steps={[
      { title: "Install", detail: "Add a scene with the CLI" },
      { title: "Compose", detail: "Arrange scenes in React" },
      { title: "Render", detail: "Export an MP4" },
    ]}
    outcome="Your launch video, shipped"
  />
);

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

A line draws across the frame and ghost numerals appear, then a dot travels along it, lighting each numeral in a gradient as its title and detail rise in. The final step also shows the `outcome` in serif italic. Pass `steps` as `{ title, detail? }`, an `eyebrow` label, and the `outcome`. It ships light and dark; three steps fit best.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `{ title: string; detail?: string }[]` | `DEFAULT_STEPS` | Steps left to right, each with a title and optional detail. |
| `eyebrow` | `string` | `"How it works"` | Small caps label above the line. |
| `outcome` | `string` | `"Your launch video, shipped"` | Serif italic line shown under the last step. |
| `accent` | `string` | `"#3B5BFD"` | Color of the outcome line. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A how-it-works beat that explains the product in three steps, such as install, compose, render.
- A process summary that ends on a single outcome line for the last step.

## Don't use when
- You have a longer feature list that needs rows and a highlight — use `index-list`.
- You want three one-word features with notes and progress ticks — use `feature-trio`.
- The steps should read like indented code lines — use `indent-steps`.

---

# Tittle Drop
URL: https://remocn.dev/docs/typography/tittle-drop

Dots of the i and j drop in last onto 'Ship it in minutes.' on a light ground

- Install: `npx shadcn@latest add @remocn/tittle-drop`
- Vibe: paper
- Natural length: 175f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tittle-drop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TittleDrop } from "@/components/remocn/tittle-drop";

const TittleDropScene = () => <TittleDrop title="Ship it in minutes." subline="Launch videos from ready-made Remotion components." accent="#3B5BFD" />;

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

The headline fades in word by word with its i and j dots missing, while a bubble of dots waits above. The dots hop down one at a time onto the letters, the last one becoming the full stop, then the subline fades in. Pass `title`, `subline` and `accent`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Ship it in minutes."` | Headline text; every i and j is set dotless and a trailing period stays open. |
| `subline` | `string` | `"Launch videos from ready-made Remotion components."` | Small grey line under the headline. |
| `accentDot` | `number` | `-1` | Which landing dot takes the accent (0-based, negative counts from the end). |
| `accent` | `string` | `"#3B5BFD"` | Color of the accented dot. |
| `theme` | `"dark" \| "light"` | `"light"` | Color scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A hero line for a launch video where a small, witty typographic detail makes the headline memorable.
- A calm product tagline beat with a supporting subline that appears after the main line lands.
- A title that contains several i or j letters, so the dots have places to hop.

## Don't use when
- The headline has no i, j or trailing full stop, so nothing lands — use `per-word-crossfade`.
- You need a fast, high-energy opener rather than a slow playful build — use `staggered-fade-up`.
- The line is long or multi-line, where the dot queue would drag — use `line-by-line-slide`.

---

# Tldr on Top
URL: https://remocn.dev/docs/typography/tldr-on-top

A short TL;DR summary stacks above a dense paragraph that fades into the background.

- Install: `npx shadcn@latest add @remocn/tldr-on-top`
- Vibe: clean
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tldr-on-top
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TldrOnTop } from "@/components/remocn/tldr-on-top";

const TldrOnTopScene = () => (
  <TldrOnTop label="TL;DR" lines={["Every scene is a component.", "Your brand is one file."]} />
);

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

A label and summary lines open one by one above a long body paragraph that dims behind them. Pass `lines` for the summary, `text` for the body, and `label` to rename the tag. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `DEFAULT_TEXT` | Long body paragraph shown dimmed behind the summary. |
| `label` | `string` | `"TL;DR"` | Tag shown above the summary lines. |
| `lines` | `string[]` | `DEFAULT_LINES` | Summary lines that open one by one on top. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A story beat that admits the full explanation is long and gives the short version first.
- A launch recap where three one-line takeaways should sit above the full backstory.
- A text-heavy scene that needs a clear reading order without cutting the long copy.

## Don't use when
- You only have one short claim and no long body — use `less-more` for a two-line contrast.
- The points should be stepped through and dimmed in sequence — use `what-sticks`.
- You want the long copy to be the hero, filling the page — use `whole-page`.

---

# Top-Down Letters
URL: https://remocn.dev/docs/typography/top-down-letters

Letters descend from above in a pronounced staircase, one symbol at a time

- Install: `npx shadcn@latest add @remocn/top-down-letters`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/top-down-letters
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TopDownLetters } from "@/components/remocn/top-down-letters";

const TopDownLettersScene = () => (
  <TopDownLetters text="Signal" staggerDelay={3} distance={46} />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { TopDownLetters } from "@/components/remocn/top-down-letters";
import { Backdrop } from "@/components/remocn/backdrop";

const TopDownLettersScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <TopDownLetters text="Signal" staggerDelay={3} distance={46} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `staggerDelay` | `number` | `3` | Per-character delay in frames. Larger values make the staircase more pronounced. |
| `distance` | `number` | `46` | Vertical travel in pixels each letter descends from above. Animates to 0. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A single uppercase word or short acronym should enter with structural weight — each letter landing like a stamp.
- The scene calls for a sharp, graphic title card where the sequential drop reinforces the word's rhythm.
- You want per-letter stagger with a pronounced vertical distance (default 46px) that reads clearly at large font sizes.

## Don't use when
- The text is more than ~8 characters — many letters dropping sequentially stretches the animation and the last letters feel delayed; use `staggered-fade-up` for longer phrases.
- You want blur or softness on entry — `top-down-letters` is zero-blur by design; use `soft-blur-in` for the Apple-style per-character blur reveal.
- The stagger direction should be horizontal or spatial — use `short-slide-right` for a left-to-right group glide or `tracking-in` for a letter-spacing collapse instead.
- The letters should rise from below rather than drop from above — use `bottom-up-letters`, the identical-cadence upward mirror.

---

# Torn Edge
URL: https://remocn.dev/docs/typography/torn-edge

A torn paper sheet rips away to reveal a bold headline printed on the gradient stage

- Install: `npx shadcn@latest add @remocn/torn-edge`
- Vibe: paper
- Natural length: 76f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/torn-edge
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TornEdge } from "@/components/remocn/torn-edge";

const TornEdgeScene = () => <TornEdge title="Make it yours." accent="#3B5BFD" />;

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

A gradient paper sheet tears across the frame, the halves part, and the headline is printed on the stage underneath. Pass `title` and `accent` (the mid colour of the sheet gradient); it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Make it yours."` | Headline printed on the stage underneath the sheet. |
| `accent` | `string` | `"#3B5BFD"` | Mid colour of the sheet's gradient (gradients.sh "fluted"). |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A reveal that rips a paper sheet away to show a bold headline underneath.
- A tactile, handmade moment between more polished scenes.

## Don't use when
- You want a clean wipe with no paper texture — use `slash-wipe`.
- You want a soft fade into the headline — use `fade-through`.

---

# Tracking In
URL: https://remocn.dev/docs/typography/tracking-in

Letter-spacing collapses and blur clears with a springy entrance

- Install: `npx shadcn@latest add @remocn/tracking-in`
- Vibe: premium
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tracking-in
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TrackingIn } from "@/components/remocn/tracking-in";

const TrackingInScene = () => (
  <TrackingIn text="REMOCN" startTracking={0.6} startBlur={14} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `startTracking` | `number` | `0.5` | Initial letter-spacing in em. Animates down to -0.03em. |
| `startBlur` | `number` | `12` | Initial blur radius in pixels. Animates down to 0. |
| `fontSize` | `number` | `96` | Font size in pixels |
| `fontWeight` | `number` | `700` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier (1 = normal, 2 = twice as fast) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A title word or brand name should feel like it is focusing into place — tracking collapse is the right metaphor for clarity, precision, or sharpness.
- The design is typographically driven and the letter-spacing motion is the centerpiece of the entrance.
- A premium or cinematic tone is required — the spring-driven collapse reads as designed and intentional, not incidental.

## Don't use when
- You want per-character stagger — `tracking-in` moves all letters as one unit; use `soft-blur-in` for a per-character blur-and-rise stagger instead.
- The text is a sentence rather than a single bold word — wide initial tracking on a long phrase is illegible until it collapses; use `staggered-fade-up` for multi-word body text.
- The scene is playful or casual — the typographic tracking motion reads as serious and editorial; use `spring-scale-in` for a bouncy entrance instead.

---

# Turnabout
URL: https://remocn.dev/docs/typography/turnabout

One sentence turns into its mirror image as words flip, ending with an accent-colored phrase.

- Install: `npx shadcn@latest add @remocn/turnabout`
- Vibe: clean
- Natural length: 106f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/turnabout
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Turnabout } from "@/components/remocn/turnabout";

const TurnaboutScene = () => (
  <Turnabout before="You work for the video." after="The video works for you." highlight="you." />
);

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

The `before` sentence enters word by word, then turns into the `after` sentence while shared words travel to their new spots. The `highlight` phrase in `after` lights up in the accent color. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"You work for the video."` | Opening sentence. |
| `after` | `string` | `"The video works for you."` | Sentence it turns into. |
| `highlight` | `string` | `"you."` | Phrase inside `after` lit in the accent color. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A positioning beat that flips the framing, such as from effort for the tool to effort from the tool.
- A before-and-after claim where both lines reuse most of the same words.
- A tagline reveal that should feel like a twist rather than a swap.

## Don't use when
- The two lines share no words and just replace each other — use `layout-swap`.
- Only one word should change inside a fixed sentence — use `pinned-word`.
- You want an edit-style change with inserted words — use `word-insert`.

---

# Two Hit
URL: https://remocn.dev/docs/typography/two-hit

A two-hit headline, "Streaming now.", in white then blue, right-aligned on black

- Install: `npx shadcn@latest add @remocn/two-hit`
- Vibe: social
- Natural length: 91f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/two-hit
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TwoHit } from "@/components/remocn/two-hit";

const TwoHitScene = () => (
  <TwoHit before="Premieres Friday." after="Streaming now." hitAt={34} />
);

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

The first line appears, then at `hitAt` it is hit and replaced by the second line in the accent colour, right-aligned on a flat background. Pass `before`, `after` and `hitAt`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Premieres Friday."` | First line, shown in the base text colour. |
| `after` | `string` | `"Streaming now."` | Second line that replaces it in the accent colour. |
| `hitAt` | `number` | `34` | Frame where the second hit lands. |
| `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 two-beat teaser where a first line is replaced by a second, like a premiere card.
- A short release line with a plain statement followed by a status.

## Don't use when
- You have more than two lines to cycle — use `rewrite-bars`.
- You want a single line with no replacement — use `staggered-fade-up`.

---

# Type Fossil
URL: https://remocn.dev/docs/typography/type-fossil

A readable word carries layers of fine contours, revises itself, then compresses into a clean typographic imprint

- Install: `npx shadcn@latest add @remocn/type-fossil`
- Vibe: premium
- Natural length: 174f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/type-fossil
```

## Usage

A solid word sits in front of fine offset contours, forming a typographic slice.
Earlier versions replace one another with a clean wipe. Every contour carries
the same wording as the foreground. After the last revision, the slice's depth
compresses, the lettering straightens, and a crisp final imprint remains.

```tsx
import { TypeFossil } from "@/components/remocn/type-fossil";

export const Scene = () => <TypeFossil />;
```

All shapes render in one SVG with bounded parallel offsets. The foreground
stays opaque. During a revision, complementary clipping regions replace the
old text with the new text without a transparent crossfade. No assets, shaders,
font downloads, or simulation state are required.

## Your revisions

`text` is the final copy. Separate `drafts` with `|` or newlines; up to twelve
non-empty drafts are used. Each revision receives a full beat, and the preview
automatically adjusts its duration. Empty drafts animate just the final word's
contours. Empty final text leaves only the background.

```tsx
<TypeFossil
  text="Clarity"
  drafts="What if | Less | Closer"
  layers={20}
  depth={110}
  color="#fffaf0"
  accentColor="#e8ef9b"
  backgroundColor="#32153c"
/>
```

`layers` sets contour density. `depth` sets the slice's total thickness, which
remains bounded when the layer count changes. Long copy conservatively shrinks
to fit without stretching glyphs. A centered 1280 × 720 SVG scales into other
aspect ratios; portrait leaves extra space above and below.

## Timing

Default sequence at 30 fps and `speed={1}`:

| Frames | Motion |
| --- | --- |
| 0–16 | Contour thickness opens up behind the first word |
| 20–28 | Idea → Maybe |
| 38–46 | Maybe → Try |
| 56–64 | Try → Almost |
| 74–82 | Almost → Again |
| 92–100 | Again → Closer |
| 110–118 | Closer → Form |
| 126–174 | Contours compress and lettering straightens |
| 174–208 | Finished word holds |

Revisions start every 18 reference frames (0.6 seconds at 30 fps), with an
8-frame wipe. Each additional draft adds 18 frames. `typeFossilLength` is the
last moving frame at default props. Use `getTypeFossilDuration({ drafts, speed })`
for the actual duration including the 34-frame final hold. It returns frames
at 30 fps; multiply by `fps / 30` and round up for another frame rate.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Form"` | Final word or short phrase |
| `drafts` | `string` | `"Idea \| Maybe \| Try \| Almost \| Again \| Closer"` | Earlier versions separated by \| or newlines; up to twelve |
| `layers` | `number` | `16` | Contour count, rounded and clamped to 4–24 |
| `depth` | `number` | `100` | Slice thickness, clamped to 50–150 reference units |
| `fontSize` | `number` | `220` | Maximum font size; copy shrinks to fit |
| `fontWeight` | `number \| string` | `600` | Font weight from 100 to 900 |
| `color` | `string` | `"#302b26"` | Solid foreground lettering |
| `accentColor` | `string` | `"#a800b7"` | Contours |
| `backgroundColor` | `string` | `"#eeeae2"` | Stage background; accepts transparent |
| `speed` | `number` | `1` | Playback multiplier; zero or negative freezes the initial pose |
| `className` | `string` | — | Class on the full-frame root |

## Use when
- A creative process should move from earlier wording to a finished idea.
- A title needs a sculptural contour effect that resolves into clean typography.

## Don't use when
- Letters must morph individually between phrases — use kinetic-morph-text.
- Long paragraphs need to be read; this composition is built for words and short phrases.

---

# Type Repeater
URL: https://remocn.dev/docs/typography/type-repeater

An After Effects style repeater on a word, where copies unfold into a tunnel, a spiral or a fan behind it, breathe, then fold back into the word

- Install: `npx shadcn@latest add @remocn/type-repeater`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/type-repeater
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { TypeRepeater } from "@/components/remocn/type-repeater";

const Beat = () => (
  <AbsoluteFill style={{ backgroundColor: "#ff4d1a" }}>
    <TypeRepeater text="Repeat" mode="tunnel" color="#111111" accent="#fafafa" />
  </AbsoluteFill>
);

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

Copy 0 is the word itself and never moves. Every further copy gets one more
step of the mode's transform, scaled by the spread:

- `tunnel` grows each copy by 1.2× around the center, a zoom tunnel behind the
  word.
- `spiral` grows each copy by 1.1× and turns it 12°.
- `fan` turns copies 11° to alternating sides around a pivot below the word.

The word comes in over ten frames. The spread opens over frames 10 to 34 with
a small overshoot, breathes by 6% until frame 70, and folds back to zero by
frame 90. Copies step from `color` toward `accent` and fade with their index.
With `outline` on, the copies are outlines built from their filled glyphs by
an SVG filter, which keeps the variable font's overlapping contours out of
sight.

The component paints no background and centers the word in its parent. Sizes
scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Repeat"` | The word to repeat |
| `mode` | `"tunnel" \| "spiral" \| "fan"` | `"tunnel"` | The repeater transform |
| `copies` | `number` | `12` | Number of copies including the word |
| `fontSize` | `number` | `110` | Font size in reference px at 720p |
| `fontWeight` | `number` | `800` | Font weight |
| `fontFamily` | `string` | `Inter` | Font family |
| `color` | `string` | `"#fafafa"` | Color of the word and the first copies |
| `accent` | `string` | `"#D97757"` | Color the last copy steps to |
| `outline` | `boolean` | `true` | Draw the copies as outlines |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- One word should hit hard for a beat, with repetition giving it depth and energy around a still, readable center.
- You want a motion-graphics flourish for a title card, a section break or a loop.
- A single word needs a backdrop made from itself, in the word's color stepping to an accent.

## Don't use when
- The repeats should stack in a quiet vertical column above and below the word — use `echo-stack`.
- The whole frame should fill with scrolling rows of the word — use `type-wall`.
- The word should be carried by a spinning 3D band — use `ring-text`.

---

# Type Wall
URL: https://remocn.dev/docs/typography/type-wall

Rows of one word fill the frame, run in alternating directions at different speeds in heavy, narrow and outline faces, with an accent band through the middle

- Install: `npx shadcn@latest add @remocn/type-wall`
- Vibe: playful
- Natural length: sustained

## Installation

```bash
npx shadcn@latest add @remocn/type-wall
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { TypeWall } from "@/components/remocn/type-wall";

const Wall = () => (
  <AbsoluteFill style={{ backgroundColor: "#2b3bff" }}>
    <TypeWall text="MOTION" accent="#ff4d1a" accentText="#111111" />
  </AbsoluteFill>
);

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

Rows are `fontSize` tall and stack without gaps from the center row outward
until the frame is covered. Faces alternate between heavy Inter, narrow Anton
and outline Inter; Anton is scaled so its capitals match Inter's cap height.
The center row runs on the `accent` band. Neighbors run in opposite
directions, and each row gets its own speed and starting phase from `seed`, so
the wall never lines up into columns.

On the way in, each row wipes open from the side it enters and streams a few
tokens past before it slows to cruise, staggered two frames per row from the
center outward. The band grows from the middle over frames 6 to 20. After
that the wall runs for as long as the sequence lasts.

The wall is the one component of this set that defaults to capitals: the
effect is a wall of type. Each row loops by moving whole tokens, so it never
measures text. The component fills its parent and paints no background
outside the band.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"MOTION"` | The word repeated in every row |
| `separator` | `string` | `"·"` | Glyph between repeats |
| `fontSize` | `number` | `64` | Row height in reference px at 720p |
| `color` | `string` | `"#fafafa"` | Text and outline color |
| `accent` | `string` | `"#D97757"` | Band behind the center row |
| `accentText` | `string` | `"#0a0a0a"` | Text color on the band |
| `seed` | `number` | `7` | Seed for each row's speed and phase |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A loud full-screen beat for one word, such as a section title, a manifesto word or a transition card.
- A busy, graphic backdrop behind a short overlay that should read as pure energy.
- You want kinetic poster typography that runs for as long as the scene needs.

## Don't use when
- One strip of scrolling text is enough, as a ticker or a separator — use `infinite-marquee`.
- The rows should recede in perspective rather than fill the frame flat — use `perspective-marquee`.
- A single word should stay readable at the center with quieter repeats — use `echo-stack`.

---

# Typed Split Wipe
URL: https://remocn.dev/docs/typography/typed-split-wipe

A centered cursorless type build exits through opposing fixed-layout glyph wipes

- Install: `npx shadcn@latest add @remocn/typed-split-wipe`
- Vibe: tech
- Natural length: 75f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/typed-split-wipe
```

## Usage

The enter renders only the currently typed substring, so every hard character step remains centered. At `exitAt`, the component switches to a visually identical fixed layout. The prefix clips from right to left and suffix words clip from left to right with a stagger. While those gaps open, the anchor travels left by `anchorShift`, making the empty spaces on its two sides deliberately uneven before it closes last from both sides.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TypedSplitWipe } from "@/components/remocn/typed-split-wipe";

const TypedSplitWipeScene = () => (
  <TypedSplitWipe
    prefix="Introducing"
    anchor="X"
    suffix="Ads MCP"
  />
);

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

### With Backdrop

The component is transparent. The reference uses warm white text on an almost-black field.

```tsx
import { Composition } from "remotion";
import { Backdrop } from "@/components/remocn/backdrop";
import { TypedSplitWipe } from "@/components/remocn/typed-split-wipe";

const TypedSplitWipeScene = () => (
  <Backdrop fill={{ type: "color", value: "#101010" }}>
    <TypedSplitWipe
      prefix="Introducing"
      anchor="X"
      suffix="Ads MCP"
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `prefix` (required) | `string` | — | Leading text typed first and clipped right-to-left on exit |
| `anchor` (required) | `string` | — | Central segment that remains visible longest |
| `suffix` (required) | `string` | — | Space-delimited trailing words clipped left-to-right with a stagger |
| `typeFrames` | `number` | `30` | Frames used to type the complete line |
| `exitAt` | `number` | `50` | Frame on which the segmented exit begins |
| `exitFrames` | `number` | `20` | Frames used by the prefix wipe and final anchor close |
| `wordStagger` | `number` | `4` | Delay in frames between suffix word wipes |
| `anchorShift` | `number` | `-72` | Horizontal anchor travel in pixels during the prefix wipe |
| `fontSize` | `number` | `42` | Font size in pixels |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `color` | `string` | `"#e8e8e8"` | Text color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the text container |

## Use when
- A product or feature introduction should type itself cleanly before breaking into controlled directional fragments.
- One short anchor needs to remain visible while the surrounding words are erased independently.
- The exit must cut through glyphs without allowing the surviving text to reflow.

## Don't use when
- You need a conventional typewriter with a blinking caret and no exit — use `typewriter`.
- Every character should rise or move independently — use `per-character-rise`.
- One phrase should be consumed and replaced by another — use `caret-swap`.

---

# Typewriter
URL: https://remocn.dev/docs/typography/typewriter

Character-by-character text reveal with a deterministic blinking cursor

- Install: `npx shadcn@latest add @remocn/typewriter`
- Vibe: clean
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/typewriter
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Typewriter } from "@/components/remocn/typewriter";

const TypewriterScene = () => (
  <Typewriter text="Hello, world" charsPerSecond={22} fontSize={72} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to type out |
| `cursor` | `boolean` | `true` | Whether to render the blinking cursor at the end |
| `charsPerSecond` | `number` | `22` | Typing speed in characters per second |
| `fontSize` | `number` | `48` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `cursorColor` | `string` | `"#171717"` | Color of the blinking cursor block |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- Simulating a command being typed into a terminal or input — pairs with `terminal-simulator`.
- A title should feel "authored live" rather than appearing all at once.
- You need the reveal duration to track text length predictably (`charsPerSecond` makes it deterministic).

## Don't use when
- The text is long — typing a paragraph at a readable speed eats far more frames than a viewer will wait; use `staggered-fade-up` or `blur-out-up` instead.
- You want a designed, weighted entrance (springy, blurred, kinetic) — typing reads as plain/utilitarian; reach for `tracking-in` or `kinetic-center-build`.
- Multiple lines should reveal together — typing is inherently sequential and single-stream.
- The text is a transcript of someone speaking — use `caption-typewriter`, which types each word at the pace it was said.

---

# Typo Fix
URL: https://remocn.dev/docs/typography/typo-fix

A misspelled word is caught and corrected in place inside a short line.

- Install: `npx shadcn@latest add @remocn/typo-fix`
- Vibe: clean
- Natural length: 80f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/typo-fix
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TypoFix } from "@/components/remocn/typo-fix";

const TypoFixScene = () => (
  <TypoFix wrong="Lanuch" correct="Launch" after="day" />
);

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

The `wrong` word appears in a short line, gets flagged, and is corrected to `correct` in place. Pass `wrong`, `correct` and surrounding `before` and `after` text. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `wrong` | `string` | `"Lanuch"` | Misspelled word shown first. |
| `correct` | `string` | `"Launch"` | Correct spelling it becomes. |
| `before` | `string` | `""` | Text before the word. |
| `after` | `string` | `"day"` | Text after the word. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A quick-edit demo showing how easy a copy fix is.
- A joke or humanizing beat about a typo caught before the launch.
- A short proof that text changes are a one-line prop edit.

## Don't use when
- Whole phrases should be selected and rewritten — use `select-replace`.
- You want to show a code-style change — use `diff-swap`.
- A new word should be added to the sentence — use `word-insert`.

---

# Uncomment Line
URL: https://remocn.dev/docs/typography/uncomment-line

Code-comment lines lose their comment markers one by one and light up as live copy.

- Install: `npx shadcn@latest add @remocn/uncomment-line`
- Vibe: tech
- Natural length: 74f @ 30fps

## Installation

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

## Usage

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

const UncommentLineScene = () => (
  <UncommentLine lines={["Fork the scenes.", "Change anything.", "Own the cut."]} marker="// " highlight={-1} />
);

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

Lines appear dimmed behind a comment marker, then each marker drops away in turn so the line lights up. Pass `lines` for the copy and `highlight` for which line ends accented. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Lines of copy, each revealed in turn. |
| `marker` | `string` | `"// "` | Comment prefix shown before each line until it opens. |
| `highlight` | `number` | `-1` | Index of the accented line; negative counts from the end. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A developer-product beat where three promises should read like code being switched on.
- A feature list that starts muted and activates line by line.
- A tagline sequence for a dev tool where the comment syntax signals code-first.

## Don't use when
- The audience is not technical and comment syntax would be noise — use `what-sticks`.
- You want one line edited into another — use `diff-swap`.
- You want typed characters rather than a reveal — use `typewriter`.

---

# Unmask Line
URL: https://remocn.dev/docs/typography/unmask-line

A monospace line is unmasked letter by letter, 'Out of stealth.', the last word in green

- Install: `npx shadcn@latest add @remocn/unmask-line`
- Vibe: tech
- Natural length: 77f @ 30fps

## Installation

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

## Usage

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

const UnmaskLineScene = () => <UnmaskLine lines={["Out of", "stealth."]} highlight={-1} />;

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

Dots appear for each letter, breathe, then open into monospace characters line by line, with the chosen line tinted green. Pass `lines` and `highlight` (a line index; -1 means the last line); it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["Out of", "stealth."]` | Lines unmasked letter by letter. |
| `highlight` | `number` | `-1` | Index of the line tinted green; -1 is the last line. |
| `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 tech or developer-tool announcement where a monospace line is unmasked letter by letter.
- A status-style reveal, like going live, with the last line tinted green.

## Don't use when
- You want a classic typing cursor — use `typewriter`.
- You want the words to rise in softly — use `staggered-fade-up`.

---

# Value Swap
URL: https://remocn.dev/docs/typography/value-swap

Swap a value in place with a vertical slide so the layout never shifts

- Install: `npx shadcn@latest add @remocn/value-swap`
- Vibe: clean
- Natural length: 100f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/value-swap
```

## Usage

`ValueSwap` renders an inline `span` that inherits the surrounding typography and swaps its content at the exact frames you pass in `at` — the outgoing value slides up and fades as the incoming one rides in from below, one continuous upward motion, while an invisible sizer holds the width of the longest value so the layout never shifts. It is the string analog of `rolling-number` for arbitrary text.

```tsx
import { ValueSwap } from "@/components/remocn/value-swap";

export const MyScene = () => (
  <span style={{ fontSize: 40, fontWeight: 600 }}>
    <ValueSwap values={["$99", "$199"]} at={45} />
  </span>
);
```

Chain more than one swap by passing an array of frames, one per transition:

```tsx
<ValueSwap values={["Draft", "In review", "Shipped"]} at={[30, 60]} />
```

A tight before/after pair reads best with a snappier swap — try `duration={9} distance={9}`. `direction="down"` mirrors the motion for downward narratives — a price dropping, a rank falling.

`rolodex-flip` is a 3D card flip with its own rhythm (`interval`) — reach for it when values cycle as a montage; `ValueSwap` is a flat vertical slide at explicit frames — reach for it for a point change (before → after, a status or price flip); `rolling-number` animates numeric digits individually.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `values` | `string[]` | `—` | Values in order. Two or more. |
| `at` | `number \| number[]` | `—` | Frame of each swap. A number for a pair, an array of length values.length - 1 for a chain. |
| `duration` | `number` | `10` | Frames per swap. |
| `distance` | `number` | `12` | Vertical travel in pixels. |
| `direction` | `"up" \| "down"` | `"up"` | Direction of the through-motion. |
| `className` | `string` | `—` | Passed to the wrapper span. |
| `style` | `CSSProperties` | `—` | Merged onto the wrapper span. |

## Use when
- A value changes at a specific story beat — before/after price, status promotion, a hex/token flip.
- You control the exact swap frames.

## Don't use when
- Values should cycle continuously as a montage — use `rolodex-flip` with its own rhythm instead.
- The value is a large pure number counting up — `rolling-number` or `number-wheel` reads as data.

---

# Verbed
URL: https://remocn.dev/docs/typography/verbed

A dictionary entry defines a product name as a noun, then as a verb, with inflections and an example.

- Install: `npx shadcn@latest add @remocn/verbed`
- Vibe: paper
- Natural length: 174f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/verbed
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Verbed } from "@/components/remocn/verbed";

const VerbedScene = () => (
  <Verbed headword="remocn" nounSense="a set of video scenes you copy into your repo." verbSense="to make the launch film in the same pull request." />
);

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

A headword with pronunciation appears with its noun sense, then turns into its verb sense, inflections and an example sentence. Set `headword`, `nounSense`, `verbSense` and `example` to define your own product. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headword` | `string` | `"remocn"` | The word being defined. |
| `pronunciation` | `string` | `"/rem-uh-kun/"` | Pronunciation line under the headword. |
| `nounLabel` | `string` | `"noun"` | Part-of-speech label for the first sense. |
| `verbLabel` | `string` | `"verb"` | Part-of-speech label for the second sense. |
| `nounSense` | `string` | `"a set of video scenes you copy into your repo and edit like any other code."` | Definition text for the noun sense. |
| `verbSense` | `string` | `"to make the launch film in the same pull request as the feature."` | Definition text for the verb sense. |
| `inflections` | `string[]` | `["remocns", "remocned", "remocning"]` | Inflected forms shown after the verb sense. |
| `example` | `string` | `"We remocned the changelog before lunch."` | Example sentence using the word as a verb. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A brand-voice beat where the product name has become a verb among users.
- An about-the-name scene that explains what the product is and what it means to use it.
- A playful intro that frames the product in dictionary form.

## Don't use when
- You want a short punchy name reveal with no explanation — use `we-call-it`.
- The scene has a single definition line — use `which-means`.
- You want a multi-paragraph statement of beliefs — use `whole-page`.

---

# Wake Wipe
URL: https://remocn.dev/docs/typography/wake-wipe

A wake-like wipe reveals 'Ship the launch video today.' with a gradient accent word

- Install: `npx shadcn@latest add @remocn/wake-wipe`
- Vibe: premium
- Natural length: 155f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/wake-wipe
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WakeWipe } from "@/components/remocn/wake-wipe";

const WakeWipeScene = () => (
  <WakeWipe lines={["Animations you own.", "Transitions that land.", "Ship the launch video today."]} highlight="today." />
);

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

Each line is revealed by a wipe with a soft wake behind it and cleared by the next, ending on the last line with its highlight word in a gradient. Pass `lines`, `highlight` and `eyebrow`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Lines shown in turn; the last one gets the highlight. |
| `highlight` | `string` | `"today."` | Word or phrase set in the gradient accent. |
| `eyebrow` | `string` | `"Inside remocn"` | Small label above the lines. |
| `hold` | `number` | `54` | Frames the final line holds. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A three-line pitch where each line is wiped away by a trailing wake and the last carries an accent word.
- A brand statement with a small eyebrow label above it.

## Don't use when
- You want lines to slide apart like doors — use `slide-doors`.
- You want the line rewritten in place — use `rewrite-bars`.

---

# Walkout Name
URL: https://remocn.dev/docs/typography/walkout-name

A fighter-style name stack slams in line by line, then a light band, record and nickname arrive

- Install: `npx shadcn@latest add @remocn/walkout-name`
- Vibe: playful
- Natural length: 78f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/walkout-name
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WalkoutName } from "@/components/remocn/walkout-name";

const WalkoutNameScene = () => (
  <WalkoutName
    name={["The", "Launch", "Kid"]}
    nickname="Zero downtime"
    record="40–2"
    finishes="31 KO"
  />
);

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

The name whips in as an extreme close-up of line one, hard-cuts to line two, then slams down line three with an inverted impact frame and shake. The camera pulls out, a light band sweeps across the stack, the record and finishes stats punch in, and the serif nickname wipes in beside the last line. Pass `name` (three short lines read best), `nickname`, `record` and `finishes` to make it yours; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string[]` | `["The", "Launch", "Kid"]` | Stacked name lines, one per entry; three short lines read best. |
| `nickname` | `string` | `"Ships before lunch"` | Serif italic nickname in quotes, beside the last line. |
| `record` | `string` | `"12–0"` | Record text slammed in beside the name. |
| `finishes` | `string` | `"12 KO"` | Second stat under the record, filled with the spotlight gradient. |
| `recordLabel` | `string` | `"Pro record"` | Small label above the record. |
| `billing` | `string` | `"Main event · Tonight"` | Small billing line at the top left. |
| `accent` | `string` | `"#3B5BFD"` | Color of the billing tick and the record rule. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A launch-day intro beat that announces a founder or product by name with a nickname and a headline stat.
- A hype opener where the name slams in line by line with camera shake before a spotlight band sweeps across.
- A comparison or milestone beat where a record-style number (releases shipped, uptime) lands beside the name.

## Don't use when
- The name should arrive quietly with a polished, understated feel — use `name-gloss`.
- The text is a sentence rather than three short name lines — use `line-by-line-slide`.
- You only need one punchy word to slam in, with no record or nickname — use `round-slam`.

---

# Waveform Title
URL: https://remocn.dev/docs/typography/waveform-title

A headline rises over an aurora waveform line that settles into an underline beneath it

- Install: `npx shadcn@latest add @remocn/waveform-title`
- Vibe: clean
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/waveform-title
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WaveformTitle } from "@/components/remocn/waveform-title";

const WaveformTitleScene = () => (
  <WaveformTitle title="Your voice, captioned" accentWords={1} />
);

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

An aurora waveform line opens and sweeps across the frame, settles into an underline, and the headline rises above it, with the trailing word(s) in italic serif. Pass `title` and `accentWords`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Your voice, captioned"` | The headline that rises over the waveform. |
| `accentWords` | `number` | `1` | How many trailing words are set in the italic serif accent. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A product beat about voice, audio or captions where a waveform line sits under the title.
- A title card where the headline rises and the last word is set in serif italic.

## Don't use when
- You want a pulse running through the text itself — use `pulse-line`.
- You need a plain headline without an audio motif — use `blur-out-up`.

---

# We Call It
URL: https://remocn.dev/docs/typography/we-call-it

Short descriptive lines build up to a large product name introduced by a lead-in phrase.

- Install: `npx shadcn@latest add @remocn/we-call-it`
- Vibe: paper
- Natural length: 164f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/we-call-it
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WeCallIt } from "@/components/remocn/we-call-it";

const WeCallItScene = () => (
  <WeCallIt descriptions={["Scenes you install like components.", "Edits that land as commits."]} lead="We call it a" name="video registry." />
);

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

Description lines stack up one at a time, then a lead-in phrase lands and the big name appears word by word. Pass `descriptions`, `lead` and `name` to name your own thing. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `descriptions` | `string[]` | — | Lines that build up before the name. |
| `lead` | `string` | `"We call it a"` | Lead-in phrase shown before the name. |
| `name` | `string` | `"video registry."` | Large name revealed at the end. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A category-naming beat where several loose descriptions resolve into one name.
- A launch film moment that finally says what the product is called.
- A positioning scene that builds a list before the payoff.

## Don't use when
- You need the name defined like a dictionary entry — use `verbed`.
- The payoff is a time phrase rather than a name — use `on-approach`.
- You want the name placed in a fill-in-the-blank frame — use `your-name-here`.

---

# Week Shipped
URL: https://remocn.dev/docs/typography/week-shipped

A week-recap list rolls day by day in heavy type, each day followed by what shipped.

- Install: `npx shadcn@latest add @remocn/week-shipped`
- Vibe: playful
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/week-shipped
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WeekShipped } from "@/components/remocn/week-shipped";

const WeekShippedScene = () => (
  <WeekShipped entries={[{ day: "Monday,", item: "captions that keep up." }, { day: "Tuesday,", item: "shaders you can scrub." }]} />
);

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

Each entry rolls in as a day name followed by its shipped item, stepping through the week at a fitted pace. Pass `entries` with `day` and `item` for each line. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `entries` | `WeekShippedEntry[]` | `DEFAULT_ENTRIES` | List of `{ day, item }` pairs, one per line. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A weekly changelog video that recaps what shipped each day.
- A sprint-review beat where each day maps to one deliverable.
- A build-in-public recap that ends with a rest day or a final surprise.

## Don't use when
- Each item needs a longer description or screenshot — use `changelog-scroll`.
- The list is features, not days, and should show as chips — use `feature-chips-flow`.
- You want a counted-down series rather than a week — use `nonstop`.

---

# Weight Wave
URL: https://remocn.dev/docs/typography/weight-wave

A wave of font weight travels across a line of text and settles on a highlighted word

- Install: `npx shadcn@latest add @remocn/weight-wave`
- Vibe: clean
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/weight-wave
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WeightWave } from "@/components/remocn/weight-wave";

const WeightWaveScene = () => <WeightWave text="Made to move." highlight="move." accent="#3B5BFD" />;

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

A line of text swells in font weight as a wave sweeps across it twice, then each letter settles to a resting weight while the last word takes a gradient fill. Pass `text`, optionally `highlight` for the word to color, and `from`, `peak`, `settle` to tune the weight range.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Made to move."` | The line of text to animate. |
| `highlight` | `string` | — | Word to color with the gradient; defaults to the last word. |
| `from` | `number` | `100` | Starting font weight, clamped to 100 to 500. |
| `peak` | `number` | `500` | Weight reached at the crest of each wave. |
| `settle` | `number` | `460` | Resting weight each letter ends on. |
| `waves` | `number` | `2` | How many weight waves sweep across the line. |
| `accent` | `string` | `"#3B5BFD"` | Deep end color of the highlighted word gradient. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A tagline about motion or flexibility where the type itself should feel alive.
- A calm hero line that needs subtle movement without letters leaving their place.
- A closing line that should end on one emphasized word in the brand color.

## Don't use when
- You need the headline to enter from off-screen or by letter — use `per-character-rise`.
- The line is long and wraps to several lines — use `line-by-line-slide`.
- You want a width and weight flex on a single big word — use `axis-flex`.

---

# What Sticks
URL: https://remocn.dev/docs/typography/what-sticks

A column of claims dims one by one until a single line stays highlighted.

- Install: `npx shadcn@latest add @remocn/what-sticks`
- Vibe: clean
- Natural length: 170f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/what-sticks
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WhatSticks } from "@/components/remocn/what-sticks";

const WhatSticksScene = () => (
  <WhatSticks lines={["Scenes install with one command.", "You own every file."]} keep={1} />
);

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

A stack of claims appears while timeline captions mark what you remember tonight, tomorrow and next week. Lines fade away until one is left bright. Pass `lines`, and use `keep` to pick the survivor. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `DEFAULT_LINES` | Claims shown in the column. |
| `keep` | `number` | — | Index of the line that stays highlighted; defaults to about 70 percent down. |
| `moments` | `string[]` | `DEFAULT_MOMENTS` | Time captions marking each stage of forgetting. |
| `forget` | `number[]` | — | Indices of lines that fade out first. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A message-discipline beat that shows only one claim survives the viewer's memory.
- A feature recap that ends by spotlighting the single most important point.
- A closing scene that narrows several promises down to one takeaway.

## Don't use when
- You want a summary on top of the full copy — use `tldr-on-top`.
- Lines should stay all visible while one is edited — use `diff-swap`.
- You want a single contrast pair, not a list — use `less-more`.

---

# Which Means
URL: https://remocn.dev/docs/typography/which-means

A feature tag leads into a chain of consequences, each introduced by a hinge phrase.

- Install: `npx shadcn@latest add @remocn/which-means`
- Vibe: clean
- Natural length: 143f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/which-means
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WhichMeans } from "@/components/remocn/which-means";

const WhichMeansScene = () => (
  <WhichMeans name="Live preview" label="New" steps={["Every edit shows up as you type,", "the first render is the one you ship."]} />
);

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

A labeled feature name appears, then the hinge phrase and each step in `steps` unfold as a chain of consequences. Pass `name`, `label`, `steps` and `hinge` to describe your own feature. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | `"Live preview"` | Feature name shown as the headline. |
| `label` | `string` | `"New"` | Small tag shown next to the name. |
| `steps` | `string[]` | `DEFAULT_STEPS` | Consequence lines revealed in order. |
| `hinge` | `string` | `"which means"` | Connector phrase shown between steps. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A feature beat that turns one capability into a chain of benefits.
- A launch scene that links a new feature to what it means for the viewer.
- A release note video where a feature name needs a plain-language payoff.

## Don't use when
- You only need a short before-and-after contrast — use `less-more`.
- The explanation is a long paragraph, not a chain — use `tldr-on-top`.
- You want the name defined as a word — use `verbed`.

---

# Whole Page
URL: https://remocn.dev/docs/typography/whole-page

A manifesto of serif belief paragraphs fills the page in columns, one after another.

- Install: `npx shadcn@latest add @remocn/whole-page`
- Vibe: premium
- Natural length: 344f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/whole-page
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WholePage } from "@/components/remocn/whole-page";

const WholePageScene = () => (
  <WholePage title="What we believe" beliefs={["A launch video is part of the launch.", "Every frame you install is a file you can rewrite."]} />
);

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

A title opens a page that fills with `beliefs` paragraph by paragraph, flowing into columns, with the active paragraph highlighted. Pass `beliefs` and `title` for your own manifesto. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `beliefs` | `string[]` | `DEFAULT_BELIEFS` | Paragraphs that fill the page in order. |
| `title` | `string` | `"What we believe"` | Heading shown above the paragraphs. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A mission or values beat for a long-form brand film.
- A founder-letter style scene where several short beliefs read together.
- A closing scene that lets the viewer read a full page of principles.

## Don't use when
- You only need a short summary above the details — use `tldr-on-top`.
- Each belief should appear and dim on its own — use `what-sticks`.
- The statement is one sentence — use `we-call-it`.

---

# Width Lock
URL: https://remocn.dev/docs/typography/width-lock

A condensed line keeps a fixed width while one word swaps through a list.

- Install: `npx shadcn@latest add @remocn/width-lock`
- Vibe: clean
- Natural length: 143f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/width-lock
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WidthLock } from "@/components/remocn/width-lock";

const WidthLockScene = () => (
  <WidthLock before="Ship the" words={["trailer", "captions", "launch video"]} after="by tonight." />
);

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

The line holds a constant width while the middle word swaps through each entry in `words`. Pass `before`, `words` and `after`, and set `hold` for how long each word stays. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Ship the"` | Text before the swapping word. |
| `words` | `string[]` | — | Words swapped in order. |
| `after` | `string` | `"by tonight."` | Text after the swapping word. |
| `hold` | `number` | `30` | Frames each state stays on screen before the next one. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A claim with one slot that cycles through deliverables, such as trailer, captions, launch video.
- A headline where layout must not jump when the word changes.
- A short sentence that lists several use cases.

## Don't use when
- The swapped word should be pressed with annotations — use `ruby-press`.
- One word stays and the rest swap — use `pinned-word`.
- Words should arrive from a spread-out position — use `pull-in`.

---

# 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`.

---

# Word Gap Media
URL: https://remocn.dev/docs/typography/word-gap-media

A video tile slots into the gap between "Launch all" and "of this"

- Install: `npx shadcn@latest add @remocn/word-gap-media`
- Vibe: premium
- Natural length: 142f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/word-gap-media
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WordGapMedia } from "@/components/remocn/word-gap-media";

const WordGapMediaScene = () => (
  <WordGapMedia before="Launch all" after="of this" images={["/shots/hero.jpg", "/shots/gallery.jpg"]} aspects={[0.8, 1.36]} captions={["Hero", "Gallery"]} />
);

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

A sentence is split around a gap and a media tile opens inside it, cycling through your images with progress bars and captions. By default it uses `staticFile` images that only exist in the Remocn repo, so pass your own `images` (public paths or full URLs). It ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Launch all"` | Text before the gap. |
| `after` | `string` | `"of this"` | Text after the gap. |
| `images` | `string[]` | `DEFAULT_IMAGES` | Image paths or URLs cycled through the tile. |
| `aspects` | `number[]` | `DEFAULT_ASPECTS` | Aspect ratio (width over height) for each image. |
| `captions` | `string[]` | `DEFAULT_CAPTIONS` | Label shown for each image. |
| `accent` | `string` | — | Accent colour (any CSS colour). |
| `ink` | `string` | — | Text colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `ground` | `GshPresetId` | — | Gradient preset used for the backdrop. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the gradient preset parameters. |

## Use when
- A beat where media tiles slot into a gap inside a sentence, such as showing the screens behind the claim.
- A product showcase that cycles three or four images with captions inside the headline.

## Don't use when
- You only need a headline with no imagery — use `staggered-fade-up`.
- You want one giant word with the camera pulling back — use `word-pullback`.

---

# Word Insert
URL: https://remocn.dev/docs/typography/word-insert

A sentence edits itself, opening a gap and inserting new words in an accent gradient.

- Install: `npx shadcn@latest add @remocn/word-insert`
- Vibe: clean
- Natural length: 116f @ 30fps

## Installation

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

## Usage

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

const WordInsertScene = () => (
  <WordInsert states={["Launch videos.", "Launch videos, as code."]} />
);

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

Each entry in `states` is the same sentence with more words added, and the new words open a gap and slide in with a gradient. Pass `states` as successive versions of your line. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `states` | `string[]` | `DEFAULT_STATES` | Successive versions of the sentence, each adding words. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A tagline that grows from a plain noun into a full promise.
- A showcase of how a sentence can gain qualifiers step by step.
- A launch line where each added word is a selling point.

## Don't use when
- Words should be replaced, not added — use `select-replace`.
- The sentence resets layout between versions — use `layout-swap`.
- Only one word should change in place — use `typo-fix`.

---

# Word Ladder
URL: https://remocn.dev/docs/typography/word-ladder

A word changes a letter or two per rung, climbing a ladder to the final word.

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

## Installation

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

## Usage

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

const WordLadderScene = () => (
  <WordLadder words={["idea", "item", "stem", "step", "ship"]} />
);

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

Each word in `words` replaces the last by changing a letter or two, stepping from the first rung to the last. Pass `words` as a chain where neighbors differ slightly. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["idea", "item", "stem", "step", "ship"]` | Rungs of the ladder, first to last. Neighbours should differ by a letter or two. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A transformation beat such as idea to ship in a few steps.
- A word-play intro that shows progress through small changes.
- A short title sequence that ends on the product's key verb.

## Don't use when
- The letters should be rearranged into one new word — use `anagram-shuffle`.
- The words are unrelated and should just swap — use `ruby-press`.
- You want a fixed-width list swap — use `width-lock`.

---

# Word Pullback
URL: https://remocn.dev/docs/typography/word-pullback

The camera pulls back from a big word to reveal "The cinematic toolkit for every launch"

- Install: `npx shadcn@latest add @remocn/word-pullback`
- Vibe: premium
- Natural length: 96f @ 30fps

## Installation

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

## Usage

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

const WordPullbackScene = () => (
  <WordPullback before="The" accentWord="cinematic" after="toolkit for every launch" />
);

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

One big word is typed, then the camera pulls back in two moves to reveal the surrounding sentence and a logo before a gradient floods the frame. Pass `before`, `accentWord` and `after`; it ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"The"` | Text before the accent word. |
| `accentWord` | `string` | `"cinematic"` | Word shown huge first, set in serif. |
| `after` | `string` | `"toolkit for every launch"` | Text after the accent word. |
| `accent` | `string` | — | Accent colour (any CSS colour). |
| `ink` | `string` | — | Text colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `ground` | `GshPresetId` | — | Gradient preset used for the backdrop. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the gradient preset parameters. |

## Use when
- An opener that starts on one huge word and pulls the camera back to reveal the full sentence.
- A brand statement where one word in serif is the hero.

## Don't use when
- You want media inside the sentence — use `word-gap-media`.
- You want a plain line without camera motion — use `staggered-fade-up`.

---

# Word Push
URL: https://remocn.dev/docs/typography/word-push

Words drive in from the right and push the line left into its new center

- Install: `npx shadcn@latest add @remocn/word-push`
- Vibe: premium
- Natural length: 42f @ 30fps

## Installation

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

## Usage

The first word glides in from the left and settles at center. Each following word appears slightly to the right of its slot and drives left into place, pushing the whole line left by half its width so the phrase always settles centered.

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

const WordPushScene = () => <WordPush text="move at your own pace" />;

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

```tsx
import { Composition } from "remotion";
import { WordPush } from "@/components/remocn/word-push";
import { Backdrop } from "@/components/remocn/backdrop";

const WordPushScene = () => (
  <Backdrop fill={{ type: "color", value: "#0b0b14" }}>
    <WordPush text="move at your own pace" color="#ffffff" />
  </Backdrop>
);

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

### Syncing to a voiceover

`wordGap` sets the first gap and `accel` shrinks every following one, so the build accelerates as one gesture rather than per word. The exported `wordPushLength(text, wordGap)` helper returns the frame on which the last push settles — use it as the lower bound of the `Sequence`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The phrase; words are split on spaces. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `wordGap` | `number` | `10` | Frames between the first two word arrivals; later gaps shrink by accel. |
| `accel` | `number` | `0.8` | Each next gap is the previous one multiplied by this — one accelerando across the phrase. 1 keeps the rhythm uniform. |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A single tagline or closing phrase should build word by word with physical, push-driven motion instead of plain fades.
- The first word must glide in from the left to center and visibly get shoved further left as each next word arrives from the right.
- The line follows a voiceover and each spoken word lands with a kinetic nudge.

## Don't use when
- Several phrases must play in sequence with cuts between them — use `word-stream` for the multi-phrase flow.
- You want a calm, driftless word-by-word entrance — use `per-word-crossfade`.
- The reveal should happen per character rather than per word — use `per-character-rise` or `soft-blur-in`.

---

# Word Stack
URL: https://remocn.dev/docs/typography/word-stack

Caps words push up into a tight poster stack, and the last one turns into a serif gradient italic

- Install: `npx shadcn@latest add @remocn/word-stack`
- Vibe: premium
- Natural length: 99f @ 30fps

## Installation

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

## Usage

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

const WordStackScene = () => (
  <WordStack words={["Write", "it", "once", "ship", "it", "everywhere"]} />
);

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

Each word pushes in from below on its own beat, and the earlier words in the stack shift up and out to make room. The last word swaps to a serif italic with a gradient sheen that slowly drifts while the poster holds. Pass `words` as a list of short words; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | — | Words pushed into the stack in order; the last one turns serif italic. |
| `accent` | `string` | `"#3B5BFD"` | Accent color mixed into the closing word's gradient. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A manifesto or tagline beat of five to seven short words that builds one word at a time into a poster.
- A closing statement where the final word should stand apart in a serif italic with a gradient sheen.
- A vertical portrait or square layout where a stacked headline fills the frame.

## Don't use when
- The words should appear in place, one at a time, without a scrolling stack — use `zoom-words`.
- The line is a sentence that must stay on one line — use `line-by-line-slide`.
- You want a soft, low-energy entrance rather than hard pushes — use `staggered-fade-up`.

---

# Word Stream
URL: https://remocn.dev/docs/typography/word-stream

Voiceover-paced phrases building word by word while the line drifts left

- Install: `npx shadcn@latest add @remocn/word-stream`
- Vibe: premium
- Natural length: 63f @ 30fps

## Installation

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

## Usage

Phrases are passed as a single string separated by `|`. Each phrase glides in decelerating, builds word by word while slowly drifting left, then accelerates out to the left and hard-cuts to the next phrase. The last phrase stays on screen.

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

const WordStreamScene = () => (
  <WordStream text="introducing | one-tap checkout | for your store" />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

```tsx
import { Composition } from "remotion";
import { WordStream } from "@/components/remocn/word-stream";
import { Backdrop } from "@/components/remocn/backdrop";

const WordStreamScene = () => (
  <Backdrop fill={{ type: "color", value: "#0b0b14" }}>
    <WordStream
      text="introducing | one-tap checkout | for your store"
      color="#ffffff"
    />
  </Backdrop>
);

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

### Syncing to a voiceover

`wordGap` is the number of frames between word reveals — match it to the speaking pace of the narration (at 30fps, `wordGap={6}` is 5 words per second). `hold` controls how long a finished phrase stays before the next one starts. The exported `wordStreamLength(text, wordGap, hold)` helper returns the frame on which the last word finishes resolving — use it as the lower bound of the `Sequence`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | Phrases separated by \|. Words within a phrase are split on spaces. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `wordGap` | `number` | `6` | Frames between consecutive word reveals |
| `hold` | `number` | `18` | Frames a completed phrase holds before swapping to the next |
| `drift` | `number` | `2` | Leftward crawl of the line in pixels per frame between the entry glide and the exit run-out (at fontSize 72, scales proportionally). 0 disables the crawl. |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- An intro or narration follows a voiceover and each phrase should build word by word at speaking pace.
- You want the keynote-style restless motion where the whole line keeps drifting left as new words pop in on the right.
- Several short phrases need to play in sequence inside a single component, with fast cut-like swaps between them.

## Don't use when
- There is only one static phrase to reveal — use `per-word-crossfade` for a single calm word-by-word entrance.
- You need a two-state before/after text swap rather than a stream — use `value-swap` or `strikethrough-replace`.
- The text is a multi-line paragraph — use `line-by-line-slide` or `mask-reveal-up` for line-level reveals.
- The words follow a real voiceover — use `caption-karaoke` or another style from the Captions tab, which times every word from a transcript instead of inventing the pace.

---

# Wrapped Squash
URL: https://remocn.dev/docs/typography/wrapped-squash

Each caps line squashes to fill its own colored block, stacking into a full-frame poster

- Install: `npx shadcn@latest add @remocn/wrapped-squash`
- Vibe: playful
- Natural length: 93f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/wrapped-squash
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WrappedSquash } from "@/components/remocn/wrapped-squash";

const WrappedSquashScene = () => (
  <WrappedSquash lines={["WE", "SHIPPED", "IT ALL"]} />
);

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

Line one grows to fill the frame, then each further line arrives on a 26-frame beat and squeezes the lines above it, and a spring lock settles every block to its final height. Blocks alternate between a window onto a shared gradient and a solid fill. Pass `lines` (two or three, set in caps); use `colors` for a flat two-color pair. It ships light and dark through `theme`, and with two lines the lock lands earlier (frame 67).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["YOU", "SHIPPED", "A LOT"]` | Two or three short lines; set in caps, each fills its own block. |
| `accent` | `string` | `"#3B5BFD"` | Accent color used in the dark theme's gradient field. |
| `colors` | `[string, string]` | — | Flat two-color pair, such as `["#FF4632", "#FFD2F2"]`, replacing the gradient. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A recap beat of two or three short caps lines, such as a year-in-review or shipped-this-quarter summary.
- A bold section break where each line takes over the frame, then all lines lock into a stacked poster.
- A social-style stat card that needs loud type blocks in one flat two-color pair.

## Don't use when
- You have more than three lines or longer phrases — use `word-stack`.
- The tone should be calm, with text appearing gently — use `mask-reveal-up`.
- You only need one big word to hit the frame — use `round-slam`.

---

# Yes Run
URL: https://remocn.dev/docs/typography/yes-run

A string of short questions is each answered with the same bold Yes tag on bright orange.

- Install: `npx shadcn@latest add @remocn/yes-run`
- Vibe: playful
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/yes-run
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { YesRun } from "@/components/remocn/yes-run";

const YesRunScene = () => (
  <YesRun questions={["Vertical?", "Captions?", "Your fonts?"]} answer="Yes." />
);

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

Each question in `questions` is answered by the `answer` tag landing next to it, quickening as they go. Pass `questions` and `answer` to answer your own FAQ. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `questions` | `string[]` | `DEFAULT_QUESTIONS` | Short questions answered in turn. |
| `answer` | `string` | `"Yes."` | Answer shown on the tag. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- An objections-handling beat that says yes to a run of product questions.
- A rapid feature checklist such as vertical, captions, your fonts.
- A playful pricing or capability scene with a repeated answer.

## Don't use when
- Each answer is different and longer — use `which-means`.
- You want a two-line contrast rather than a list — use `less-more`.
- Items should be listed as chips — use `feature-chips-flow`.

---

# Your Name Here
URL: https://remocn.dev/docs/typography/your-name-here

A launch-film caption has a slot where the brand name is swapped in for the viewer's own.

- Install: `npx shadcn@latest add @remocn/your-name-here`
- Vibe: playful
- Natural length: 146f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/your-name-here
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { YourNameHere } from "@/components/remocn/your-name-here";

const YourNameHereScene = () => (
  <YourNameHere lead="A launch film for" slot="yourProduct" brand="Acme" note="Swap one prop. The film is yours." />
);

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

A lead-in line runs to a highlighted slot that swaps from `slot` to `brand`, then a closing note lands below. Pass `lead`, `brand`, `slot` and `note` to personalize it. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lead` | `string` | `"A launch film for"` | Text before the slot. |
| `brand` | `string` | `"remocn"` | Name that replaces the placeholder. |
| `slot` | `string` | `"yourProduct"` | Placeholder text shown first. |
| `end` | `string` | `"."` | Closing punctuation after the name. |
| `note` | `string` | `"Swap one prop. The film is yours."` | Caption shown under the main line. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A template-style beat that tells the viewer to drop in their own product name.
- A call-to-action scene near the end of a demo that invites the viewer to make their own film.
- A swap-one-prop pitch where the placeholder itself is the joke.

## Don't use when
- The change is a whole headline, not a name slot — use `layout-swap`.
- One word inside a sentence should cycle through options — use `width-lock`.
- You want the name revealed after build-up lines — use `we-call-it`.

---

# Zoom Words
URL: https://remocn.dev/docs/typography/zoom-words

Huge words fade into a long line while the camera rides the write head

- Install: `npx shadcn@latest add @remocn/zoom-words`
- Vibe: premium
- Natural length: 63f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/zoom-words
```

## Usage

The first word fades in centered and the camera holds still. The whole phrase then reveals on one clock with a short gentle ramp-up settling into constant speed — the measured profile of the reference — with each word sliding in on a small diagonal, lightly softened but always readable, while the camera rides the growing line and stops with the last word centered. The shot starts `blur` em out of focus and sharpens over `blurFrames`. Meant to be hard-cut into the next scene (in the reference, a typewriter scene follows the cut).

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ZoomWords } from "@/components/remocn/zoom-words";

const ZoomWordsScene = () => (
  <ZoomWords text="Still piecing together tools" />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. The reference pairs it with a dark-to-violet vertical gradient.

```tsx
import { Composition } from "remotion";
import { ZoomWords } from "@/components/remocn/zoom-words";
import { Backdrop } from "@/components/remocn/backdrop";

const ZoomWordsScene = () => (
  <Backdrop
    fill={{
      type: "gradient",
      value: "linear-gradient(180deg, #0a0612 25%, #6a3fd6 100%)",
    }}
  >
    <ZoomWords text="Still piecing together tools" />
  </Backdrop>
);

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

### Syncing

The exported `zoomWordsLength(text, wordGap)` helper returns the frame on which the camera settles after the last word — cut to the next scene at or shortly after it.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The phrase to reveal; it may be arbitrarily long |
| `wordGap` | `number` | `12` | Frames between word reveals |
| `fontSize` | `number` | `64` | Base font size in pixels before the camera zoom |
| `zoom` | `number` | `2.2` | Camera scale applied to the whole shot |
| `anchor` | `number` | `0.5` | Horizontal fraction of the frame the camera holds — the first word appears centered on it |
| `blur` | `number` | `0.04` | Starting defocus in em, sharpening to zero over blurFrames |
| `blurFrames` | `number` | `60` | Frames the focus pull takes |
| `color` | `string` | `"#cfc2ff"` | Text color (any valid CSS color) |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- An intro should open uncomfortably close: huge words appearing one by one while the camera tracks the growing line off-frame.
- You want the shot to start slightly defocused and sharpen while the reveal runs — a cold-open feel before a hard cut.
- The phrase is long and should never need to fit the frame.

## Don't use when
- The whole phrase must fit the frame at rest — use `per-word-crossfade` or `word-stream`.
- You need character-by-character typing with a caret — use `typewriter`.
- The camera language should be a real 2.5D move over a scene rather than a text close-up — use `stage`.
- One spoken word at a time from a voiceover — use `caption-word-pop`, which follows the transcript timing.