Cards Containers

This breaks down Disney's 12 animation principles for card and container UI, which sounds academic but is actually practical. You get specific timing values (200-250ms for hover lifts), concrete CSS patterns with stagger delays, and rules like keeping squash and stretch under 3% scale change. The anticipation technique of briefly scaling down to 0.98 before expanding is the kind of detail that separates fluid interfaces from janky ones. It's opinionated about easing curves and insists cards follow arcs during drag operations, not straight lines. If you're building dashboards, galleries, or anything with interactive tiles and want them to feel physical instead of flat, the timing charts alone are worth having on hand.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill cards-containers --agent claude-code