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

Data Stream Tunnel

Make direction and transformation legible before making it cinematic.

Use

Data platforms, observability, AI retrieval, ETL, build/deploy systems, real-time analytics.

Avoid

Avoid if the product does not process flows, or if movement implies real-time guarantees the product cannot provide.

Safer Alternative

Line Chart Draw

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

What It Is

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

Decision Guidance

Make direction and transformation legible before making it cinematic.

Best For

Data platforms, observability, AI retrieval, ETL, build/deploy systems, real-time analytics.

Avoid When

Avoid if the product does not process flows, or if movement implies real-time guarantees the product cannot provide.

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

Line Chart DrawTimeline RevealTool Call Timeline

✓When to Use

  • Product contexts: Data platforms, observability, AI retrieval, ETL, build/deploy systems, real-time analytics.
  • Choose it when the product intent matches Data / System Visualization rather than generic decoration.
  • Make direction and transformation legible before making it cinematic.

✕When NOT to Use

  • Avoid if the product does not process flows, or if movement implies real-time guarantees the product cannot provide.

Configuration Tips

  • 01Technical fit: CSS/SVG for simple flows; Canvas/WebGL/three.js for depth and particle density.
  • 02Performance: Use capped particle counts, instancing for WebGL, and reduced resolution on mobile.
  • 03Accessibility: Pair with labels or copy explaining what flows from where to where.
  • 04Reduced motion: Static pipeline diagram with directional arrows.

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 Data Stream Tunnel 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

Particle Network Field

Connected points suggest collaboration, intelligence, distributed systems, or data relationships. It can be ambient or interactive, but should remain subtle.

Animated Knowledge Graph

Nodes and links reveal relationships among documents, concepts, users, agents, or recommendations. It is most useful when relationships are the product value.

Tool Call Timeline

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.