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

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

Props

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