timing-calibration — Claude Code skill: fix animation timing
A skill that diagnoses animations that feel too fast, too slow or inconsistent, then hands back concrete durations and easing.
npx skills add dylantarre/animation-principles --skill timing-calibration -a claude-codeWhat timing-calibration does
The skill kicks in when animation speed feels off: too fast, too slow, or similar elements moving at different rates. It walks through Disney's principles one by one — timing, slow in and slow out, arcs, staging, secondary action — and pairs each with a diagnosis and a fix.
There is a duration scale: instant states 0–100ms, buttons and toggles 100–200ms, cards and modals 200–300ms, page transitions 300–400ms, complex reveals 400–600ms. For UI it advises staying under 1s. Easing gets its own section: ease-out for entrances, ease-in for exits, since linear timing reads as mechanical. A CSS pattern ships with variables like --duration-fast, --duration-normal, --duration-slow and cubic-bezier curves.
Worth testing against your own codebase. The checklist suggests speeding animations up by 30% and slowing them down by 30%, then comparing against platform conventions. If your project already defines duration tokens, the scale here may not match them — you will have to pick one source of truth.
What it helps with
- work out why an animation drags or snaps too fast
- align the speed of similar elements
- pick a duration that matches element size and travel distance
- swap linear timing for easing on entrances and exits
- set a speed hierarchy between primary and secondary motion
Example prompts for the agent
- the modal animation feels too slow, pick a duration for it
- the button and the card move at different speeds, put them on one scale
- the page transition looks mechanical, change the easing
How to install timing-calibration
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill timing-calibration -a claude-code2Manually: put the files in place
~/.claude/skills/timing-calibration/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/timing-calibration/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill timing-calibration -a codex2Manually: put the files in place
.agents/skills/timing-calibration/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill timing-calibration -a cursor2Manually: put the files in place
.cursor/skills/timing-calibration/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles timing-calibration2Manually: put the files in place
.github/skills/timing-calibration/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill timing-calibration -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/12-by-problem-type/timing-calibrationManually: put the files in place
.devin/skills/timing-calibration/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill timing-calibration -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about timing-calibration
How do I install timing-calibration in Claude?
Run npx skills add dylantarre/animation-principles --skill timing-calibration -a claude-code. The skill file lands at ~/.claude/skills/timing-calibration/SKILL.md.
What does timing-calibration do?
It diagnoses animation speed problems against Disney's principles and returns specific durations and easing. It covers timing, slow in and slow out, arcs, staging and secondary action.
What durations does the skill recommend?
Micro-interactions 100–150ms, transitions 200–400ms, complex reveals 400–600ms. For UI it advises never exceeding 1s.
Source text
SKILL.md · MIT
---
name: timing-calibration
description: Use when animation speed feels wrong—too fast, too slow, or inconsistent
---
# 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
| Category | Duration | Use For |
|----------|----------|---------|
| Instant | 0-100ms | Hover states, micro-feedback |
| Fast | 100-200ms | Buttons, toggles, small elements |
| Normal | 200-300ms | Cards, modals, most transitions |
| Slow | 300-400ms | Page transitions, large elements |
| Deliberate | 400-600ms | Complex 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
```css
: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); }
```
© dylantarre · MIT · dylantarre/animation-principles
