Animation choreography
Skill Dragoon0x/everything-design-taste/skills/animation-choreography
Page transition choreography, staggered animations, and orchestrated motion sequences.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill animation-choreographyAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.3 KB, 294 tokens by cl100k_base, as published. Nobody here has run it
Animation Choreography
Page Transitions
Types
- Fade: Universal, safe, minimal. 200-300ms.
- Slide: Directional relationship (forward/back, up/down). 300-400ms.
- Shared element: Element morphs between pages (photo expanding to detail). 400-500ms.
- None: Sometimes the best transition. Instant is fine for quick navigation.
Rules
- Exits are faster than enters (150ms exit, 250ms enter).
- Direction indicates hierarchy (slide right = deeper, slide left = back).
- Don't transition between unrelated pages (just cut).
- Shared element transitions only when there's a clear visual connection.
Stagger Patterns
.item { animation: fadeInUp 300ms ease-out both; }
.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }
/* Max 8-10 items staggered, then batch the rest */
Stagger Rules
- 30-80ms delay between items.
- Cap at 8-10 items (total sequence under 500ms).
- Items beyond the cap appear together at the end.
- Stagger direction: top-to-bottom or left-to-right (match reading order).
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.