Data Visualization

This applies Disney's 12 animation principles to charts and dashboards, which sounds gimmicky but actually makes sense. You get specific timing recommendations (300-500ms for initial entry, 200-300ms for updates), staggered reveals for data points, and easing functions that make value transitions readable instead of jarring. The quick reference table maps each principle to concrete implementations like bar overshoot, sequential staging, and curved paths for flow diagrams. Includes D3.js and Chart.js patterns you can copy directly. The timing guidance alone is worth it if you've ever animated a chart and had it feel either sluggish or too abrupt.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill data-visualization --agent claude-code