soilmasssoilmass/motion-design-agent/skills/component-animations/SKILL.md

component-animations

Skill7 starsChanged 10 months agoMITView on GitHub

Complete animation specifications for UI component states. Use when implementing button, card, modal, toast, input, checkbox, switch, dropdown, or accordion animations with proper Disney principles and accessibility.

In this repository87 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- motion-designSkill
- 3d-transformsSkill
- accessibilitySkill
- android-nativeSkill
- animation-recipesSkill
- anticipationSkill
- arc-motionSkill
- attention-choreographySkill
- attentionSkill
- audio-reactiveSkill
- blurSkill
- brand-animationSkill
- cameraSkill
- characterSkill
- choice-resolutionSkill
- cinematicSkill
- code-generationSkill
- colorSkill
- 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

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

≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
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)
line 28
Distinctive:
All components must provide reduced motion alternatives:
line 133

≈ “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

Component Animations

Complete animation specifications for every UI component state. Reference this skill when implementing component-level animations with proper Disney principles, brand variations, and accessibility.

Component Catalog

Button

Interaction States:

Idle -> Hover -> Press -> Release -> Idle
Idle -> Focus -> Press -> Release -> Blur -> Idle
Any -> Disabled
Any -> Loading

State	Transform	Duration	Easing
Hover	`translateY(-2px)`	`short-3`	`standard-decelerate`
Press	`scale(0.95)`	`short-2`	`emphasized-decelerate`
Focus	Focus ring pulse	1.5s	`ease-in-out`
Loading	Spinner rotation	0.8s	`linear`

Brand Variations:

Elegant: No squash, subtle scale (0.98)
Playful: Bounce with overshoot, scale 0.92 -> 1.05
Bold: Quick snap, scale 0.95 -> 1.02

Card

Interaction States:

Idle -> Hover -> Press -> Idle
Idle -> Selected
Idle -> Dragging -> Drop

State	Transform	Duration	Easing
Hover	`translateY(-4px)` + shadow	`short-3`	`standard-decelerate`
Press	`scale(0.98)`	`short-2`	`emphasized-decelerate`
Entrance	fade + slide	`medium-1`	`emphasized-decelerate`
Dragging	`scale(1.02) rotate(2deg)` + shadow	-	-

Modal

States:

Closed -> Opening -> Open -> Closing -> Closed

State	Properties	Duration	Easing
Backdrop Open	opacity + blur	`medium-1`	`standard`
Content Open	opacity + scale + translateY	`medium-1`	`emphasized-decelerate`
Content Close	opacity + scale	`short-4`	`emphasized-accelerate`

Toast / Notification

States:

Hidden -> Entering -> Visible -> Exiting -> Hidden

Variant	Animation	Duration	Easing
Success	slide + bounce + checkmark draw	300ms	spring-bouncy
Error	slide + shake	250ms + 150ms	emphasized-decelerate
Info	slide	250ms	emphasized-decelerate

Input / Form Field

States:

Idle -> Focus -> Filled -> Blur
Any -> Error
Any -> Success

State	Animation	Duration	Easing
Label Float	translateY + scale(0.85)	`short-3`	`standard-decelerate`
Focus Ring	border + shadow	`short-3`	`standard-decelerate`
Error	shake + border color	150ms	`ease-out`

Checkbox

States:

Unchecked -> Checked -> Unchecked

Animation	Property	Duration	Easing
Check Draw	stroke-dashoffset	`short-3`	`emphasized-decelerate`
Box Fill	background-color	`short-3`	`standard`
Playful Bounce	scale 1.15	`short-4`	spring

Switch / Toggle

States:

Off -> On -> Off

Animation	Property	Duration	Easing
Knob Slide	translateX	`short-4`	spring-bouncy
Track Color	background-color	`short-3`	`standard`
Playful Squash	width stretch	`short-2`	`standard`

Dropdown / Select

States:

Closed -> Opening -> Open -> Closing -> Closed

Animation	Property	Duration	Easing
Menu Open	scaleY + opacity	`short-4`	`emphasized-decelerate`
Item Stagger	opacity + translateY	150ms	stagger 25ms

Accordion

States:

Collapsed -> Expanding -> Expanded -> Collapsing -> Collapsed

Animation	Property	Duration	Easing
Content Height	grid-template-rows	`medium-1`	`emphasized-decelerate`
Content Fade	opacity	`short-3`	`standard`
Icon Rotate	transform rotate(180deg)	`short-3`	`standard`

List Items

Animation	Property	Duration	Easing
Entrance Stagger	opacity + translateY	250ms	stagger 50ms
Swipe Dismiss	translateX + opacity + rotate	200ms	`emphasized-accelerate`

Accessibility Variants

All components must provide reduced motion alternatives:

@media (prefers-reduced-motion: reduce) {
  /* Disable all transform animations */
  .button, .card, .modal, .toast, .dropdown-menu {
    transition: opacity 100ms ease !important;
    transform: none !important;
    animation: none !important;
  }

  /* Keep essential state indicators */
  .button:hover, .card:hover {
    opacity: 0.9;
  }

  .button:focus-visible, .input:focus {
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
  }

  /* Instant state changes */
  .checkbox:checked + .checkbox__box .checkbox__check {
    stroke-dashoffset: 0;
    transition: none;
  }
}

Quick Reference Table

Component	Enter	Exit	Hover	Press
Button	-	-	`translateY(-2px)`	`scale(0.95)`
Card	fade+slide	fade	`translateY(-4px)`	`scale(0.98)`
Modal	scale+fade	scale+fade	-	-
Toast	slide+bounce	slide+fade	-	-
Input	-	-	-	-
Checkbox	draw	fade	-	-
Switch	spring	spring	-	-
Dropdown	scaleY	scaleY	-	-
Accordion	height	height	-	-
List Item	stagger	slide	background	-

Related Skills

animation-recipes - Pre-built recipes for component animations
accessibility - WCAG compliance for interactive components
easing - Curve selection for component states
entrance-patterns - Entrance animations for components
exit-patterns - Exit animations for components

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