pleate.uiEffects
Backgrounds

Ghost Fibers

Ribbons of fine glowing fibers that twist, fold and drift on three depths with a shallow depth of field. The pointer height picks the ribbon in focus.
import { GhostFibers } from "pleate/effects/ghost-fibers";

Behind a title

Move the pointer over the frame.

Fine threads

Props

colors

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

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

speed

Playback speed multiplier.

numberdefault 1

scale

Pattern size; above 1 is bigger.

numberdefault 1

fibers

Fibers per ribbon, 2 to 24.

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.