Prismatic Burst
Spectral rays bursting from a bright core and slowly turning. The core leans towards the pointer. Fills its parent: place it with absolute inset-0 behind your content.
import { PrismaticBurst } from "pleate/effects/prismatic-burst";Behind a headline
Launch day
Props
- colors
CSS colors or tokens: [tint]. 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- tint
How much the rays take the tint color, 0 to 1.
numberdefault 0.3
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.