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

Morphing Gradient Blob

Use slow breathing motion; do not let the blob cross text or controls.

Use

Onboarding, empty states, hero accent, AI thinking atmosphere, educational or creator products.

Avoid

Avoid when blob movement competes with form fields, charts, code blocks, or primary CTA reading.

Safer Alternative

Pulse Placeholder

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

An organic 2D shape shifts color, scale, or contour to add warmth and identity. It is lighter than a full shader scene and works well as a supporting accent.

Decision Guidance

Use slow breathing motion; do not let the blob cross text or controls.

Best For

Onboarding, empty states, hero accent, AI thinking atmosphere, educational or creator products.

Avoid When

Avoid when blob movement competes with form fields, charts, code blocks, or primary CTA reading.

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

Pulse PlaceholderParallax BackgroundAurora Shader Background

✓When to Use

  • Product contexts: Onboarding, empty states, hero accent, AI thinking atmosphere, educational or creator products.
  • Choose it when the product intent matches Shader / Atmosphere rather than generic decoration.
  • Use slow breathing motion; do not let the blob cross text or controls.

✕When NOT to Use

  • Avoid when blob movement competes with form fields, charts, code blocks, or primary CTA reading.

Configuration Tips

  • 01Technical fit: CSS border-radius animation, SVG filters, Canvas, or lightweight shader.
  • 02Performance: Prefer CSS transform/filter limits; avoid large animated blurs on low-end devices.
  • 03Accessibility: Keep it decorative and hidden from assistive tech if it carries no content.
  • 04Reduced motion: Static blob or fixed gradient accent.

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 Morphing Gradient Blob 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

Liquid / Wave Transition

A full page transition that begins as a small circle at the user's click coordinate, rapidly expanding outward like a liquid ripple to overtake the screen and reveal the new view.

Aurora Shader Background

A soft animated gradient field creates premium, calm, or futuristic atmosphere behind a hero or brand section. It should support mood while staying behind the content hierarchy.

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.