mcpField
U
universal-timing

universal-timing

github.com/dylantarreCreative & media132480 installsUpdated 43w ago
Repository

About universal-timing

A design skill for making animation timing decisions at different durations using the Disney principles. It provides proportional timing ratios, easing guidance, and context-based rules for choosing duration.

Key features

  1. 01Timing guidance across durations
  2. 02Anticipation and follow-through ratios
  3. 03Stagger delay recommendations
  4. 04Easing guidance by duration
  5. 05Context-based duration rules

Use cases

  1. 01Setting timing for short and long animations
  2. 02Choosing stagger delays for sequences
  3. 03Adjusting motion to communicate importance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill universal-timing

After installing, type/universal-timingin Claude Code to confirm it loaded.

Details

From the project README

Universal Timing Principles

Some animation truths transcend duration. These principles work at 50ms and 5000ms. Master these to make good timing decisions at any scale.

Disney Principles - Universal Application

Always True

Squash & Stretch: Scale proportionally - 5% at 100ms, 30% at 2000ms. Never eliminate, always proportional.

Anticipation: Ratio stays constant - anticipation is 20-30% of main action duration, regardless of total time.

Staging: One clear focus - whether instant or cinematic, only one thing should demand primary attention.

Straight Ahead/Pose to Pose: Complexity matches duration - short = straight ahead, long = pose to pose.

Follow Through: Present at all durations - even 100ms can have micro-overshoot. Scale matches duration.

Slow In/Slow Out: Always ease - linear motion looks mechanical at every duration.

Arcs: Natural paths scale - short animations = subtle curves, long animations = sweeping arcs.

Secondary Action: Supports, never competes - true at 50ms and 5000ms.

Timing: Duration determines perception - same motion reads differently at different speeds.

Exaggeration: Match duration and importance - longer duration allows more exaggeration.

Solid Drawing: Transforms must match - consistency matters regardless of speed.

Appeal: The goal - animation should enhance, not impede, at any duration.

Universal Ratios

The Golden Ratio of Animation Timing
Anticipation : Action : Follow-through
    20%      :   50%  :     30%

Example at 500ms:
  Anticipation: 100ms
  Main action: 250ms
  Follow-through: 150ms
Stagger Ratio
Optimal stagger delay: 10-20% of item duration

Item duration: 300ms
Stagger delay: 30-60ms between items
Easing Intensity vs Duration
Duration < 150ms: ease-out only (no time for ease-in)
Duration 150-400ms: ease-out or custom
Duration 400ms+: full ease-in-out possible

Easing That Works Everywhere

/* Universal ease-out - works at any duration */
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

/* Universal natural motion */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* Universal bounce - scale amplitude with duration */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

Universal Laws

  1. Shorter distances = shorter durations - motion should feel proportional to space.

  2. Bigger elements move slower - perceived weight requires more time.

  3. Enter fast, exit faster - users care about what's arriving, not leaving.

  4. Context determines tolerance - first visit allows longer animation than repeat use.

  5. Attention is finite - compete for it wisely, regardless of duration.

  6. Physics provides intuition - match real-world expectations at any speed.

  7. Easing is mandatory - linear motion looks wrong at every duration.

  8. Test at extremes - if it works at 2x and 0.5x, it's robust.

Duration Selection Framework

What should the user feel?
├── Instant (< 100ms)
│   └── Confirmation, responsiveness
├── Quick (100-300ms)
│   └── Efficiency, polish
├── Standard (300-500ms)
│   └── Clarity, communication
├── Deliberate (500-1000ms)
│   └── Importance, attention
└── Dramatic (> 1000ms)
    └── Story, emotion, memory

Key Insight

Duration is a design decision. It communicates importance, guides attention, and shapes emotion. The Disney principles are tools - timing is how you wield them. Master the principles, then let context determine duration.

Comments

Markdown supported