Halo Rings — React Animated Background

Concentric light rings breathing outward from a luminous core, each sampled at three radii so the band edges split into spectral fringes like light through a prism.

View source

Starting live preview

Usage

import { HaloRings, HALO_RINGS_PRESETS } from "@/components/HaloRings";

export function HaloHero() {
  return (
    <div style={{ position: "relative", width: "100%", height: 420 }}>
      <HaloRings {...HALO_RINGS_PRESETS.dawn}
        {...{
          interactive: true,
          speed: 1,
          intensity: 1,
          rings: 3,
          dispersion: 0.55,
          from: "#fef3c7",
          to: "#7dd3fc",
          accent: "#c4b5fd"
        }}
      />
    </div>
  );
}

Implementation notes & API

Purpose: breathing halo backdrop — rings emitted in staggered phases, each fading as it grows, with chromatic dispersion (R/G/B sampled at slightly different radii). Mount: full-bleed layer behind content on a dark base. Props: speed, intensity, rings (1-6), dispersion (spectral split), from/to/accent (core, mid, rim colors). Pointer: interactive is off by default; set it and the halo center gently drifts toward the cursor. Guardrails: WebGPU required with fallback prop; reduced motion freezes the breath; keep overlaid text off the core for contrast.

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