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.

skills.sh installs: 5.7K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Motion Patterns

Copy-paste patterns for the most common UI animation needs. Every pattern here is built on motion-foundations tokens and springs. Do not define new duration or easing values here — import them.

When to Activate

Animating a button, card, modal, or toast notification
Building list entrances with stagger
Setting up page transitions in Next.js App Router
Adding entrance or exit animations to conditional content
Implementing scroll-reveal, scroll-linked progress, or sticky story sections
Building expanding cards, accordions, or shared-element transitions

Outputs

This skill produces:

Accessible, SSR-safe animation for all standard UI components
AnimatePresence-wrapped conditional renders with correct exit behavior
Page transition wrapper component for Next.js App Router
Scroll-reveal and scroll-linked patterns using useScroll + useTransform
Layout animation patterns (layout, layoutId) for expanding and crossfading elements