Velora UI

Vortex

Brand-tinted particles spiralling into the centre, leaving soft fading trails.

  • 2.8 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Into the vortex

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/vortex.json

Adds components/velora/vortex.tsx.

Examples

CTA band

A dark call-to-action band where the trails glow against the black.

Everything your team ships, in one place

Start free. Invite your team when you are ready — no card required.

Start building

Props

PropTypeDefault
particles

Maximum particle count; capped by container area so small screens draw fewer

number520
speed

Rotation speed multiplier

number1
range

How far the swirl reaches towards the edges, 0–1

number1

Also accepts every <div> attribute, forwarded to the root element.

Accessibility

Reduced motion
No animation runs: the canvas pre-computes a short burst of motion and shows it as one frozen swirl, redrawn on resize and theme change.
Keyboard
Decorative — nothing to operate.
Screen readers
Decorative; the wrapper is aria-hidden, so only the content layered above is announced.