From dylantarre-animation-principles
Use when animation causes dizziness, nausea, disorientation, or vestibular discomfort
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Eliminate vestibular triggers using Disney's principles safely.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Eliminate vestibular triggers using Disney's principles safely.
These trigger vestibular responses:
Issue: Over-dramatic motion Fix: Reduce scale of transforms. Max 10-20% size change. Avoid full-screen zooms.
Issue: Curved paths cause tracking strain Fix: Use linear motion for functional UI. Save arcs for small, optional elements only.
Issue: Overshooting creates whiplash effect Fix: Remove bounce/overshoot from navigation. Use critically damped springs or ease-out.
Issue: Multiple moving elements cause confusion Fix: Limit to one primary motion. Remove parallax layers.
Issue: Acceleration patterns cause disorientation Fix: Use consistent, predictable easing. Avoid sudden speed changes.
prefers-reduced-motion - Non-negotiableprefers-reduced-motion?| Triggering | Safe Alternative |
|---|---|
| Zoom transition | Fade + slight scale (max 5%) |
| Parallax scroll | Static or single-layer |
| Rotation | Fade or slide |
| Bounce/spring | Ease-out (no overshoot) |
| Full-page slide | Crossfade |
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.parallax {
transform: none !important;
}
}
/* Safe default motion */
.safe-transition {
transition: opacity 200ms ease-out;
/* Avoid: transform with large values */
}