Orb

Floating energy orb with customizable hover effect.

Default

Every prop is wired to the controls underneath. Hover the orb to distort it and make it spin.

Demo Content

FeaturesAbout Sign up

New Creative Components

Get started Learn more

Hue Shift0

Hover Intensity2

Rotate On HoverForce Hover State

Orb Background Color

Prop	Type	Default	Description
`hue`	`number`	`0`	The base hue for the orb (in degrees).
`hoverIntensity`	`number`	`0.2`	Controls the intensity of the hover distortion effect.
`rotateOnHover`	`boolean`	`true`	Toggle to enable or disable continuous rotation on hover.
`forceHoverState`	`boolean`	`false`	Force hover animations even when the orb is not actually hovered.
`backgroundColor`	`string`	`"#000000"`	The background color of the container.

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. Turn off rotateOnHover and keep hoverIntensity at 0 for users who prefer reduced motion.