Vortex Background

A swirling vortex wave background where particle streamlines converge on the center — a good fit for CTA sections.

A vortex background simulated as a canvas 2D particle flow field: hundreds of streamlines spiral inward toward the center, overlaid with organic waves and a glow, and the cursor can perturb the streamlines near it.

Loading preview…

npx shadcn@latest add https://webberui.com/r/vortex-background.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Particle countparticleCount

420

Spin speed multiplierspeed

Vortex strengthspin

Wave amplitudeturbulence

2.2

Glow blurglow

BackgroundbackgroundColor

<VortexBackground />

Installation

npx shadcn@latest add https://webberui.com/r/vortex-background.json

Or, once registries are configured in components.json, install it as @webberui/vortex-background.

Usage

import { VortexBackground } from "@/components/ui/vortex-background";

<VortexBackground
  interactive
  className="flex h-[320px] w-full items-center justify-center rounded-xl"
>
  <h3 className="text-3xl font-semibold text-white">Step into the eye of the vortex</h3>
</VortexBackground>

Container height, centering, and other layout go straight on className; avoid viewport height units (such as h-screen) and use a fixed or content-driven height so the background stays self-contained and bounded.

Props

Prop	Type	Default	Description
`particleCount`	`number`	`420`	Number of particles; lower it on mobile to save performance
`colors`	`string[]`	Magenta → indigo → cyan	Streamline colors, applied by cycling through the list
`speed`	`number`	`1`	Rotation speed multiplier — higher spins faster
`spin`	`number`	`1`	Vortex strength — higher pulls inward more aggressively
`turbulence`	`number`	`2.2`	Wave amplitude — the perturbation layered onto the flow direction
`particleWidth`	`number`	`1.4`	Base line width (px)
`backgroundColor`	`string`	`"#070316"`	Trail base color; a dark color is recommended so the glow stands out
`glow`	`number`	`0`	Glow blur amount (px) — higher is dreamier
`interactive`	`boolean`	`false`	The cursor perturbs nearby streamlines (mouse only)
`grain`	`boolean`	`false`	Overlays low-opacity grain to reduce banding
`className`	`string`	—	Container styling, forwarded (layout, height, corner radius)

Accessibility

When the user has "reduce motion" enabled at the system level, only a single static frame of the vortex is drawn — neither the animation loop nor the interaction starts
The background layer carries aria-hidden, so foreground content is announced as usual
Both cancelAnimationFrame and the ResizeObserver are cleaned up when the component goes away