Velora UI

Background Beams

Light beams flowing along curved paths behind content.

  • 1.1 KB gzipped
  • Deps: motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

Now in public beta

Deploy on every push

Preview links for each branch, ready before the review starts.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/background-beams.json

Adds components/velora/background-beams.tsx, installs motion and merges the keyframes and tokens into your CSS.

Props

PropTypeDefault
classNamestring—
count

Number of beams

number7

Accessibility

Reduced motion
Only the faint static base curves render; the coloured beams and their gradient animations are not mounted.
Keyboard
Decorative — nothing to operate.
Screen readers
Decorative; the wrapper is aria-hidden.