Leo: Thinking Animations

Reasoning & Pre-output States

Reasoning

Idle / Ready

Slow, low-amplitude breathing pulse (scale 1.0 → 1.03, ~2.8s loop). Signals "alive and available" without pulling focus. This is the resting character.

Reasoning

Input Received

Quick one-shot acknowledgment pop (scale bump) with a ripple ring expanding outward. Confirms the system heard the user before any latency kicks in.

Reasoning

Thinking / Reasoning

Asymmetric axis morph: the icon gently alternates between wider and taller, combined with a radial halo and out-of-phase glow pulse. Reads as "computation inside."

Reasoning

Querying / Data Fetching

Directional scanning sweep + sequential dot fill. Reads as "retrieving" rather than "pondering." Analytics users notice the data is being pulled.

Reasoning

Planning / Multi-step

Nodes connect sequentially as Leo decomposes an agentic task into steps. Makes a long wait feel purposeful and structured.

Reasoning

Clarifying / Needs Input

Gentle tilt + bounce, like the assistant turning toward you. Breaks the working loop without alarming. Feels like an open posture, not an error state.

Generating & Output States

Generating

Generating Text

Steady rhythmic emit motion synced loosely to streaming output, plus a pulsing caret and shimmer text lines. Calm cadence. Feels like "emitting," not "loading."

Generating

Building a Visualization

Bars grow from zero one by one, reinforcing that Leo produces native Pendo charts. Analytics-specific, distinct from generic AI text output.

Generating

Complete / Settling

Single confident elastic settle: one soft pop, a brief checkmark, then smooth return to rest. Avoid celebration; the value is in the result, not the fanfare.

Retry
Generating

Error / Retry

Brief shake + desaturated hue shift toward warning tone, then a retry cue surfaces. Short and non-punishing. Don't make the user feel bad, just surface the path forward.

System & Lifecycle States

System

Cancel / Stop Generation

User pressed the stop button mid-generation. Icon decelerates and holds at reduced scale. Voluntary halt, not an error. Signals that partial output is preserved.

↑
Agentic

Executing Action / Tool Use

Double upward thrust with an animated cursor. Assertive and directional. Leo is doing something, not pondering. Distinct from Thinking; this has physical, decisive momentum.

System

Long-running / Patient

Subdued 90% scale + a slowly filling arc. "I'm still here, this is just big." Distinct reassurance for tasks beyond 10s. Not idle, not thinking, just a long haul.

Agentic

Awaiting Confirmation

Single deliberate pulse then a long hold + two paired dots pulsing below. Attentive stillness. Not idle, not thinking. Leo is turned toward the user, waiting on a decision.

Reasoning

Reading / Parsing Input

Horizontal scan line sweeps the stage while the icon micro-shifts left and right. Systematic and methodical. Input-directed absorption that reads as "studying your message."

System

Connecting / Initializing

Scale entry from near-zero with two expanding rings. The waking-up moment before Leo is ready. Rings expand outward as the icon springs to full size.

Reasoning

Regenerating / Revising

Icon compresses → holds → springs back as a sweeping arc draws around it. Taking a breath with full context before trying again. Purposeful restart, not a failure.

System

Rate Limited / Cooldown

Faded icon (52% opacity) + a timer arc that depletes from full to empty. Opacity keeps the gradient color-true. No muddy gray. System is healthy; Leo just needs a brief window.

System

Interrupted / Preempted

User sends a new message mid-generation. Quick lateral snap-to-attention with a brief flash ring. Distinct from a graceful stop. Resets immediately toward idle/listening.

Leo reasoning states — Tier 1

These are the reasoning phases Leo already moves through. In production the phases are already real — each is surfaced as status text in the reasoning timeline (e.g. "Leo is thinking…", "Analyzing activity data…"). What Tier 1 adds is a distinct icon animation per phase. Today the icon only has two modes: a breathe, and orbiting dots while a streaming artifact builds.

Use the A / B / C toggles to compare options for each state. Open the Sequence player (bottom-right): Recommended Set (tour) shows the full set at an easy pace, and the scenario flows (Quick answer, Data + chart, Report, Error + recovery, User stops) play at rough real-world timings so you can judge whether each animation reads at speed. Different prompts surface different phases — a simple ask is 2 phases; a report runs several. Transient signals (error, stop) fire once; ongoing states loop. (Timings are estimates — real phase durations still TBD.)

Tier 1 wire-ready. Cards tagged Tier 1 map to signals that already exist in conversation-panel.vue and reasoning-panel.vue. Use the A / B / C toggles on each Tier 1 card to compare animation options. Open Sequence → Production Flow (Tier 1) to watch your selected A / B / C picks play through a real flow — the star holds one size throughout; only the motion and the status text change per state. Note: Completion is not a Tier 1 state — every Minimal state rests at the same neutral star between beats, so when reasoning ends the star simply hands off to the static sparkle already sitting next to the answer (no separate exit animation needed). See the (i) button for the leoPhase wiring table.

Claude agent path — steps beneath (Option A)

The Claude agent (segment flag agentPathFlag) renders a step-by-step activity timeline instead of the single reasoning line. Per an earlier decision, Tier 1 brings the bare star onto this surface too — steps shown beneath, collapsing to a "Reasoning" toggle when done (also a reviewer's "steps beneath" ask). Mock only; real data needs the flag + Claude backend.

Artifact card — building state (hero home for the viz)

Instead of forcing the bars into the 36px chat gutter, the crowd-favourite viz motion lives inside the chart artifact card as its loading skeleton — bars build in-place, then resolve into the real chart. Real canvas, semantically honest (a chart is forming here), and it’s a reviewer’s "match loading anims with visualizations" ask. Mock only; needs the chart to stream a started signal so the card mounts empty first.

Weekly active accounts
Building visualization…
Wk 1Wk 2Wk 3Wk 4Wk 5Wk 6

Reasoning & Pre-output States

Reasoning

Idle / Ready

Barely-perceptible breathing scale (1.0 → 1.05). The icon is simply alive. No embellishment needed.

Reasoning

Input Received

Spring pop to 1.12× scale with elastic decay. Snaps to attention instantly, then settles. No rings needed; the icon's own response is the acknowledgment.

Reasoning

Thinking / Reasoning

A (recommended) is the Minimal dual-beat pulse — motion only, reads in grayscale / for colorblind + low-vision. B is the Experimental hue pendulum (color-led — the room liked this). C is the Exploration axis-morph + halo. No satellite here — thinking is pure glyph.

Reasoning

Querying / Data Fetching

A is the Minimal scan taps; B the Experimental sonar ping; C (recommended) \u2014 the star itself emits a pulse (scale + soft glow radiating out) that reads as a "ripple / reaching out," with the dots as results arriving. No separate ring objects; the star carries the action.

Reasoning

Planning / Multi-step

Three distinct scale steps, each with a brief hold, then an exhale. The deliberate pauses signal structured, counted thinking rather than general activity.

Reasoning

Clarifying / Needs Input

Gentle rocking tilt: left lean, right settle, elastic decay. Evokes a head-tilt "I'm listening" posture without any separate UI element.

Generating & Output States

Generating

Generating / Streaming

Streaming Artifact folded in here (2026-07-15) — prod only tells them apart by text label, so they share one state. A is the vertical "writing bob" (motion-led, no hue); B is the aurora hue drift; C (recommended) is short gray lines under the star, each written by a quick highlight zip (fast pass then a beat, cascading line to line = "typing bursts"). No overlap with the star; caret cut (read as a glitch).

Generating

Building a Visualization

Fires while create_highcharts_tool runs. A is the Minimal stepped size build (read from SIZE alone — grayscale-safe); B the Experimental max-charge glow; C (recommended) is the Exploration take the Jam liked — native Pendo bars under a calm star \u2014 the original build, now looping (bars grow in sequence with a small overshoot, hold assembled, then rebuild). Motion/shape carry it, not color.

Folded

Streaming Artifact → Generating

Not a separate voting state anymore. Document / segment / table artifacts set streamingArtifact, but prod only distinguishes them from text generation by the status label — the motions were redundant. Folded into Generating / Streaming above so we vote on one state, not two. (Orbiting dots that prod shows today are a Tier 2 concern.)

Generating

Complete / Settling

Confident elastic pop to 1.36 then multi-stage decay. Bigger than an idle breathe, smaller than a celebration. The settle IS the satisfaction signal.

Generating

Error / Retry

A (recommended) is the Minimal shake + desaturate — reads in grayscale, no color dependence. B adds an Experimental recoil + hue-cool; C is the Exploration shake with a "Retry" cue that now fires in sync with the shake — one coordinated "failed → here's your out" beat that rests with Retry visible. Brief and non-punishing.

System & Lifecycle States

System

Cancel / Stop Generation

Not a voting state (decided 2026-07-15). Stop is transient and near-identical to completion, so it's an exit-into-complete: a single brief arrest that settles to the neutral star, which then becomes the static sparkle. No distinct A/B/C.

Agentic

Executing Action / Tool Use

Double upward thrust + scale: two decisive pushes. Rhythm alone distinguishes this from Thinking. No extras needed; the directional motion is the message.

System

Long-running / Patient

Scale-only breathe at 90–95%, 5.2s cycle. Subtlety is the point. The slower, smaller breath versus normal idle says "working on something large" without alarm.

Agentic

Awaiting Confirmation

A single peak to 1.05× scale followed by an extended flat hold at 1.03×. The held "breath" is the attention. Distinct from idle's continuous flow.

Reasoning

Reading / Parsing Input

Steady left-to-right micro-scan (translateX ±4px) at slightly reduced scale. Four passes per cycle; the eye-like rhythm says "reading" without any external scan line.

System

Connecting / Initializing

Spring entry from 35% opacity + 0.35× scale. The icon fades in as it grows, with elastic overshoot to 1.10× then settles. The fade-in separates this from all other scale animations.

Reasoning

Regenerating / Revising

Compress to 80% → brief hold → spring to 1.12× → settle. The pause at minimum is the "breath before restart." Different rhythm from Connecting's linear emergence.

System

Rate Limited / Cooldown

Opacity fade (50–60%) + slow reduced breathing (88–92%, 4.8s). The pink gradient recedes cleanly without shifting toward gray. The icon dims but stays true to its color.

Reasoning & Pre-output States

Reasoning

Idle / Ready

Living hue drift: the gradient slowly cycles through adjacent hues (pink → coral → magenta) while breathing. The icon is alive in color, not just in scale.

Reasoning

Input Received

Flash bloom: a large drop-shadow bursts outward on impact (scale 1.25×) then quickly decays through a spring. The glow is intentionally bold; the acknowledgment should feel instant and vivid.

Reasoning

Thinking / Reasoning

Hue pendulum: the gradient swings between cooler magenta (−28°) and warmer coral (+22°) on each beat, as if oscillating between two mental modes. Color shift signals active cognition without warp or spin.

Reasoning

Querying / Data Fetching

Sonar triple-ping: three descending pulses in quick succession (14px → 10px → 6px glow), then silence. The grouped burst reads as "reaching out" not "waiting around."

Reasoning

Planning / Multi-step

Ratchet escalation: four distinct scale steps (1.06 → 1.11 → 1.16 → 1.20×), each briefly held, then a smooth descent. The deliberate staircase communicates structured buildup.

Reasoning

Clarifying / Needs Input

Deep head-tilt: a −22° rotation with a scale dip (icon steps back slightly to "listen"), then elastic recovery. A bigger commitment to the open-posture gesture.

Generating & Output States

Generating

Generating Text

Aurora drift: a continuous hue-rotate cycles the gradient ±28° through warm adjacent hues while a glow breathes steadily. Perpetual motion = emission in progress.

Generating

Building a Visualization

Rotate-in build: same 3-step assembly as A, but each step swings in ±4–5° and clicks to true as it scales up — rotation (not glow) sells "pieces snapping into place." Motion-led and a11y-safe; glow is a faint accent only.

Generating

Complete / Settling

Spring pop + hue flash: scale hits 1.28× with a brief magenta hue burst (−22°), then elastic decay through warm coral (+12°) before settling. The hue moment makes the satisfaction feel instantaneous.

Generating

Error / Retry

Recoil + hue-cool: icon snaps backward in scale (0.93×), gradient briefly cools toward desaturated red (−18°), then slowly warms back. The color story adds emotional weight to the shake.

System & Lifecycle States

System

Cancel / Stop Generation

Scale snaps to 78% while the gradient cools −22° toward blue ("frozen"). The hue shift makes the halt feel more decisive. Gradient slowly warms back as the state persists.

Agentic

Executing Action / Tool Use

Each upward thrust surges the gradient −22° warmer + fires a glow bloom. Two distinct bursts of energy: color and scale reinforce each other to say "impact."

System

Long-running / Patient

Lower scale range (85–91%) + hue drifts through ±16°. The icon is visibly smaller AND chromatically shifting. A stronger "in a different mode" signal than the intrinsic version.

Agentic

Awaiting Confirmation

Holds at 1.07× + a sustained −15° cool hue with a soft glow. The icon leans forward chromatically. Attentive focus made visible through color, not just scale.

Reasoning

Reading / Parsing Input

Wider scan (±6px) + hue swings direction with each pass: cool left, warm right. The chromatic pendulum makes the scanning rhythm unmistakable and surprisingly expressive.

System

Connecting / Initializing

Near-zero opacity → 1.30× peak with a 24px glow bloom: a dramatic awakening. The massive overshoot + bloom are intentional: this is the moment the system comes alive.

Reasoning

Regenerating / Revising

Compress to 72% with a −30° hue-cool → re-emerge at 1.24× with a +16° warm bloom. The hue goes cold then hot. The same icon is literally arriving as a "new" version of itself.

System

Rate Limited / Cooldown

Opacity fade + slow hue drift through ±16° at 86–90% scale. The icon recedes in brightness AND shifts chromatically. Two clean low-power signals, no gray mud.

System

Interrupted / Preempted

Scatter-and-recoalesce: icon briefly shrinks + rotates + desaturates as if pulled mid-thought, then snaps back with energy. Exaggerated version makes the context switch unmistakably legible.