Rush Type

$ pnpm dlx 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.

// 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}
/>

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.