Vortex — React Animated Background
Spiral galaxy with logarithmic arms, hashed starlight and a breathing core.

Starting live preview
Usage
import { Vortex, VORTEX_PRESETS } from "@/components/Vortex";
export function GalaxyHero() {
return (
<section style={{ position: "relative", minHeight: "100dvh" }}>
<Vortex {...VORTEX_PRESETS.galaxy}
{...{
interactive: true,
speed: 0.45,
swirl: 2.4,
arms: 2,
coreGlow: 1.2,
color: "#818cf8",
emission: "#e0f2fe"
}}
/>
<div style={{ position: "relative", zIndex: 1, padding: "10rem 2rem" }}>
<h1>Pull them in</h1>
</div>
</section>
);
}Implementation notes & API
Purpose: galaxy/swirl backdrop for launch heroes; center-weighted so content works best offset to one side. Mount: full-bleed layer behind content. Props: color (dust), emission (core/stars), speed, swirl (tightness), arms (arm count), coreGlow. Pointer: the vortex center leans toward the cursor; interactive={false} pins it. Guardrails: transparent background by design — place over a dark solid; WebGPU required with fallback prop.
| Property | Type | Notes / default |
|---|---|---|
interactive | boolean | false in the library; enabled in this preview |
fallback | ReactNode | Shown when the renderer is unavailable |
className / style | string / CSSProperties | Applied to the outer container |
View source on GitHubFree for commercial projects · MIT