RGB Glitch Text

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

A typography primitive that stacks red, green, and blue copies of the same text and offsets them on each frame during a short glitch window. Uses random(seed) from Remotion so the jitter is fully deterministic across renders.

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.

Notes

Determinism

The RGB offsets use random(seed) from remotion, never Math.random(). The same seed and frame always produce the same offset, so the glitch renders identically on every frame.

Light backgrounds only

The RGB copies use mixBlendMode: "multiply" so they read correctly on a light background. On a dark background you'll want to switch to screen or stack opaque copies instead.