Backgrounds
Background - Light beam
A masked conic-gradient disc rotates slowly behind content, reading as slow shafts of light.
- Conic gradient
- Radial mask
- Single rotating element
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A single conic-gradient disc is clipped by a radial mask so only a wedge of it stays visible, then the whole element rotates slowly on a continuous loop. As the bright part of the gradient sweeps past the mask opening it reads as a shaft of light drifting across the screen. Using one rotating element instead of many keeps it extremely cheap to render.
When to use it
- Behind a centered hero headline that needs a subtle focal glow
- On a dark product page where you want a slow cinematic light sweep
- As a low-cost background when you need motion but have a tight performance budget
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 4 options
colorBeam colour - 12-60s
speedRotation duration
Related components
Using this block
Buy it, then copy components/blocks/bg-light-beam/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.