From dylantarre-animation-principles
Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
At 200-300ms, users **consciously perceive motion**. This duration bridges micro-interactions and full animations - ideal for UI state changes.
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 200-300ms, users consciously perceive motion. This duration bridges micro-interactions and full animations - ideal for UI state changes.
Squash & Stretch: Visible but restrained - 10-15% for playful interfaces, 5% for professional.
Anticipation: Brief wind-up works - 40-60ms preparation enhances 200ms main action.
Staging: Clear hierarchy - primary element leads, secondary follows by 50-100ms.
Straight Ahead/Pose to Pose: Pose to pose preferred - keyframes create polished motion.
Follow Through: Noticeable overshoot - 5-10% past target adds life.
Slow In/Slow Out: Full easing curves - both ease-in-out and custom beziers shine.
Arcs: Natural curves enhance - elements can travel on arcs rather than straight lines.
Secondary Action: One or two secondary actions - fade + scale, move + rotate.
Timing: 12-18 frames at 60fps. Smooth, deliberate motion.
Exaggeration: Moderate to pronounced - depends on brand personality.
Solid Drawing: Full transform combinations - translate, scale, rotate together.
Appeal: Conscious animation that builds brand character.
/* Standard smooth transition */
transition: all 250ms ease-out;
/* Modal/card appearance - confident arrival */
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
/* Bouncy personality */
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Professional, subtle */
transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
.modal {
opacity: 0;
transform: translateY(20px) scale(0.95);
transition: opacity 200ms ease-out,
transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.modal.open {
opacity: 1;
transform: translateY(0) scale(1);
}
.card-expand {
transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
Small transitions are seen and understood. Users track the motion and their brain processes the spatial relationship. Use this to guide attention and communicate hierarchy.