Letter Glitch
A screen of monospace characters flipping to new glyphs and colors, faster around the pointer, with a vignette.
import { LetterGlitch } from "pleate/effects/letter-glitch";Behind a headline
Signal in the noise
Props
- characters
Characters to draw from.
string- fontSize
Glyph size in px.
numberdefault 16- rate
Share of glyphs that change every second.
numberdefault 0.6- vignette
Fade the edges into the background.
booleandefault true- colors
CSS colors or tokens: up to three glyph colors, then the vignette color. Defaults follow the palette.
string[]- speed
Playback speed.
numberdefault 1- scale
Pattern size; above 1 is bigger.
numberdefault 1- interactive
React to the pointer over the parent.
booleandefault true
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content on top stays usable.
- Pauses off screen and in hidden tabs; with reduced motion it shows a still frame.
- Fills its parent: give the parent position relative and the background absolute inset-0.