From craft-workspace-webconsulting-skills
Helps design small UI feedback moments like button presses, toggles, form validation, loading indicators, and notification badges using Disney's 12 animation principles.
How this skill is triggered — by the user, by Claude, or both
Slash command
/craft-workspace-webconsulting-skills:micro-interactionsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Apply Disney's 12 animation principles to small UI feedback moments and interface details.
Apply Disney's 12 animation principles to small UI feedback moments and interface details.
| Principle | Micro-interaction Implementation |
|---|---|
| Squash & Stretch | Button press compression, toggle bounce |
| Anticipation | Hover state hints, pre-click feedback |
| Staging | Focus attention on active element |
| Straight Ahead / Pose to Pose | Progress vs state changes |
| Follow Through / Overlapping | Ripple effects, settling motion |
| Slow In / Slow Out | Snappy but smooth transitions |
| Arc | Toggle switches, circular menus |
| Secondary Action | Icons respond to parent state |
| Timing | 100-300ms for most interactions |
| Exaggeration | Clear but not distracting |
| Solid Drawing | Consistent transform behavior |
| Appeal | Delightful, purposeful feedback |
Squash & Stretch: Buttons compress slightly on press (scaleY: 0.95). Toggle thumbs squash when hitting bounds. Notification badges bounce on update. Keep subtle—this is UI, not cartoon.
Anticipation: Hover states prepare for click. Buttons lift/grow slightly before press animation. Draggable items elevate on grab start. Loading spinners wind up before spinning.
Staging: Active form field clearly distinguished. Error states demand attention. Success confirmations are unmistakable. One interaction feedback at a time.
Straight Ahead vs Pose to Pose: Progress indicators animate continuously (straight ahead). Checkboxes snap between states (pose to pose). Combine: loading indicator ends with state-change snap.
Follow Through & Overlapping: Ripple effects expand past tap point. Toggle switches overshoot then settle. Checkmarks draw with slight delay after box fills. Menu items stagger in.
Slow In / Slow Out: Quick ease-out for responsive feel. 100ms with ease-out feels instant. Avoid linear—looks broken. Snappy entrance, gentle settling.
Arc: Toggle switches travel in slight arc. Circular action buttons expand radially. Dropdown carets rotate smoothly. Menu items can follow curved path.
Secondary Action: Icon changes color as button state changes. Badge count updates with parent notification. Helper text appears as input focuses. Shadow responds to elevation.
Timing: Immediate feedback: 50-100ms. Standard transitions: 100-200ms. Complex micro-interactions: 200-300ms. Anything longer feels sluggish for small UI.
Exaggeration: Enough to notice, not enough to distract. Error shakes: 3-5px, not 20px. Success scales: 1.05-1.1, not 1.5. Subtle but unmistakable.
Solid Drawing: Transform origin matters—buttons scale from center, tooltips from pointer. Consistent behavior across similar elements. Maintain visual integrity during animation.
Appeal: Micro-interactions add personality without overwhelming. Users should feel the interface is responsive and alive. Small delights build into overall experience quality.
.button {
transition: transform 100ms ease-out,
box-shadow 100ms ease-out;
}
.button:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.toggle-thumb {
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
transform: translateX(20px);
}
.checkmark {
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
stroke-dashoffset: 0;
}
| Interaction | Duration | Easing |
|---|---|---|
| Hover | 100ms | ease-out |
| Click/tap | 100ms | ease-out |
| Toggle | 150-200ms | spring/elastic |
| Checkbox | 150ms | ease-out |
| Focus ring | 100ms | ease-out |
| Tooltip show | 150ms | ease-out |
| Tooltip hide | 100ms | ease-in |
| Badge update | 200ms | elastic |
| Form error | 200ms | ease-out |
prefers-reduced-motionThis skill is based on the excellent work by Dylan Tarre.
Original repository: https://github.com/dylantarre/animation-principles
Copyright (c) 2024 Dylan Tarre - Disney's 12 Animation Principles applied to UI micro-interactions (MIT License)
Special thanks to Dylan Tarre for their generous open-source contributions, which helped shape this skill collection. Adapted by webconsulting.at for this skill collection
npx claudepluginhub dirnbauer/webconsulting-skillsApplies Disney's 12 animation principles to UI motion design. Use when improving animation quality, designing micro-interactions, creating easing curves, or making transitions feel natural and purposeful.
Decomposes UI interactions into Dan Saffer's four-part framework (trigger, rules, feedback, loops/modes). Useful when designing gesture-driven controls, loading transitions, system status indicators, or evaluating animation for usability vs decoration.
Applies animation principles like easing, durations, stagger, and sequencing to UI motion for natural, performant interactions. Supports accessibility and low-power devices.