From dylantarre-animation-principles
Use when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply Disney's 12 principles to direct user interactions.
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.
Apply Disney's 12 principles to direct user interactions.
Squash & Stretch: Elements compress on press (scale 0.95-0.97), spring back on release.
Anticipation: The press IS the anticipation. Response should be immediate - no delay.
Staging: Response originates from interaction point. Ripples expand from tap location.
Straight Ahead vs Pose-to-Pose: Define rest, pressed, and released poses. Transitions flow between them.
Follow Through & Overlapping: Release animation overshoots rest position. Scale to 1.02, settle to 1.0.
Slow In/Slow Out: Press: instant. Release: ease-out with overshoot cubic-bezier(0.34, 1.56, 0.64, 1).
Arcs: Drag elements follow finger with slight lag on curves. Snapping follows arc to destination.
Secondary Action: Press triggers ripple + scale + shadow change simultaneously.
Timing:
Exaggeration: Subtle for press (0.97), playful for release (overshoot 1.03).
Solid Drawing: Pressed state should feel "pushed in" - smaller scale, reduced shadow, shifted color.
Appeal: Gestures should feel physically satisfying. Like pressing a real button.
| Gesture | Press Duration | Release Duration | Easing |
|---|---|---|---|
| Tap/Click | 50ms | 200ms | ease-out + overshoot |
| Long Press | 50ms | 300ms | ease-out |
| Drag Start | 100ms | - | ease-out |
| Drag Release | - | 300ms | spring |
| Swipe | - | 200-400ms | ease-out |
| Pinch | real-time | 300ms | spring |
/* Button press */
.button {
transition: transform 50ms ease-out;
}
.button:active {
transform: scale(0.97);
}
/* Release with overshoot */
.button:not(:active) {
transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Material ripple */
.ripple {
animation: ripple 600ms ease-out forwards;
}
@keyframes ripple {
from {
transform: scale(0);
opacity: 0.5;
}
to {
transform: scale(4);
opacity: 0;
}
}
// Smooth drag with slight lag
element.style.transform = `translate(${x}px, ${y}px)`;
element.style.transition = 'transform 50ms ease-out';
// Snap back with spring
element.style.transition = 'transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)';
element.style.transform = 'translate(0, 0)';
Gesture responses must be under 100ms to feel connected to the action. Anything slower breaks the direct manipulation illusion. Test on actual touch devices.