pleate.uiEffects
Backgrounds

Beams

Slanted shafts of light falling from the top, each with its own width and a slow shimmer. They slide sideways; the pointer brightens the ones near it.
import { Beams } from "pleate/effects/beams";

Behind a title

Move the pointer over the frame.

Light from above

Props

colors

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

string[]default [accent, fg, bg]

speed

Playback speed multiplier.

numberdefault 1

scale

Pattern size; above 1 is bigger.

numberdefault 1

density

Beams across the frame height.

numberdefault 5

angle

Slant in degrees.

numberdefault 14

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.