OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add raphaelsalaja/skill --skill 12-principles-of-animation
Audit animation code against Disney's 12 principles adapted for web. Use when reviewing motion, implementing animations, or checking animation quality. Outputs file:line findings.
npx skills add raphaelsalaja/skill --skill 12-principles-of-animation
Review animation code for compliance with Disney's 12 principles adapted for web interfaces.
file:line format| Priority | Category | Prefix |
|---|---|---|
| 1 | Timing | timing- |
| 2 | Easing | easing- |
| 3 | Physics | physics- |
| 4 | Staging | staging- |
timing-under-300msUser-initiated animations must complete within 300ms.
Fail:
Pass:
timing-consistentSimilar elements must use identical timing values.
Fail:
Pass:
timing-no-entrance-context-menuContext menus should not animate on entrance (exit only).
Fail:
Pass:
easing-entrance-ease-outEntrances must use ease-out (arrive fast, settle gently).
Fail:
Pass:
easing-exit-ease-inExits must use ease-in (build momentum before departure).
Fail:
Pass:
easing-no-linear-motionLinear easing should only be used for progress indicators, not motion.
Fail:
Pass:
easing-natural-decayUse exponential ramps, not linear, for natural decay.
Fail:
Pass:
physics-active-stateInteractive elements must have active/pressed state with scale transform.
Fail:
Pass:
physics-subtle-deformationSquash/stretch deformation must be subtle (0.95-1.05 range).
Fail:
Pass:
physics-spring-for-overshootUse springs (not easing) when overshoot-and-settle is needed.
Fail:
Pass:
physics-no-excessive-staggerStagger delays must not exceed 50ms per item.
Fail:
Pass:
staging-one-focal-pointOnly one element should animate prominently at a time.
Fail:
staging-dim-backgroundModal/dialog backgrounds should dim to direct focus.
Fail:
Pass:
staging-z-index-hierarchyAnimated elements must respect z-index layering.
Fail:
Pass:
When reviewing files, output findings as:
After findings, output a summary:
| Rule | Count | Severity |
|---|---|---|
timing-under-300ms | 2 | HIGH |
physics-active-state | 3 | MEDIUM |
easing-entrance-ease-out | 1 | MEDIUM |
.button-primary { transition: 200ms; }
.button-secondary { transition: 150ms; }.button-primary { transition: 200ms; }
.button-secondary { transition: 200ms; }<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} /><motion.div exit={{ opacity: 0 }} />.modal-enter { animation-timing-function: ease-in; }.modal-enter { animation-timing-function: ease-out; }.modal-exit { animation-timing-function: ease-out; }.modal-exit { animation-timing-function: ease-in; }.card { transition: transform 200ms linear; }.progress-bar { transition: width 100ms linear; }gain.gain.linearRampToValueAtTime(0, t + 0.05);gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);.button:hover { background: var(--gray-3); }
/* Missing :active state */.button:active { transform: scale(0.98); }<motion.div whileTap={{ scale: 0.8 }} /><motion.div whileTap={{ scale: 0.98 }} /><motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
// When element should bounce/settle<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />transition={{ staggerChildren: 0.15 }}transition={{ staggerChildren: 0.03 }}// Multiple elements with competing entrance animations
<motion.div animate={{ scale: 1.1 }} />
<motion.div animate={{ scale: 1.1 }} />.overlay { background: transparent; }.overlay { background: var(--black-a6); }.tooltip { /* No z-index, may render behind other elements */ }.tooltip { z-index: 50; }file:line - [rule-id] description of issue
Example:
components/modal/index.tsx:45 - [timing-under-300ms] Exit animation 400ms exceeds 300ms limit
components/button/styles.module.css:12 - [physics-active-state] Missing :active transform