design-infraReport a problem or share feedback← Catalog
Shader Background
freebeui/shader-background
Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.
$
npx shadcn@latest add @beui/shader-backgroundnpm deps: @paper-design/shaders-react, clsx, motion, tailwind-merge
- Source
- beUI (free)
- Kind
- effect
- Categories
- background
- Use as
- drop-in — replaces your component
- Applies to
- background
- Motion
- on loop · expressive · webgl + motion · high cost
- Tags
- react, tailwind-v4, motion, motion
- Licence
- MIT — Copyright (c) 2026 Saurabh Chauhan; retain the upstream notice when copying source.
- Live demo
- beui.dev
- Docs
- beui.dev
Similar
Compare all 4 →- Aurorareact-bits/auroraWebGL aurora backdrop (ogl, ~small). colorStops default to React Bits purple/green — pass your --primary hexes. Lazy-load; one per page.
- Beamsreact-bits/beamsthree.js light beams backdrop — striking but heavy (three + @react-three/fiber + drei). Use only for a hero, lazy-loaded.
- Dot Fieldreact-bits/dot-fieldInteractive dot grid with cursor bulge, glow, sparkle, and wave effects.