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

Particle Network Field

Tie node behavior to a product metaphor such as agents, documents, or users.

Use

AI agents, network/security products, collaboration tools, infrastructure platforms, knowledge systems.

Avoid

Avoid as a generic tech background with no connection to the product story. Avoid high particle counts on mobile.

Safer Alternative

Aurora Shader Background

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

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

Decision Guidance

Tie node behavior to a product metaphor such as agents, documents, or users.

Best For

AI agents, network/security products, collaboration tools, infrastructure platforms, knowledge systems.

Avoid When

Avoid as a generic tech background with no connection to the product story. Avoid high particle counts on mobile.

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

Aurora Shader BackgroundMorphing Gradient BlobAnimated Knowledge Graph

✓When to Use

  • Product contexts: AI agents, network/security products, collaboration tools, infrastructure platforms, knowledge systems.
  • Choose it when the product intent matches Shader / Atmosphere rather than generic decoration.
  • Tie node behavior to a product metaphor such as agents, documents, or users.

✕When NOT to Use

  • Avoid as a generic tech background with no connection to the product story. Avoid high particle counts on mobile.

Configuration Tips

  • 01Technical fit: Canvas for most cases; WebGL when particle count or effects require GPU acceleration.
  • 02Performance: Cap particles by viewport/device, throttle pointer interactions, pause offscreen, and avoid continuous layout work.
  • 03Accessibility: Do not make links/content depend on moving nodes. Avoid flashing connections.
  • 04Reduced motion: Static constellation or low-opacity network illustration.

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 Particle Network Field 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.

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.

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.