Components

Backdrop

The page background: aurora glows over contours or dots, and a light that follows the pointer and catches card edges, or drifts round them by itself on pages with no pointer.

Move the pointer

Card edges and the contour lines light up near it.

Import

import { Backdrop } from '@rinzai/zen';

Examples

For a page that never gets a pointer, such as an OBS browser source: data-zen-glow="ambient" sends the edge light slowly round each border by itself. Put it on <html> for the whole page, or on any element for what's inside it. data-zen-page="transparent" on <html> (with the base stylesheet) paints nothing behind the content, so the stream shows through.

Now playingLo-fi beats

Chat

API reference

<Backdrop>

Fixed page background: slow aurora glows over a faint pattern (topographic contours or a dot grid), with a light that follows the pointer. It also lights .glow-edge and .glow-border borders (cards, outline buttons, dialogs, fields) near the pointer. Render once, behind everything.

Prop	Type	Default
`className` Classes for the backdrop layer (e.g. a view-transition-name).	`string`	`—`
`pattern` Background pattern. Defaults to contours when `topoSrc` is given, dots otherwise.	`"contours" \| "dots"`	`—`
`topoSrc` URL of a contour-line image (strokes on transparent), used as a mask.	`string`	`—`

Zen