Rush Type
White words blast into vertical RGB shutter trails generated entirely by motion
$ pnpm dlx shadcn@latest add @remocn/rush-typeUsage
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.
// 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.
<RushType
phrase="move before it settles"
verticalStretch={8}
chromaticSpread={1.25}
restDuration={15}
peakHoldDuration={4}
/>| 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.