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