From dylantarre-animation-principles
Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered 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 mouse hover states.
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 mouse hover states.
Squash & Stretch: Cards can subtly scale (1.02-1.05) on hover, creating "lift" effect.
Anticipation: Hover IS anticipation for click. The hover state previews the interaction.
Staging: Hover effects should highlight the interactive element, not distract from it.
Straight Ahead vs Pose-to-Pose: Define rest and hover poses precisely. Transition smoothly between them.
Follow Through & Overlapping: Child elements animate after parent. Card lifts, then shadow expands.
Slow In/Slow Out: Hover-in: ease-out (fast response). Hover-out: ease-in-out (graceful return).
Arcs: Underlines can draw from center outward. Highlights sweep in curved paths.
Secondary Action: Combine multiple subtle effects. Scale + shadow + color shift together.
Timing:
Exaggeration: Subtle - hover is preview, not performance. Scale max 1.05, shadow max +8px.
Solid Drawing: Hover states must feel like the same element elevated, not a replacement.
Appeal: Hover should invite clicking. Create anticipation without demanding action.
| Hover Effect | Hover-In | Hover-Out | Easing |
|---|---|---|---|
| Color Change | 150ms | 200ms | ease-out / ease-in-out |
| Scale/Lift | 200ms | 250ms | ease-out / ease-in-out |
| Shadow | 200ms | 250ms | ease-out / ease-in-out |
| Underline Draw | 200ms | 200ms | ease-out |
| Image Zoom | 300ms | 400ms | ease-out |
| Icon Shift | 150ms | 200ms | ease-out |
/* Card lift with shadow */
.card {
transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
/* Slower return */
.card:not(:hover) {
transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}
/* Underline draw from center */
.link {
position: relative;
}
.link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: currentColor;
transition: width 200ms ease-out, left 200ms ease-out;
}
.link:hover::after {
width: 100%;
left: 0;
}
.button-icon {
transition: transform 150ms ease-out;
}
.button:hover .button-icon {
transform: translateX(4px);
}
/* Arrow grows */
.arrow-icon {
transition: transform 150ms ease-out;
}
.link:hover .arrow-icon {
transform: translateX(4px) scale(1.1);
}
@media (hover: hover) to scope to pointer devices@media (hover: hover) {
.card:hover { /* hover effects */ }
}