Spherical Arcs

Spherical Arcs

Glowing curves that flow across the surface of an invisible sphere, wrapping around each other in smooth 3D motion. Hover the sphere and a light spreads from the contact point outward — expanding like a ripple across the entire surface before fading away.

How it works

Every arc is computed in true 3D space, then projected onto 2D using tilt, viewing rotation, and a perspective divide. A single time accumulator drives all curves forward. When the cursor touches the sphere, the contact point is recorded and a spherical wave begins expanding from it — measured in angular distance across the sphere's surface. Points closer to the wavefront glow brighter, and the effect fades out over a customizable time when the cursor leaves.

Key Features

- Cursor-activated glow — light spreads from the exact point where your cursor touches the sphere

- Dual-color gradient — choose the activation gradient (e.g. coral → ice blue)

- 3D depth shading — arcs are shaded by their depth for a volumetric look

- Adjustable sphere geometry — width, height, tilt, and rotation

- 15 exposed properties — full control over geometry and activation behavior

Properties

- Curve count multiplier

- Curve thickness — min / median / max

- Sphere width & height

- Tilt angle & viewing rotation

- Twist amount

- Curve speed & line opacity

- Glow intensity

- Hover activation — on / off

- Activation brightness, diffusion speed, fade time

- Activation start color & end color

- Single color or gradient mode

Best for

Product hero sections, sci-fi aesthetics, brand reveals, and premium landing pages.