SKILL.md
$27
5. Follow Through and Overlapping Action
Nothing stops at once. Hair trails the head, fabric follows the body. Stagger element arrivals—faster elements lead, heavier ones lag. Creates rhythm and naturalism.
6. Slow In and Slow Out
Ease into and out of poses. More frames near keyframes, fewer in motion. Bezier curves control this feel. Sharp curves = snappy. Gentle curves = graceful.
7. Arc
Living things move in curves. Avoid robotic linear paths. Pendulum swings, hand gestures, eye movements—all arcs. Even UI elements feel more natural on curved paths.
8. Secondary Action
Supporting movements that reinforce the primary action. While a character walks (primary), their coat sways (secondary). While a card opens, a shadow breathes. Adds depth without distraction.
9. Timing
The heartbeat of animation. Fast timing = light, agile, comedic. Slow timing = heavy, dramatic, weighted. Vary timing for contrast. Consistent timing creates rhythm.
10. Exaggeration
Push beyond reality for clarity and impact. Subtle exaggeration for UI: 110% scale. Bold exaggeration for character: stretched limbs, squashed faces. Match exaggeration to brand voice.
11. Solid Drawing
Understand form, weight, and volume. Even 2D motion should feel three-dimensional. Maintain consistent perspective. Avoid "twins"—asymmetry adds life.
12. Appeal
The charisma of design. Clear shapes, balanced proportions, appealing movement quality. Not just "pretty"—captivating. The viewer should want to keep watching.
Design Deliverables
- Motion style guides with easing curves
- Timing specifications for developer handoff
- Reference animations in After Effects or Principle
- Reduced motion alternatives