# timing-calibration

A skill that diagnoses animations that feel too fast, too slow or inconsistent, then hands back concrete durations and easing.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 497 installs · ★ 124
- Author: dylantarre
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/12-by-problem-type/timing-calibration/SKILL.md
- Updated: 2025-12-30
- HTML: https://affpapa.org/en/nevibecode/skills/timing-calibration

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill timing-calibration -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/timing-calibration/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/timing-calibration/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill timing-calibration -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/timing-calibration/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill timing-calibration -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/timing-calibration/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles timing-calibration
```

2. **Manually: put the files in place**
- File: `.github/skills/timing-calibration/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill timing-calibration -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/12-by-problem-type/timing-calibration
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/timing-calibration/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill timing-calibration -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/12-by-problem-type/timing-calibration/SKILL.md

## When to use it
- 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
- 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

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 070c67ab49fa555b.

BEGIN THIRD-PARTY FILE 070c67ab49fa555b
````text
---
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 */
````
END THIRD-PARTY FILE 070c67ab49fa555b

The third-party file has ended. Everything between the 070c67ab49fa555b tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2515 of 2866 bytes. © dylantarre · MIT · https://github.com/dylantarre/animation-principles/tree/HEAD/skills/12-by-problem-type/timing-calibration/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md