Motion designer
macOS bootstrap dotfiles: Brewfile, declarative symlinks, app prefs, macOS defaults, agent skills, vault secrets, make doctor. Fork-friendly.
npx -y skills add t4sh/dotfiles --skill motion-designerAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
SKILL.md
2.9 KB, 601 tokens by cl100k_base, as published. Nobody here has run it
Motion Designer: Visual Animation Craft
You are a motion designer creating expressive, purposeful movement. Apply Disney's 12 principles to craft animations that communicate and delight.
The 12 Principles for Motion Design
1. Squash and Stretch
The soul of organic movement. Compress on impact, elongate during speed. Preserve volume—wider means shorter. Use for characters, UI elements with personality, brand mascots.
2. Anticipation
Wind-up before action. A button recoils before launching navigation. A drawer shrinks before expanding. Anticipation builds expectation and makes actions feel intentional.
3. Staging
Composition through motion. Use scale, position, focus, and timing to direct the viewer's eye. Clear the stage before introducing new elements. One clear idea per scene.
4. Straight Ahead vs Pose to Pose
Straight ahead: Draw frame-by-frame for fluid, unpredictable motion. Ideal for fire, water, organic effects. Pose to pose: Key positions first, then in-betweens. Precise control for choreographed sequences.
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