From dylantarre-animation-principles
Use when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions
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 create buttons that feel alive and responsive.
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 create buttons that feel alive and responsive.
Scale buttons slightly on press: transform: scale(0.95) on :active, return to scale(1) on release. Creates tactile feedback.
Subtle hover lift before click: transform: translateY(-2px) prepares users for the action.
Primary CTAs should be visually prominent. Use size, color contrast, and whitespace. Animate primary buttons more boldly than secondary.
Use pose-to-pose for button states: define clear keyframes for default, hover, active, and disabled states.
After click, let shadows or glows settle slightly after the button returns. Icon inside can lag 20-50ms behind button movement.
Never use linear timing. Use ease-out for hover-in (fast start), ease-in for hover-out (gentle exit). cubic-bezier(0.4, 0, 0.2, 1) works well.
Floating action buttons should move in arcs when repositioning. Use transform with easing rather than straight-line movement.
Ripple effects, icon rotations, or shadow changes accompany the primary scale/color change. Don't let secondary actions overpower.
Success buttons can briefly scale to 1.05 before settling. Error states can include subtle shake (3-5px, 2-3 cycles).
Maintain consistent border-radius and proportions across states. Shadows should respect light source direction throughout.
Round corners feel friendly, sharp corners feel professional. Match button personality to brand. Satisfying click feedback increases conversions.
.btn {
transition: transform 150ms ease-out,
box-shadow 150ms ease-out,
background-color 150ms ease-out;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn:active {
transform: scale(0.97) translateY(0);
transition-duration: 50ms;
}
transform: scale, translatebox-shadow: depth changesbackground-color: state indicationopacity: disabled statesfilter: brightness on hover