From dylantarre-animation-principles
Use when creating animations that feel warm, welcoming, and make users feel comfortable engaging.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that welcome users and make interfaces feel warm and inviting.
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.
Create animations that welcome users and make interfaces feel warm and inviting.
Friendliness comes from gentle, welcoming motion that doesn't intimidate. Approachability means animations that invite interaction and make users feel comfortable.
Moderate, soft deformation (10-20%). Enough to feel alive without being cartoonish. Like a friendly handshake—warm but appropriate.
Gentle preparation (100-150ms). Friendly motion telegraphs intention without startling. A small "hello" before action.
Open, inviting compositions. Elements arranged to welcome, not confront. Clear pathways into the interface.
Light spontaneity for personality. Subtle variations that feel human and approachable rather than mechanical.
Soft, natural settling. A gentle bounce or two. Like a friend sitting down beside you—relaxed, not rigid.
Smooth, approachable curves. No sharp accelerations. ease-out for welcoming entrances that arrive gently.
Natural, relaxed curves. Motion that feels human—not robotic straight lines, not exaggerated bounces.
Warm supporting gestures. A subtle wave, a gentle nod. Elements acknowledge user presence.
Moderate, comfortable (200-350ms). Not rushed, not sluggish. Conversational pacing that feels natural.
Mild (10-20%). Enough personality to feel warm without being overwhelming. Relatable, not theatrical.
Soft, rounded forms. Approachable proportions. Nothing sharp or intimidating.
Warm colors, rounded corners. Friendly faces when appropriate. Inviting, accessible aesthetics.
| Element | Duration | Easing |
|---|---|---|
| Welcome fade | 250-350ms | ease-out |
| Slide in | 300-400ms | ease-out |
| Hover response | 150-200ms | ease-out |
| Expand/reveal | 250-350ms | ease-in-out |
--friendly-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--friendly-enter: cubic-bezier(0.0, 0, 0.2, 1);
--friendly-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
@keyframes friendly-wave {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(14deg); }
40% { transform: rotate(-8deg); }
60% { transform: rotate(10deg); }
80% { transform: rotate(-4deg); }
}
@keyframes friendly-appear {
from {
opacity: 0;
transform: scale(0.95) translateY(8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}