From dylantarre-animation-principles
Use when creating animations that reassure users, reduce anxiety, or communicate protection and security.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that reassure, protect, and make users feel secure.
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 reassure, protect, and make users feel secure.
Comfort comes from predictable, gentle motion that never startles. Safety means animations that communicate protection, stability, and user control.
Minimal, soft (5-10%). Gentle give without instability. Like a cushion—absorbs impact, maintains structure.
Clear, reassuring preparation (150-200ms). Users always know what's coming. No surprises, no hidden actions.
Enclosed, protected compositions. Clear boundaries. Safe spaces. Visual hierarchy that guides without overwhelming.
Avoid. Safety requires predictability. Every movement should be controlled and expected.
Gentle, cushioned settling. Soft landings. Elements ease into place like being tucked in.
Smooth, gentle curves throughout. No sudden changes. ease-in-out for predictable, comfortable motion.
Soft, natural curves. Cradling, embracing paths. Motion that wraps around rather than cuts through.
Reassuring cues only. Checkmarks, shields, locks. Visual confirmation of safety and completion.
Moderate, unhurried (300-450ms). Time to process and feel safe. Never rushed or abrupt.
None to minimal. Realistic, grounded movements. Comfort requires believability.
Stable, balanced forms. Low center of gravity. Shapes that feel grounded and secure.
Warm, muted colors. Soft edges. Familiar, comfortable aesthetics. Nothing aggressive or sharp.
| Element | Duration | Easing |
|---|---|---|
| Transitions | 300-400ms | ease-in-out |
| Feedback | 200-250ms | ease-out |
| Confirmation | 350-450ms | ease-out |
| Protection reveal | 400-500ms | ease-in-out |
--comfort-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--comfort-gentle: cubic-bezier(0.45, 0, 0.55, 1);
--comfort-settle: cubic-bezier(0.25, 0.1, 0.25, 1);
@keyframes comfort-embrace {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes comfort-check {
0% {
stroke-dashoffset: 24;
opacity: 0;
}
50% { opacity: 1; }
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
.safe-element {
animation: comfort-embrace 400ms ease-in-out forwards;
}