# animation-systems

> Claude/Codex skill by [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars · Updated 2026-10-18

Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.

## Install

```sh
git clone https://github.com/MengTo/Skills /tmp/Skills && ln -s /tmp/Skills/agent-skills/web-design/animation-systems ~/.claude/skills/animation-systems
```

## From README

Animation Systems (Stripe × Linear × Apple × Vercel) This skill helps you ship tasteful, product-grade motion. Not “more animation.” Better animation: clarity, hierarchy, feedback, and delight—without jank. --- The goals (why motion exists) Use animation to: 1) Explain hierarchy (what matters) 2) Confirm action (feedback) 3) Guide attention (where to look next) 4) Maintain continuity (spatial relationships) 5) Add polish (craft signals) If an animation doesn’t serve one of these, delete it. --- The Stripe/Linear/Apple/Vercel style (shared traits) 1) Restraint Fewer animations, better chosen. One strong hero moment; the rest is supporting motion. 2) Clear choreography Primary element moves first. Secondary elements follow with small stagger. Motion establishes a “reading order.” 3) Physical but not cartoony Use easing that feels human (soft acceleration + gentle settle). Avoid bouncy defaults for serious product UI.

## Links

- HTML page: https://omgskills.com/library/mengto/skills/animation-systems/
- GitHub: https://github.com/MengTo/Skills
- Author: [@mengto](https://omgskills.com/library/mengto/index.md)

## More from this repo

- [animation-on-scroll](https://omgskills.com/library/mengto/skills/animation-on-scroll/index.md) — Used to create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and...
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 7.3k stars
- [beautiful-shadows](https://omgskills.com/library/mengto/skills/beautiful-shadows/index.md) — Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation.
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars
- [build-awwwards-quality-sites](https://omgskills.com/library/mengto/skills/build-awwwards-quality-sites/index.md) — Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original...
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars