From dylantarre-animation-principles
Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
At 500-800ms, animations become **events**. Users stop and watch. Reserve this duration for significant moments that deserve attention and communicate importance.
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.
At 500-800ms, animations become events. Users stop and watch. Reserve this duration for significant moments that deserve attention and communicate importance.
Squash & Stretch: Dramatic deformation - 20-30% stretch visible and characterful. Objects feel elastic and alive.
Anticipation: Extended wind-up - 150-200ms anticipation sells the action. Clear "about to happen" signal.
Staging: Sophisticated choreography - multiple elements with clear hierarchy and timing offsets.
Straight Ahead/Pose to Pose: Definitely pose to pose - complex motion needs keyframe control.
Follow Through: Extended settling - elements continue moving 100-200ms after main action completes.
Slow In/Slow Out: Dramatic easing - strong deceleration creates impact at endpoints.
Arcs: Essential - all movement should follow natural curved paths.
Secondary Action: Rich layering - primary, secondary, and tertiary actions possible.
Timing: 30-48 frames at 60fps. Full cinematic range.
Exaggeration: Go bold - this duration supports theatrical expression.
Solid Drawing: Full 3D transforms - depth, perspective, complex rotations.
Appeal: Memorable moments - users will recall these animations.
/* Dramatic entrance */
transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);
/* Powerful deceleration */
transition: all 700ms cubic-bezier(0, 0.55, 0.45, 1);
/* Elastic landing */
transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Smooth, cinematic */
transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
.hero-reveal {
opacity: 0;
transform: translateY(60px) scale(0.9);
transition: opacity 500ms ease-out,
transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-reveal.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Staggered reveal with follow-through */
.hero-title { transition-delay: 0ms; }
.hero-subtitle { transition-delay: 100ms; }
.hero-cta { transition-delay: 200ms; }
Large animations are moments of theater. They punctuate the experience and create memory. Use sparingly - every large animation should earn its duration.