Generating Orb

A rotating shadow orb whose light sweeps behind a staggered word.

About this tool

The orb is a single rotating inset shadow stack, so there is no canvas and no framework runtime: the whole volume is CSS. Tune the diameter, shadow depth, both palettes, the word and its stagger in the HorizonX editor, then export a self-contained HTML file. Every offset is expressed in orb units, so resizing keeps the highlight on the same latitude.

In collections: Animated Orbs: AI, Siri & Voice Orb Animations

UI/UX · HTML / CSS All tools

Orb

Diameter px

Depth ×

Highlight

Halo

Core

Halo (half turn)

Core (half turn)

Label

Word

Text colour

#ffffff

Text size em

Tracking px

Resting opacity

Motion

Playback

play pause

Cycle ms

Letter stagger ms

Letter pop ×

Stage

Stage colour

#ffffff