HaloGlow

A slowly turning, blurred colour halo behind a logo, avatar or button.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/halo-glow.json

React
import HaloGlow from "@/components/fx/halo-glow"

<HaloGlow><Logo /></HaloGlow>

The halo is aria-hidden; the content inside is untouched.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) stops the rotation.

Prop	Type	Default	Description
children	ReactNode	—	The content in front of the halo.
colors	string[]	violet, cyan, pink	Halo colours.
speed	number	8	Seconds per turn.
spread	number	1.4	Halo size relative to the content.
paused	boolean	false	Stop turning.