mcpField
T
timing-calibration

timing-calibration

github.com/dylantarreDesign & UI132503 installsUpdated 43w ago
Repository

About timing-calibration

A design skill for calibrating UI animation speed with Disney’s timing principles. It helps designers choose durations and easing based on action, distance, and visual hierarchy.

Key features

  1. 01Duration guidance by interaction type
  2. 02Easing recommendations for entrances and exits
  3. 03Timing scale for common UI motion
  4. 04Checklist for diagnosing motion issues
  5. 05CSS timing variables and examples

Use cases

  1. 01Adjusting animations reported as too slow or fast
  2. 02Aligning speeds across similar interface elements
  3. 03Choosing duration for a transition or reveal

Install

Copy the command and run it in a terminal.

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

After installing, type/timing-calibrationin Claude Code to confirm it loaded.

Details

From the project README

Timing Calibration

Get animation speed right using Disney's timing principles.

Problem Indicators

  • "Too slow" or "too fast" feedback
  • Animations feel inconsistent
  • Similar actions have different speeds
  • Users wait for animations
  • Motion feels robotic or unnatural

Diagnosis by Principle

Timing

Issue: Duration doesn't match action type Fix: Micro-interactions: 100-150ms. Transitions: 200-400ms. Complex reveals: 400-600ms. Never exceed 1s for UI.

Slow In and Slow Out

Issue: Linear timing feels mechanical Fix: Use easing. Ease-out for entrances (fast start, soft landing). Ease-in for exits (soft start, quick finish).

Arcs

Issue: Straight-line motion at wrong speed Fix: Curved paths need more time than straight paths. Increase duration for arc motion.

Staging

Issue: Multiple speeds compete Fix: Similar elements should animate at similar speeds. Create timing harmony.

Secondary Action

Issue: Secondary animations at wrong relative speed Fix: Secondary actions should be slightly slower than primary. Creates natural hierarchy.

Timing Scale

CategoryDurationUse For
Instant0-100msHover states, micro-feedback
Fast100-200msButtons, toggles, small elements
Normal200-300msCards, modals, most transitions
Slow300-400msPage transitions, large elements
Deliberate400-600msComplex reveals, onboarding

Quick Fixes

  1. Start with 200ms - Adjust from there
  2. Larger elements = longer duration - Size affects perceived speed
  3. Distance affects timing - Longer travel = longer duration
  4. Create a timing scale - Use 3-4 consistent values
  5. Test at 2x speed - If too slow works, use it

Troubleshooting Checklist

  • Is duration under 400ms for most UI?
  • Do similar elements have similar timing?
  • Is easing applied (not linear)?
  • Does larger movement have longer duration?
  • Test: Speed up by 30%—still readable?
  • Test: Slow down by 30%—feels sluggish?
  • Are users waiting for animations?
  • Compare to platform conventions (iOS/Android/Web)

Code Pattern

:root {
  /* Timing scale */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-deliberate: 500ms;

  /* Easing */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Size-aware timing */
.small-element { transition-duration: var(--duration-fast); }
.medium-element { transition-duration: var(--duration-normal); }
.large-element { transition-duration: var(--duration-slow); }

Comments

Markdown supported