From dylantarre-animation-principles
Use when animating cards, panels, tiles, or container elements to create depth and interactivity
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply Disney's 12 principles to cards and containers for engaging, dimensional interfaces.
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.
Apply Disney's 12 principles to cards and containers for engaging, dimensional interfaces.
Cards can subtly compress on drag-start and stretch when released. Keep it minimal: 2-3% scale change maximum.
Before expanding a card to detail view, briefly scale down (0.98) for 50ms, then expand. Prepares user for the transformation.
The card being interacted with should lift above others via z-index and shadow. Dim or blur background cards to focus attention.
Define clear states: resting, hovered, selected, expanded. Pose-to-pose transitions between these defined keyframes.
Card content (text, images, icons) should lag slightly behind card movement. Stagger by 20-40ms for natural feel.
Card lifts use ease-out, card settles use ease-in-out. Never linear. cubic-bezier(0.25, 0.1, 0.25, 1) for smooth lifts.
When cards reorder (drag-and-drop), they should follow curved paths, not straight lines. Add slight rotation during movement.
While card lifts (primary), shadow expands and blurs (secondary). Image inside can subtle zoom. Border can glow.
Hover shadows can extend 2-3x normal depth. Selected cards can lift 8-12px. Keep proportional to card size.
Maintain consistent border-radius ratios when scaling. Shadows should always come from same light source. Preserve aspect ratios.
Rounded corners feel approachable, subtle shadows add premium feel. Smooth transitions build trust. Cards should feel like physical objects.
.card {
transition: transform 250ms ease-out,
box-shadow 250ms ease-out;
}
.card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.card-content {
transition: transform 280ms ease-out; /* slight lag */
}
transform: translateY, scale, rotatebox-shadow: depth and liftz-index: layeringfilter: blur for backgroundopacity: focus states