From dylantarre-animation-principles
Use when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
At 1200-2000ms, you're creating **experiences, not interfaces**. This duration is for moments of genuine storytelling where animation itself is the content.
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 1200-2000ms, you're creating experiences, not interfaces. This duration is for moments of genuine storytelling where animation itself is the content.
Squash & Stretch: Character-defining - 30-40% deformation creates personality. Objects become characters.
Anticipation: Full dramatic preparation - 300-400ms wind-up creates tension and expectation.
Staging: Scene direction - think cinematography. Establish shot, then detail. Clear narrative flow.
Straight Ahead/Pose to Pose: Pose to pose mandatory - 6-10 key poses define the narrative arc.
Follow Through: Extended settling - 300-500ms of secondary motion after primary completes.
Slow In/Slow Out: Narrative pacing - ease curves tell emotional stories. Sharp starts mean urgency, soft ends mean resolution.
Arcs: Orchestrated paths - motion paths are designed, not default. Each element's trajectory contributes to composition.
Secondary Action: Full ecosystem - primary, secondary, tertiary, ambient all working together.
Timing: 72-120 frames at 60fps. Animation-quality frame counts.
Exaggeration: Emotional amplification - push for feeling, not just movement.
Solid Drawing: Dimensional storytelling - parallax, depth, perspective shifts create space.
Appeal: Deep emotional engagement - users feel something during these animations.
/* Narrative arc - beginning, middle, end */
animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);
/* Graceful, considered motion */
transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);
/* Building momentum */
transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);
/* Elastic storytelling */
transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
@keyframes appLaunch {
0% {
opacity: 0;
transform: scale(0.6) translateY(50px);
filter: blur(10px);
}
30% {
opacity: 1;
filter: blur(5px);
}
60% {
transform: scale(1.02) translateY(-10px);
filter: blur(0);
}
80% {
transform: scale(0.99) translateY(5px);
}
100% {
transform: scale(1) translateY(0);
}
}
.app-launch {
animation: appLaunch 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
Deliberate animations are brand investments. They don't just show what's happening - they make users feel something. Budget for design, iteration, and testing. These moments define perceived quality.