Back to Dictionary
Creative Motion
●●●Requires Setup
Use sparingly

Tool Call Timeline

Prefer truthful discrete states over decorative “thinking” loops.

Use

AI agents, build pipelines, diagnostic tools, workflow automation, assistant products.

Avoid

Avoid when operations are instant, private, security-sensitive, or not actually observable.

Safer Alternative

Indeterminate Progress Bar

Risk Level

High attention

Timing

Keep loops slow and ambient; use one-shot reveals when the motion is introducing content or explaining a process.

Easing

Use restrained ease-out/ease-in-out curves for UI-adjacent motion; reserve continuous linear motion for flows, orbits, and ambient fields.

Risk

performance sensitiveaccessibility sensitiveoverdesigned

Live Demo

Search
Read
Validate
Write

What It Is

Sequential operations such as search, read, transform, validate, write, deploy, or review become visible so agent and automation activity is understandable without pretending to reveal hidden reasoning.

Decision Guidance

Prefer truthful discrete states over decorative “thinking” loops.

Best For

AI agents, build pipelines, diagnostic tools, workflow automation, assistant products.

Avoid When

Avoid when operations are instant, private, security-sensitive, or not actually observable.

Timing

Keep loops slow and ambient; use one-shot reveals when the motion is introducing content or explaining a process.

Easing

Use restrained ease-out/ease-in-out curves for UI-adjacent motion; reserve continuous linear motion for flows, orbits, and ambient fields.

Risk Tags

performance sensitiveaccessibility sensitiveoverdesigned

Alternatives

Indeterminate Progress BarProgressive Checklist FillTimeline Reveal

✓When to Use

  • Product contexts: AI agents, build pipelines, diagnostic tools, workflow automation, assistant products.
  • Choose it when the product intent matches Data / System Visualization rather than generic decoration.
  • Prefer truthful discrete states over decorative “thinking” loops.

✕When NOT to Use

  • Avoid when operations are instant, private, security-sensitive, or not actually observable.

Configuration Tips

  • 01Technical fit: CSS, Framer Motion, and SVG are usually enough; Canvas only for dense traces.
  • 02Performance: Animate only state changes. Avoid looping loaders for completed steps.
  • 03Accessibility: Use semantic status text and live-region discipline for important updates.
  • 04Reduced motion: Instant step-state changes with icons and timestamps.

You've Seen It In

Motion Dict Creative Motion Pack

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Design a Tool Call Timeline for this product context. First explain the product intent, when not to use it, performance budget, accessibility constraints, and reduced-motion fallback. Then propose the simplest implementation family that can express the idea safely.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function MotionDecisionChecklist() {
  const steps = [
    'Confirm product intent',
    'Choose the simplest implementation family',
    'Set performance caps and mobile fallback',
    'Add reduced-motion behavior',
    'Verify accessibility and readable content',
  ];

  return steps;
}

Related Effects

Timeline Reveal

A vertical or horizontal timeline that reveals milestones in order, connecting each event with a drawing line or staggered item entrance.

Data Stream Tunnel

Directional flow through space—particles, lines, or panels moving from source to destination—communicates ingestion, pipelines, telemetry, search, or transformation.

AI Thinking Orb

An abstract status object pulses, breathes, morphs, or responds to audio/tool activity to communicate processing, listening, generating, or system presence in an AI product.