Anchor-Dot Motion Study

AI Electron 2.0 · anchor-dot

Anchor-Dot Motion Study

The agreed motion spec for the hotspot marker: Default breathes, and Hover and Selected add a sonar ripple on top of that breathing halo. Scene image set aside so the motion is all that's on screen.

1.0×
Solar
State: Default Hover to preview · click to select · click again to deselect

The three states

Live and side by side — this is the behaviour as specced.

Default

Breathe

Periwinkle core, halo gently swells in and out. Calm "there's something here."

Solar
Hover

Breathe + Sonar

Core lifts and shows its label; sonar ripples switch on. Signals "this is focused."

Selected

Breathe + Sonar

Core flips to deep indigo and keeps breathing with ripples while its card is open.

The two ingredients

Every state is built from these, layered on the core vs. the ripple rings.

Breathe

The translucent halo scales in and out around the core. Always running.

Sonar

Two staggered rings expand and fade outward. Added on hover & selected.

Dot spec is the exact SEW anchor-dot component: a #A0A0FA periwinkle core (default & hover) that becomes #030373 deep indigo when selected, a 1 px #E6E6E6 outline, and a translucent #032973 halo. Motion: Default = Breathe, Hover & Selected = Breathe + Sonar. Use the Green / Navy surface toggle to check legibility on the scene and in dark UI.