Special/GlowingOrb

GlowingOrb

A large blurred radial gradient that follows the cursor with spring physics — perfect for ambient page lighting or interactive card highlights. Use contained to keep it inside a specific element.

import { GlowingOrb } from "@animui/ui"

Contained mode

Move your cursor inside the box — the orb follows within its bounds.

Move cursor here

Spring-physics tracking

Layered orbs

Two orbs, different speeds

Violet slow · Blue fast

Page-level usage

Default mode: position: fixed

Drop <GlowingOrb /> at the root of a dark layout. It renders as a fixed overlay with z-0 so all content with z-10 sits above it. Pointer-events-none — never blocks clicks. The orb follows the global cursor across the entire page.

Props

Prop	Type	Default	Description
`color`	`string`	`"#8b5cf6"`	CSS hex color of the orb.
`size`	`number`	`500`	Diameter in pixels before blur.
`blur`	`number`	`100`	CSS blur radius in pixels.
`opacity`	`number`	`0.12`	Overall opacity (0–1).
`stiffness`	`number`	`60`	Spring stiffness — higher = snappier follow.
`damping`	`number`	`20`	Spring damping — higher = less overshoot.
`followMouse`	`boolean`	`true`	When false, orb stays at its initial centre position.
`contained`	`boolean`	`false`	false = position:fixed (whole page). true = position:absolute inside nearest positioned parent.
`className`	`string`	—	Applied to the wrapper overlay div.