Tide Orb

A light glass sphere with two soft tides turning inside it.

About this tool

A CSS-only loader built from two off-round blobs pushed up out of a circular mask and spun a full turn, so the edge that cuts across the sphere rises and falls and the thing reads as water sloshing. The source geometry is preserved exactly at the shipped defaults, but every length is quoted against the orb diameter, so it holds from a 48px inline spinner to a hero tile. The skin is inverted to the HorizonX light neutrals, with ink kept only for the rim and the ground shadow. HorizonX adds a screen-reader label, a paused state and a reduced-motion pose that parks both tides off-axis instead of hiding them. Edit the size, palette, tide roundness, waterline and cadence, then export one self-contained HTML file.

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

UI/UX · HTML / CSS All tools

Copy

Screen-reader label

Sphere

Orb size px

Basin colour

Depth colour

Rim shading %

Ground shadow %

Tide

Front tide

#ffffff

Front roundness %

Back tide

#ffffff

Back tide opacity

Back roundness %

Tide lift %

Motion

Turn duration ms

Back tide speed x

Preview

State

running paused

Stage

Stage colour

#ffffff