PixelGlitch

Three-layer glitch effect (R/C ghost layers + main) with clip-path slices and color separation.

Layered R/C color-separation ghosts for authentic CRT-glitch feel
Configurable duration and horizontal displacement intensity
Animation trigger modes: mount, hover, click, focus, in-view, manual
Holds still when the user prefers reduced motion, from the server-rendered first paint on
Glitches any content, or a label held once in the document for a heading: its copies are drawn by CSS

Status: stable
Category: animations
Since: v1.6.0

API

import { PixelGlitch } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content to glitch: each colour copy repeats it.
`label`	`string`	—	Text to glitch, in place of `children`: it is in the document once — the stylesheet draws its colour copies — so a heading's text reads once to crawlers, copying and text extraction.
`duration`	`number`	`3000`	Length of one full glitch loop in milliseconds. Default `3000`.
`intensity`	`number`	`4`	Maximum horizontal displacement (pixels) of the ghost layers. Default `4`.
`trigger`	`'mount' \| 'hover' \| 'click' \| 'focus' \| 'inView' \| boolean`	`'mount'`	When the animation should play. Default `'mount'`.
`onComplete`	`() => void`	—	Fires after the final iteration.
`as`	`'div' \| 'span'`	`'div'`	Element of the wrapper and its layers. `'span'` puts the glitch inside phrasing content, such as a heading: wrap the heading around it, as the layers repeat whatever they hold. Default `'div'`.
`className`	`string`	—	Extra class names applied to the wrapper.

ref points to its element (HTMLElement).

WCAG target: 2.1 AA

aria-hidden on decorative ghost layers
a label's copies drawn by CSS, without alternative text
respects prefers-reduced-motion

The copies of other content are layers marked aria-hidden, so assistive technology reads the content once, though it is in the document three times. A label is in the document once: its copies are drawn by the stylesheet, with no alternative text for assistive technology — use one for a heading. Animation is suppressed when the user prefers reduced motion.

Usage

import { PixelGlitch } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelGlitch>
      <span className="text-2xl font-bold">SYSTEM ONLINE</span>
    </PixelGlitch>
  );
}

Examples

Default

import { PixelGlitch } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelGlitch>
      <span className="text-2xl font-bold">SYSTEM ONLINE</span>
    </PixelGlitch>
  );
}

High intensity

import { PixelGlitch } from '@pxlkit/ui-kit';

export function HighIntensity() {
  return (
    <PixelGlitch intensity={8} duration={2000}>
      <span className="text-2xl font-bold">CRITICAL ERROR</span>
    </PixelGlitch>
  );
}

Hover trigger

import { PixelGlitch } from '@pxlkit/ui-kit';

export function HoverTrigger() {
  return (
    <PixelGlitch trigger="hover">
      <span className="text-2xl font-bold">HOVER ME</span>
    </PixelGlitch>
  );
}

Heading label

A label glitches with its text once in the document: the copies are drawn by the stylesheet, so a heading reads once to crawlers, copying and screen readers. Put the heading around the glitch, as a span.

import { PixelGlitch } from '@pxlkit/ui-kit';

export function HeadingLabel() {
  return (
    <h2 className="text-2xl font-bold">
      <PixelGlitch as="span" label="SIGNAL LOST" />
    </h2>
  );
}