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

Animated Knowledge Graph

Animate to reveal relationships, not to keep the graph in perpetual motion.

Use

Knowledge bases, AI memory, recommendation systems, research tools, entity graphs, agent planning.

Avoid

Avoid for small lists, pure decoration, or graphs whose structure is fabricated and might mislead users.

Safer Alternative

Timeline Reveal

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

CoreDocsToolsUsersAPI

What It Is

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

Decision Guidance

Animate to reveal relationships, not to keep the graph in perpetual motion.

Best For

Knowledge bases, AI memory, recommendation systems, research tools, entity graphs, agent planning.

Avoid When

Avoid for small lists, pure decoration, or graphs whose structure is fabricated and might mislead users.

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

Timeline RevealFolder Open RevealTool Call Timeline

✓When to Use

  • Product contexts: Knowledge bases, AI memory, recommendation systems, research tools, entity graphs, agent planning.
  • Choose it when the product intent matches Data / System Visualization rather than generic decoration.
  • Animate to reveal relationships, not to keep the graph in perpetual motion.

✕When NOT to Use

  • Avoid for small lists, pure decoration, or graphs whose structure is fabricated and might mislead users.

Configuration Tips

  • 01Technical fit: SVG or Canvas for moderate graphs; WebGL for large node counts.
  • 02Performance: Limit animated nodes, stabilize layout before reveal, pause physics after settling.
  • 03Accessibility: Provide an equivalent list/table summary and keyboard-accessible node details.
  • 04Reduced motion: Static graph snapshot or expandable relationship list.

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 Animated Knowledge Graph 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

Orbital Feature System

Feature nodes, icons, or modules orbit around a central product concept to suggest platform breadth, ecosystem structure, agent orchestration, or multiple capabilities connected to one core.

Particle Network Field

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

Data Stream Tunnel

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