Timing Principle Mastery

This breaks down animation timing into practical frameworks you can actually use. It covers the frame rate foundations (1-2 frames for impacts, 8-12 for natural movement), timing categories from physical to theatrical, and domain-specific ranges like UI (100-200ms for responsive interactions, 300-500ms for complex transitions). The timing contrast principle is the most useful bit: fast only feels fast against slow, and held poses create emphasis. It gives you a starting heuristic of 200-300ms for standard interactions, then adjust based on mass, distance, and importance. The domain applications section translates animation theory into concrete millisecond ranges for buttons, modals, and transitions.

skills.sh installs: 565
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill timing-principle-mastery --agent claude-code

Installs into .claude/skills of the current project.

Files

Timing Mastery

The Weight of Time

Timing is the number of frames (or milliseconds) an action takes. It's deceptively simple—just duration—yet it communicates weight, emotion, and energy more powerfully than any other principle. Change the timing, change the meaning.

Core Theory

Physical communication: Timing tells us about mass and force. Heavy objects start slow, stop slow. Light objects respond instantly. A bowling ball and a balloon falling the same distance—timing alone differentiates them.

Emotional communication: Timing tells us about character state. Sluggish timing reads as tired, depressed, or massive. Snappy timing reads as alert, nervous, or lightweight.