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