Glitch Background for React

Q: Can I make it calmer or harsher?

intensity sets how far bands tear and channels split, and how loud the static is: subtle behind body text, medium by default, strong for a 404 or a game. --glitch-shift and --glitch-noise set the two directly.

Q: Can I turn off the scanlines?

Yes: scanlines={false} removes the scanlines and the vignette and keeps everything else.

Q: Is it heavy?

No. Every part changes only clip-path, translate or opacity, in steps, so the browser composites it without repainting, and no script runs. Its fifteen layers cost some GPU memory, as any animated layer the size of the screen does.

A screen carrying a broken signal: soft light and pixel-sort streaks under scanlines and static, torn into sliding bands, red and cyan splits and datamosh blocks every couple of seconds. For React with Base UI, when a 404 page, a game or a cyberpunk launch needs raw digital energy.

Glitch fills its container with a screen that's always showing something: two soft pools of light, pixel-sort streaks falling from them and faint video lines, under stepping static, a slow rolling bar and fine scanlines, with small twitches now and then. Every couple of seconds a burst hits: bands of the picture tear loose and slide sideways, the picture splits into red and cyan, and a few datamosh blocks smear across. The picture is two masked layers, one per colour channel, added together; each tear is a strip holding the same pair, cut by stepped clip-path keyframes and slid by stepped translate ones, so the browser composites it all and no script runs.

Use it for 404 and error pages, games, music and cyberpunk launches. For digital motion that never stops, use Matrix; for a calmer screen texture, Flickering Grid; for the static alone, as film grain, Grain; for another CRT screen, this time working, Oscilloscope.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Glitch } from "@/components/ui/glitch";

<Glitch className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Signal lost</h1>
</Glitch>

Glitch is a container: give it a size, put your content inside, and the screen sits behind it. It follows your theme: a pale, misty screen in light mode and a dark one in dark mode, on the root's background (bg-background by default, so a className such as bg-card changes it). For the whole page, pass className="fixed inset-0 -z-10".

Demos

404

intensity="subtle" halves how far the bands tear and the channels split and quiets the static, so a short paragraph on top stays easy to read.

PreviewCode

Cyberpunk

A card that stays dark in both themes, on a deep violet screen, with intensity="strong" and the two channels recoloured from the class: [--glitch-red:…] a magenta and [--glitch-cyan:…] a mint.

PreviewCode

Accessibility

The screen is decoration: it's hidden from assistive tech and never takes the pointer, so your content is read and clicked as usual. The picture never goes blank and never jumps in brightness: a burst moves bands of it sideways and splits its colours for about a quarter of a second, five times in twelve seconds at the default speed. speed stops at 2, and the stylesheet clamps the cycle too, so bursts stay about a second apart at the very least, whatever sets it. With reduced motion everything holds still: the picture, its static and the scanlines. Keep copy in your foreground colour, and use intensity="subtle" behind body text, since a tear can cross a line for a moment.

FAQ

How does the RGB split work?

The picture is drawn twice from the same mask, once in red and once in cyan, added together on a dark screen (multiplied, like inks, on a light one). Lined up, they make plain light; in a burst they jump apart, so every edge splits into red and cyan. Set --glitch-red and --glitch-cyan to change the two channels.

How often does it glitch?

Five bursts in a twelve-second cycle, two to four seconds apart, with small twitches in between. speed raises the rate, up to twice as often.

Can I make it calmer or harsher?

intensity sets how far bands tear and channels split, and how loud the static is: subtle behind body text, medium by default, strong for a 404 or a game. --glitch-shift and --glitch-noise set the two directly.

Can I turn off the scanlines?

Yes: scanlines={false} removes the scanlines and the vignette and keeps everything else.

Is it heavy?

No. Every part changes only clip-path, translate or opacity, in steps, so the browser composites it without repainting, and no script runs. Its fifteen layers cost some GPU memory, as any animated layer the size of the screen does.

Is it safe for people sensitive to flashing?

The bursts move and split the picture rather than flash it, they're short, and they stay well under three a second over the whole screen; with reduced motion everything stops on a still frame.

API Reference

Glitch

<div> data-slot="glitch"

PropType

intensity?"subtle" | "medium" | "strong"

How hard each burst hits: how far the bands tear and the channels split, and how loud the static is. subtle behind body text, strong for a 404 or a game.

Type: "subtle" | "medium" | "strong"
Default: "medium"

scanlines?boolean

Whether fine CRT scanlines and a vignette cover the screen. @default true.