pleate.uiEffects
Backgrounds

Acid Squares

A rolling field of glossy rounded tiles. A slow wave lifts each tile, two colored lights drift across and catch the bevels, and the pointer swells the tiles under it.
import { AcidSquares } from "pleate/effects/acid-squares";

Behind a title

Move the pointer over the frame.

Built in squares

Props

colors

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

string[]default [accent, accent +140°, bg]

speed

Playback speed multiplier.

numberdefault 1

scale

Pattern size; above 1 is bigger.

numberdefault 1

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.