Motion / effect

Energy Orb

An iridescent energy field with luminous edges, flowing noise and responsive hover distortion.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Adapted from React Bits Orb with the complete original noise, hue, lighting and transparency shader. Reuse is explicitly authorized; the source notice is bundled.
Import EnergyOrb.tsx into a sized parent. Demo.tsx supplies a responsive agent-energy scene and keyboard-accessible activation. It does not capture audio or contact any service.
Props update uniforms without replacing the WebGL context. Pointer interaction uses the original circular hit region; activation offers a keyboard equivalent.
Pause holds shader time, rotation and hover. Hidden/offscreen time is excluded. Reduced motion paints a stationary shape. Replay resets phase and hover while keeping surrounding content mounted.
WebGL2 failure provides a CSS orb fallback. Rendering caps DPR at 2 and canvas dimensions at 2048 pixels per side; the shader runs per visible animation frame.
This is distinct from the caustic agent orb: it uses a luminous perimeter, transparent centre and hover-driven warping.

React 19.2Modern browsers

React Bits — David Haz · MIT. See bundled notice.

Prop	Type	Default	Description
`hue`	number	`0`	Hue rotation in degrees; primitive accepts −360 through 360.
`hoverIntensity`	number	`0.2`	Strength of hover distortion, bounded to 0–2.
`forceHoverState`	boolean	`false`	Sustain the active shape without a pointer.
`backgroundColor`	string	`'#000000'`	Six-digit hexadecimal color used for shader compositing.
`paused`	boolean	`false`	Stop decorative motion while keeping content usable.
`replayToken`	number	`0`	Change to reset decorative motion without remounting primitive children.