pleate.uiEffects
Backgrounds

Ferrofluid

A glossy black pool of magnetic fluid. Swells roll across and raise fields of spikes, and the pointer pulls up a crown. The fluid stays dark in both themes.
import { Ferrofluid } from "pleate/effects/ferrofluid";

Behind a title

Move the pointer over the frame.

Magnetic

Props

colors

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

string[]default [accent, light accent, bg]

speed

Playback speed multiplier.

numberdefault 1

scale

Pattern size; above 1 is bigger.

numberdefault 1

density

Spikes across the frame height.

numberdefault 22

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.