From dylantarre-animation-principles
Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
The 100-200ms range is the **sweet spot for micro-interactions**. Fast enough to feel responsive, slow enough to be perceived as intentional motion.
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.
The 100-200ms range is the sweet spot for micro-interactions. Fast enough to feel responsive, slow enough to be perceived as intentional motion.
Squash & Stretch: Light application - 5-10% works for bouncy buttons, appearing elements.
Anticipation: Micro-anticipation possible - 20-30ms wind-up before 150ms action.
Staging: Single focal point - one element moving, rest static.
Straight Ahead/Pose to Pose: Either works - simple enough for straight ahead, controlled enough for poses.
Follow Through: Minimal overshoot - 2-5% past target, settle quickly.
Slow In/Slow Out: ease-out dominates - elements should arrive confidently.
Arcs: Slight curves possible - dropdown items can arc subtly rather than straight down.
Secondary Action: One secondary max - icon rotates while menu opens.
Timing: 6-12 frames at 60fps. Enough for smooth motion.
Exaggeration: Moderate - scale 0.9-1.1, rotation up to 30 degrees.
Solid Drawing: Simple transforms - scale, opacity, short translations.
Appeal: Quick animations feel modern and polished.
/* Standard micro-interaction */
transition: all 150ms ease-out;
/* Appearing elements - start fast, land soft */
transition: opacity 120ms ease-out, transform 150ms ease-out;
/* Bouncy micro-feedback */
transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
.tooltip {
opacity: 0;
transform: translateY(-4px) scale(0.95);
transition: opacity 120ms ease-out,
transform 150ms ease-out;
}
.trigger:hover .tooltip {
opacity: 1;
transform: translateY(0) scale(1);
}
.dropdown-item {
opacity: 0;
transform: translateY(-8px);
transition: all 150ms ease-out;
}
Micro-animations are felt more than watched. Users notice when they're missing but don't consciously observe them. This is where polish lives.