17 · Inspiration · Animation

A small thing that breathes.

17 / 22

A gallery of live spinner candidates for the "in progress" indicator — the tiny thing that sits under a user message while the agent composes its reply. Every candidate is built from the chassis: signal palette only, grid-snapped, transform + opacity only, no rotating circles, no gradient text, no AI tells. One pick will live across every chat surface (onboarding, studio, chat widget, workflow authoring) so it has to survive thousands of repetitions. Twelve shown here; the full 40-candidate exploration lives at docs/plans/onboarding-spinner-alternatives.html.

Default · everyday
→ #20 Shape shift

Circle → square → diamond → hexagon, clip-path morph with signal palette cycling on the same beat. One element, continuous motion, never the same frame twice.

Ritual · onboarding
→ #21 Constellation settle

Three nodes pop in, edges draw, the triangle dissolves. Miniature force-sim — previews the Context Map reveal 20× smaller.

Hero · identity moments
→ #19 Figment birth

A different 5–6 rect block composition draws itself cell-by-cell every 3s, four hashed layouts rotate. The figment thumbnail system, live.

Ambient · background jobs
→ #13 Ellipsis morph

Three ink dots, staggered pulse. Intentionally universal; lets the eye pass over it. Chrome, not content.

01 Breathing quad

Four cells, each signal color, staggered pulses on a 3.2s loop. The seed of the whole exploration.

02 Heartbeat dot

The wordmark's italic red "." alive. Strongest brand recall; quietest motion.

03 Kind cycle

Cycles the four node-shape archetypes. The app rehearses its vocabulary while it waits.

10 Drift constellation

Five nodes drift like force-sim points that can't settle. A miniature Context Map.

19 Figment birth

A different block composition draws itself cell-by-cell every 3s. Four hashed layouts rotate. The identity system, live.

20 Shape shift

One element morphs through circle → square → diamond → hexagon via clip-path, fill cycles through the signal palette.

21 Constellation settle

Nodes appear, edges draw, triangle holds, dissolves. A map forming in a thumbnail.

seeing… reading… mapping… drawing… thinking…
27 Thinking word

Verbs cycle with a type-in effect and a red caret. Narrates the work in progress.

33 Orbit train

Three dots orbiting at different radii and speeds, two orbiting clockwise, one reversed. Miniature three-body motion.

33B Radar sweep

Red radial line sweeps clockwise; signal blips flash as it passes them. Reads as "scanning." Ops/console vibe.

34 Signal ripple

Concentric rings in signal colors emanate from a center point, expanding and fading. Radio-tower quiet.

35 Clock tick

Twelve radial ticks; each lights red in turn on a 3s loop. Feels mechanical, patient — the most "wait" of the set.

36 Crystalline grow

Branches radiate from a center, each in a staggered signal color, draw-in + draw-out. Reads as "something taking form."

37 Signal flow

Three signal-colored particles traverse an S-curve at 800ms intervals. Feels like data moving through a pipeline.

38 Grid breath

A 3×3 block grid inhales and exhales as one, each tile cycling color on a slower beat. Whole-chassis breathing.

Why not a spinning wheel. The wheel is the single most overused UI motif in software and it's a tell for generic AI-shipped product. It has three specific problems: (1) wrong mental model — "blocked, wait" vs. "actively working"; (2) no connection to the product — rotation is cheap, block art and signal palette are ours; (3) repetition fatigue — a wheel in the same spot 50 times a day becomes furniture. Every candidate here prefers a short loop-with-start-and-end (draw, settle, dissolve) over endless rotation.