RGB Glitch Text

Three RGB-offset text copies jitter for a few frames to create a chromatic aberration glitch

Installation

$ pnpm dlx shadcn@latest add @remocn/rgb-glitch-text

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RGBGlitchText } from "@/components/remocn/rgb-glitch-text";
 
const RGBGlitchTextScene = () => (
  <RGBGlitchText text="SYSTEM" glitchAt={20} glitchDuration={8} intensity={6} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RGBGlitchText"
    component={RGBGlitchTextScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props10

Prop	Type	Default
textrequired	string— The text to display and glitch
fontSize	number96 Font size in pixels
color	string"#171717" Base text color (visible at all times)
fontWeight	number700 CSS font-weight
glitchAt	number20 Frame at which the glitch starts
glitchDuration	number8 Duration of the glitch window in frames
intensity	number6 Maximum offset (in pixels) for the RGB copies
seed	string"glitch" Seed used by `random()` so the jitter stays deterministic
speed	number1 Playback speed multiplier (1 = normal, 2 = twice as fast)
className	string— Optional className passed to the inline-block wrapper

textrequiredstring
The text to display and glitch
fontSizenumber
Font size in pixels
Default96
colorstring
Base text color (visible at all times)
Default"#171717"
fontWeightnumber
CSS font-weight
Default700
glitchAtnumber
Frame at which the glitch starts
Default20
glitchDurationnumber
Duration of the glitch window in frames
Default8
intensitynumber
Maximum offset (in pixels) for the RGB copies
Default6
seedstring
Seed used by `random()` so the jitter stays deterministic
Default"glitch"
speednumber
Playback speed multiplier (1 = normal, 2 = twice as fast)
Default1
classNamestring
Optional className passed to the inline-block wrapper