From dylantarre-animation-principles
Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Animations under 100ms feel **instantaneous** to users. This duration is for immediate feedback that confirms actions without perceived delay.
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.
Animations under 100ms feel instantaneous to users. This duration is for immediate feedback that confirms actions without perceived delay.
Squash & Stretch: Subtle - 2-5% compression on button press creates tactile feel without visible deformation.
Anticipation: Skip entirely - no time for preparation at this speed.
Staging: Minimal - rely on position/color change, not movement.
Straight Ahead/Pose to Pose: Straight ahead only - too fast for keyframe complexity.
Follow Through: None - motion completes before follow-through registers.
Slow In/Slow Out: Use ease-out only - starts at full speed, slight deceleration.
Arcs: Linear paths only - curves don't register at this speed.
Secondary Action: Skip - brain can't process multiple simultaneous instant changes.
Timing: 1-3 frames maximum. 60fps = 16.67ms per frame.
Exaggeration: Minimal - subtle scale (0.95-1.05) or opacity changes.
Solid Drawing: Focus on color/opacity shifts, not spatial transformation.
Appeal: Crisp, immediate response builds trust and perceived performance.
/* Primary choice - immediate start, soft landing */
transition: all 50ms ease-out;
/* Alternative - completely linear for state toggles */
transition: opacity 80ms linear;
/* Button press feedback */
transition: transform 50ms ease-out;
.button:active {
transform: scale(0.97);
transition: transform 50ms ease-out;
}
.toggle-on {
background: var(--active);
transition: background 80ms ease-out;
}
At instant speeds, animation serves confirmation, not communication. Users shouldn't consciously perceive the animation - they should feel the interface responding.