MenuClose

Vortex — React Animated Background

Spiral galaxy with logarithmic arms, hashed starlight and a breathing core.

View source
PreviewWEBGPU
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.

PropertyTypeNotes / default
interactivebooleanfalse in the library; enabled in this preview
fallbackReactNodeShown when the renderer is unavailable
className / stylestring / CSSPropertiesApplied to the outer container
View source on GitHubFree for commercial projects · MIT