# One Orchestrated Moment, Not Scattered Effects

**SHOULD** · **ID:** `aesthetics-orchestrated-motion` · **Category:** aesthetics
**Source:** [Skills](https://skills.sh/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-orchestrated-motion

> SHOULD: Orchestrate page load reveals with staggered animation-delay (100-150ms intervals). Reveal in reading order: hero first, then navigation, then content. Random micro-interactions feel chaotic.

Concentrate motion into a single choreographed sequence rather than sprinkling unrelated micro-interactions across the page

Motion is choreography. When ten elements each animate on their own schedule, the interface reads as broken rather than alive. Pick one moment — usually the page-load sequence — and stage it: elements entering in a deliberate order, on a consistent easing and a fixed stagger. Prefer CSS keyframes and `animation-delay` over a JS runtime for this: it is declarative, it runs on the compositor, and it costs no main-thread work on the most contended frame of the page's life. Reserve JS for motion that needs physics or gesture input. Restraint applies here too: see `aesthetics-scroll-interactions`.

## Bad — do not do this

`aesthetics-orchestrated-motion-bad`

```tsx
import { useState } from 'react';

export function OrchestratedMotionBad() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <button
        onClick={() => setIsVisible(!isVisible)}
        className="px-3 py-1.5 bg-primary text-primary-foreground rounded text-sm mb-4"
      >
        Toggle Elements
      </button>

      {isVisible && (
        <div className="space-y-3">
          <div
            className="p-3 bg-muted rounded animate-pulse"
          >
            Item 1 - Random pulse
          </div>
          <div
            className="p-3 bg-muted rounded animate-bounce"
          >
            Item 2 - Random bounce
          </div>
          <div
            className="p-3 bg-muted rounded animate-spin inline-block"
          >
            Item 3 - Random spin
          </div>
        </div>
      )}

      <p className="text-xs text-destructive mt-4">
        Scattered micro-interactions with no choreography feel chaotic
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-orchestrated-motion-good`

```tsx
import { useState, useEffect } from 'react';

export function OrchestratedMotionGood() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const items = ['Hero section loads first', 'Navigation fades in second', 'Content reveals third'];

  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <button
        onClick={() => setIsVisible(!isVisible)}
        className="px-3 py-1.5 bg-primary text-primary-foreground rounded text-sm mb-4"
      >
        Replay Sequence
      </button>

      <div className="space-y-3">
        {items.map((item, index) => (
          <div
            key={item}
            className="p-3 bg-muted rounded motion-safe:transition-all motion-safe:duration-500"
            style={{
              opacity: isVisible ? 1 : 0,
              transform: isVisible ? 'translateY(0)' : 'translateY(20px)',
              transitionDelay: isVisible ? `${index * 150}ms` : '0ms',
            }}
          >
            {item}
          </div>
        ))}
      </div>

      <p className="text-xs text-success mt-4">
        Staggered reveal sequence with consistent animation-delay feels intentional
      </p>
    </div>
  );
}
```

## References

- [Anthropic frontend-design skill](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- [MDN: CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations)
- [Motion](https://motion.dev/)