From dylantarre-animation-principles
Use when creating animations that convey luxury, refinement, or premium brand experiences.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that convey refinement, luxury, and understated excellence.
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 convey refinement, luxury, and understated excellence.
Elegance emerges from restrained, perfectly timed motion. Sophistication means animations that are noticed for their quality, not their quantity—subtle excellence over obvious effort.
Extremely minimal (0-5%). Refined objects don't deform—they glide. Preserve perfect proportions throughout motion.
Subtle, refined preparation (100-150ms). A gentle weight shift, not a wind-up. Elegant motion begins smoothly.
Negative space and restraint. Let elements breathe. Single focal point with generous margins. Less is more.
Avoid. Elegance requires control and precision. Every frame should be intentional and refined.
Graceful, extended settling. Like silk falling. Long, smooth deceleration without bounce or wobble.
Extended easing on both ends. Gradual, flowing motion. cubic-bezier(0.4, 0, 0.2, 1) for refined transitions.
Sweeping, graceful curves. Like a conductor's baton or a dancer's arm. Beautiful paths, not just endpoints.
Minimal, purposeful accents. A subtle shadow shift, a gentle highlight. Supporting motion that elevates, not distracts.
Unhurried but not slow (300-500ms). Time to appreciate the motion. Luxury doesn't rush.
Almost none (0-10%). Realistic, refined movements. Perfection in subtlety.
Impeccable proportions maintained. No distortion. Geometric precision and balance.
Clean lines, perfect proportions. Monochromatic or limited palette. Timeless aesthetics.
| Element | Duration | Easing |
|---|---|---|
| Fade | 300-400ms | ease-in-out |
| Slide | 400-500ms | ease-out |
| Scale | 350-450ms | ease-in-out |
| Reveal | 500-700ms | ease-out |
--elegant-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--elegant-enter: cubic-bezier(0.0, 0, 0.2, 1);
--elegant-flow: cubic-bezier(0.45, 0, 0.55, 1);
@keyframes elegant-reveal {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.elegant-element {
animation: elegant-reveal 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}