pleate.uiEffects
Backgrounds

Faulty Terminal

A screen of pixel glyphs typed in ragged lines that keep rewriting, with scanlines, flicker and rows that tear sideways. The pointer brightens nearby text.
import { FaultyTerminal } from "pleate/effects/faulty-terminal";

Behind a title

Move the pointer over the frame.

System nominal

Props

colors

CSS colors, tokens included. Missing entries use the default.

string[]default [accent, bg]

speed

Playback speed multiplier.

numberdefault 1

scale

Pattern size; above 1 is bigger.

numberdefault 1

rows

Text rows across the frame height.

numberdefault 18

glitch

Glitch amount, 0 to 1.

numberdefault 0.5

interactive

React to the pointer over the parent element.

booleandefault true

Accessibility

  • Decorative: the canvas is aria-hidden and ignores pointer events, so content above it stays clickable.
  • Fills its parent: give it absolute inset-0 inside a positioned element, with the text on top.
  • Pauses off screen and in hidden tabs. Without WebGL2 it renders nothing, so keep a background color on the parent.
  • Reduced motion draws one still frame.