# RGB Glitch Text
URL: https://remocn.dev/docs/typography/rgb-glitch-text

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

- Install: `npx shadcn@latest add @remocn/rgb-glitch-text`
- Vibe: tech
- Natural length: 90f @ 30fps

## Installation

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

## 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 |

## Use when
- A tech, hacker, or cyberpunk scene needs a moment of digital corruption on a title.
- You want a deterministic glitch that renders identically every time (use `seed` to vary it per clip).
- The entrance is already complete and you want a brief mid-scene disruption rather than a full reveal animation.

## Don't use when
- You need a full text entrance animation — the glitch is a momentary effect, not a reveal; use `tracking-in` or `soft-blur-in` to bring text in.
- The brand aesthetic is clean or premium — RGB splits read as intentionally broken; use `shimmer-sweep` for a high-end shimmer moment instead.
- The text is long — offset copies of a full paragraph are illegible during the glitch window; keep it to a short word or phrase.
- The whole frame should break at a scene change rather than a headline mid-scene — use `glitch-cut`.