Liquid Ether
Colored smoke stirred by the pointer: a small fluid simulation on the GPU that stirs itself when idle.
import { LiquidEther } from "pleate/effects/liquid-ether";Behind a headline
Stir the ether
Props
- force
Force the pointer puts into the fluid.
numberdefault 1- radius
Splat radius as a share of the short side.
numberdefault 0.1- persistence
How long the dye lingers.
numberdefault 1- autoDemo
Stir by itself without a pointer.
booleandefault true- colors
CSS colors or tokens: three dye colors, then the backdrop. 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.