soilmasssoilmass/motion-design-agent/skills/animation-recipes/SKILL.md

animation-recipes

Skill7 starsChanged 10 months agoMITView on GitHub

Pre-built animation recipes for common UI scenarios. Use when implementing button press, success notifications, error shake, modal entrance, page transitions, list stagger, card hover, hero reveal, or form animations.

In this repository87 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- motion-designSkill
- 3d-transformsSkill
- accessibilitySkill
- android-nativeSkill
- anticipationSkill
- arc-motionSkill
- attention-choreographySkill
- attentionSkill
- audio-reactiveSkill
- blurSkill
- brand-animationSkill
- cameraSkill
- characterSkill
- choice-resolutionSkill
- cinematicSkill
- code-generationSkill
- colorSkill
- component-animationsSkill
- compositingSkill
- consequenceSkill
- container-transformSkill
- css-advancedSkill
- data-visualizationSkill
- depthSkill
- distortionSkill
- dramaturgySkill
- durationSkill
- easingSkill
- emotional-journeySkill
- emotion-mappingSkill
- emotion-selectionSkill
- empty-statesSkill
- entrance-patternsSkill
- exaggerationSkill
- exit-patternsSkill
- exportSkill
- figma-integrationSkill
- follow-throughSkill
- frame-timingSkill
- gesture-motionSkill
- glow-shadowSkill
- intentSkill
- ios-nativeSkill
- loading-statesSkill
- loopingSkill
- lottieSkill
- masksSkill
- microstateSkill
- morphingSkill
- motion-auditSkill
- motion-blurSkill
- motion-principlesSkill
- motion-specsSkill
- narrative-arcSkill
- notificationsSkill
- onboardingSkill
- opacitySkill
- orchestratorSkill
- particlesSkill
- The first 60 shown.

The file

We split this skill into the rules it gives an agent

3 rules. About 0 are common, 3 are distinctive, and 0 are very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈3
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Elegant: No squash, subtle scale (0.98), caps exaggeration
line 67
Distinctive:
Use video-specific durations (shorter than web):
line 241
Distinctive:
All video text must meet minimum size constraints:
line 253

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Animation Recipes

Complete catalog of pre-built animation recipes for common UI scenarios. Each recipe combines duration, easing, and Disney principles into production-ready animations.

Choice Resolution

Recipes provide base values that get transformed through the resolution pipeline:

Recipe (base) → Emotion (modifier) → Brand (constraint) → Platform (adaptation) → Bounds → Accessibility (override)

Resolution Order

Recipe provides base - duration, easing, principles
Emotion modifies - multiplies duration, may override easing
Brand constrains - caps exaggeration, may disable features
Platform adapts - applies duration multiplier (video = 0.6×)
Bounds clamp - enforces M3 limits (50-600ms web, 50-400ms video)
Accessibility overrides - reduced motion bypasses all above

Video Platform Integration

When platform === "video":

Parameter	Adjustment
Duration	× 0.6 (faster for engagement)
Max duration	400ms (not 600ms)
Intro delay	0ms (content on first frame)
Transitions	3-6 frames max

Worked Example

Input: success-notification + celebratory emotion + professional brand + video platform

1. Recipe base:      300ms, spring-bouncy
2. + Celebratory:    300 × 1.2 = 360ms
3. + Professional:   exaggeration capped to "subtle", no particles
4. + Video:          360 × 0.6 = 216ms
5. + Bounds:         216ms (within 50-400ms) ✓
6. Final:            216ms, spring-bouncy, subtle exaggeration

See choice-resolution/ skill for full algorithm.

Recipe Catalog

Feedback Animations

Button Press

Use case: Tactile feedback for button interactions

Property	Value
Duration	`short-4` (200ms)
Easing	`emphasized-decelerate`
Principles	Anticipation (micro), Squash-stretch (subtle)

Brand Constraints:

Elegant: No squash, subtle scale (0.98), caps exaggeration
Playful: Bounce with overshoot, scale 0.92 -> 1.05, allows all features
Bold: Quick snap, scale 0.95 -> 1.02, allows expressive effects

Success Notification

Use case: Celebratory feedback for completed actions

Property	Value
Duration	`medium-2` (300ms)
Easing	`spring-bouncy`
Principles	Anticipation, Squash-stretch, Follow-through, Secondary glow

Error Shake

Use case: Attention-grabbing error feedback

Property	Value
Duration	`short-3` (150ms)
Easing	`standard`
Principles	Exaggeration (moderate), Secondary color flash

Navigation Animations

Modal Entrance

Use case: Dialog/overlay appearance

Property	Value
Duration	`medium-1` (250ms)
Easing	`emphasized-decelerate`
Principles	Anticipation (micro), Staging, Backdrop secondary

Page Transition

Use case: Route change animations

Property	Value
Duration	`medium-2` (300ms)
Exit Easing	`emphasized-accelerate`
Enter Easing	`emphasized-decelerate`
Principles	Staging (shared-axis), Follow-through

Direction Patterns:

Forward: Exit left, enter from right
Backward: Exit right, enter from left
Up/Down: Vertical variants for hierarchical navigation

Content Animations

List Stagger

Use case: Multiple items entering sequentially

Property	Value
Duration	`medium-1` (250ms) per item
Stagger	50ms base (adaptive)
Easing	`emphasized-decelerate`
Principles	Follow-through (stagger), Overlap 30%

Adaptive Stagger Formula:

staggerDelay = min(50ms, max(25ms, 800ms / itemCount))

Card Hover

Use case: Interactive card states

Property	Value
Duration	`short-3` (150ms)
Easing	`standard-decelerate`
Principles	Exaggeration (subtle), Shadow secondary

Hero Reveal

Use case: Landing page hero entrance

Property	Value
Duration	`medium-3` (350ms) total
Easing	`emphasized-decelerate`
Principles	Anticipation, Staging, Cascading follow-through

Sequence:

Background fade (0ms)
Headline slide-up (100ms delay)
Subhead slide-up (200ms delay)
CTA scale-in (350ms delay)

Form Animations

Input Focus

Use case: Form field focus state

Property	Value
Duration	`short-3` (150ms)
Easing	`standard-decelerate`
Principles	Secondary label float, Border highlight

Checkbox Toggle

Use case: Checkbox state animation

Property	Value
Duration	`short-3` (150ms)
Easing	`emphasized-decelerate`
Principles	Anticipation (micro), Draw animation

Switch Toggle

Use case: Toggle switch animation

Property	Value
Duration	`short-4` (200ms)
Easing	`spring-snappy`
Principles	Squash-stretch, Follow-through (knob)

Recipe Selection Guide

By Interaction Type

Interaction	Recipe
Button click	`button-press`
Success feedback	`success-notification`
Error feedback	`error-shake`
Open dialog	`modal-entrance`
Close dialog	`modal-exit`
Navigate forward	`page-transition` (forward)
Navigate back	`page-transition` (backward)
Load list	`list-stagger`
Card interaction	`card-hover`
First impression	`hero-reveal`
Form focus	`input-focus`
Toggle state	`checkbox-toggle` or `switch-toggle`
Milestone	`celebration`

By Brand Personality (Constraints)

Brands apply constraints (caps and restrictions), not multipliers:

Brand	Max Exaggeration	Squash	Particles	Bounce
Elegant	subtle	✗	✗	✗
Professional	subtle	✗	✗	✗
Friendly	moderate	✓	✓	✓
Playful	expressive	✓	✓	✓
Bold	expressive	✓	✓	✓

By Device Context

Context	Adjustments
Mobile	Increase duration 1.1x, reduce distance
Tablet	Standard timing
Desktop	Standard timing
Low-end device	Simplify to opacity-only, reduce particles
Reduced motion	Use instant or fade-only variants

Video-Specific Guidelines

Scene Start Timing

CRITICAL: Videos should start with content immediately. Dead air at the beginning frustrates viewers.

Intro Type	Duration	Use
`immediate`	0ms	Default. Content appears on first frame.
`short`	200ms	Only after explicit audio cue.
`standard`	500ms	Maximum. Only for dramatic section breaks.

Between-Scene Transitions

Use video-specific durations (shorter than web):

Transition	Web Duration	Video Duration
Crossfade	300ms	100ms (3 frames)
Dissolve	400ms	150ms (5 frames)
Slide	400ms	200ms (6 frames)

Never use pixel dissolve for standard video transitions. It looks dated.

Typography Sizing

All video text must meet minimum size constraints:

Element	Base Size	Minimum
Title	80px	48px
Subtitle	32px	24px
Lower Third Name	28px	20px
Lower Third Title	18px	14px
Body	24px	18px
Caption	16px	14px

Celebration Effects

IMPORTANT: The celebration recipe requires explicit triggering. It should never auto-trigger.

When to use:

Milestone reached
Achievement unlocked
Task completed
Level up

When NOT to use:

Scene transitions
Background animations
Regular content entrances
Ambient effects

Performance Checklist

Use will-change for animated properties
Prefer transform and opacity over layout properties
Use contain: layout for isolated animations
Batch DOM reads and writes
Use requestAnimationFrame for JS animations
Test on low-end devices
Provide reduced motion alternatives

Related Skills

choice-resolution - Unified parameter resolution pipeline
emotion-mapping - Map emotions to recipe parameters
component-animations - Component-specific recipes
easing - Easing curve selection for recipes
duration - Duration selection for recipes
platform-adaptation - Platform-specific adjustments
code-generation - Generate code from recipes

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free