Rush Type
White words blast into vertical RGB shutter trails generated entirely by motion
Installation
$ pnpm dlx shadcn@latest add @remocn/rush-typeUsage
RushType shows one word of a short phrase on a flat black frame. The word
rests in pixel-sharp white, 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.
// 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.
<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 |
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.