From dylantarre-animation-principles
Use when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that soothe, settle, and create peaceful user experiences.
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 soothe, settle, and create peaceful user experiences.
Calm emerges from slow, gentle, predictable motion. Relaxation comes from animations that breathe, flow naturally, and never demand attention or create tension.
Very subtle (2-5%). Gentle breathing or pulsing rather than bouncing. Soft, organic deformation like clouds or water.
Long, gradual preparation (200-400ms). Slow builds create no surprises. Everything telegraphed well in advance.
Soft focus, ambient positioning. No aggressive attention-grabbing. Elements share space harmoniously without competition.
Gentle, organic flow for ambient animations. Drifting clouds, floating particles, subtle gradients—natural randomness.
Extended, graceful follow-through. Long settling times (500ms+). Elements drift to rest like leaves on water.
Heavy easing on both ends. Very gradual acceleration and deceleration. cubic-bezier(0.4, 0, 0.6, 1) for smooth, gentle motion.
Wide, sweeping curves. Gentle parabolas. Motion should flow like water or wind—never angular or abrupt.
Ambient, background motion. Subtle parallax, gentle floating elements. Supporting motion that doesn't demand attention.
Slow and deliberate (400-800ms+). Long durations feel meditative. No quick movements. Breathing rhythm: 4-6 seconds per cycle.
Minimal to none. Realistic, natural movements. Subtlety is calming; exaggeration creates tension.
Soft edges, rounded forms. No sharp angles. Organic shapes that feel natural and comfortable.
Soft colors, low contrast. Gentle gradients. Rounded shapes. Natural, organic aesthetics.
| Element | Duration | Easing |
|---|---|---|
| Fade transitions | 400-600ms | ease-in-out |
| Floating elements | 3000-5000ms | ease-in-out |
| Breathing pulse | 4000-6000ms | ease-in-out |
| Parallax drift | 800-1200ms | ease-out |
--calm-gentle: cubic-bezier(0.4, 0, 0.6, 1);
--calm-float: cubic-bezier(0.37, 0, 0.63, 1);
--calm-breathe: cubic-bezier(0.45, 0, 0.55, 1);
@keyframes calm-breathe {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.02);
opacity: 1;
}
}
.breathing-element {
animation: calm-breathe 5s ease-in-out infinite;
}