Vortex
<Vortex>CSS ModulesPremium GPU spiral particles with soft persistence trails on native WebGL (Canvas 2D fallback). Fills any container, stays behind children. Parent controls background (canvas is transparent by default).
InstallationColoxo CLI
npx coloxo add vortexES Module ImportPlayground / npm package
import { Vortex } from '@coloxo/ui/visuals';1. Quick demo
A continuous spiral behind the panel. For the full hero, controls, and variants, open the Blocks page.
Spiral light, native WebGL
Parent paints the midnight background. Animation pauses when the tab is hidden.
2. Blocks showcase
See the composed hero, live controls, CTA banner, and feature card examples on the Blocks page.
3. Props
| Name | Type | Default | Description |
|---|---|---|---|
| particles | number | 420 | Base particle count before quality/area scaling (40–900). |
| speed | number | 1 | Motion multiplier (0.1–3). |
| range | number | 1 | Spiral radius scale (0.25–2). |
| colors | string[] | — | Particle palette (CSS color strings). |
| intensity | number | 0.65 | Brightness / size (0–1). |
| trailPersistence | number | 0.7 | How long trails linger (0–1). |
| quality | "low" | "medium" | "high" | medium | Internal canvas resolution and particle density scale. |
| centerX | number | 0.5 | Vortex center X as fraction of width (0–1). |
| centerY | number | 0.5 | Vortex center Y as fraction of height (0–1). |
| paused | boolean | false | Stop continuous animation. |
| respectReducedMotion | boolean | true | Honor prefers-reduced-motion (static frame). |