pleate.uiEffects
Backgrounds

Pixel Blast

Drifting noise drawn as a dithered field of chunky pixels. The pointer sends ripples through it. Fills its parent: place it with absolute inset-0 behind your content.
import { PixelBlast } from "pleate/effects/pixel-blast";

Behind a headline

Built pixel by pixel

Props

colors

CSS colors or tokens: [low, high]. Defaults follow the palette.

string[]

speed

Playback speed.

numberdefault 1

scale

Pattern size; above 1 is bigger.

numberdefault 1

interactive

Follow the pointer over the parent element.

booleandefault true

shape

Pixel shape.

"square" | "circle"default "square"

density

How much of the field is lit, 0 to 1.

numberdefault 0.5

Accessibility

  • Decorative: the canvas is aria-hidden and ignores pointer events, so content on top stays clickable.
  • Pauses off screen and in hidden tabs; reduced motion shows one still frame.
  • WebGL2 shader; renders nothing without WebGL2, so keep a background color behind it.