Backdrop

A decorative background that fills its parent: soft mesh, aurora, grid or dots, all drawn from theme tokens. Free and static; for animated shaders see the FX pages.

// Plain markup
import { BACKDROP_FREE_VARIANTS, Backdrop } from "@shavin/ui";

Free variants

mesh

aurora

grid

dots

Component Source

<Box className="relative overflow-hidden">
  <Backdrop variant="mesh" />
  <Box className="relative">Content</Box>
</Box>

Gradient backgrounds

For a static or slowly drifting mesh on any Section, Box or Card, use the bgOverlays presets instead. See Gradient Backgrounds under FX.

Props

Prop	Type	Default	Description
variant	BackdropVariant	—	Which backdrop to draw. Unknown names fall back to `mesh`.