Motion Patterns

A focused set of copy-paste animation patterns built on Framer Motion and motion-foundations tokens. It covers the usual suspects: buttons, modals, toasts, staggered lists, page transitions for Next.js App Router, and scroll reveals. The core contract is strict: every conditional render must be wrapped in AnimatePresence with a key, every entrance needs an exit, and all timing values are imported from motion-foundations rather than hardcoded. The stagger interval is capped between 0.05s and 0.10s, modals ship with accessibility requirements baked in, and layout animations are forbidden on large subtrees. It's opinionated but disciplined, which is exactly what you want when you're reaching for animation boilerplate at 11pm.

Install to Claude Code

npx -y skills add affaan-m/ecc --skill motion-patterns --agent claude-code