From dylantarre-animation-principles
Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status
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 loading indicators for engaging, informative wait experiences.
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 loading indicators for engaging, informative wait experiences.
Bouncing dot loaders should squash on landing, stretch while rising. Creates life-like, playful motion.
Before progress completes, bar can briefly pause or slow. Spinners can decelerate before stopping. Signals completion coming.
Loader should be clearly visible but not block content unnecessarily. Skeleton screens stage where real content will appear.
Organic loaders (bouncing dots) benefit from straight-ahead. Progress bars use pose-to-pose (0% to 100% keyframes).
Multi-part loaders should have elements offset in timing. Dot 1 bounces, dot 2 follows 100ms later. Creates rhythm.
Spinning: use ease-in-out per rotation cycle or linear for continuous. Bouncing: ease-in up, ease-out down.
Orbital loaders should follow true circular arcs. Bouncing elements follow parabolic arcs like real physics.
While spinner rotates (primary), glow pulses (secondary). Skeleton shimmer is secondary to skeleton shape.
Playful brands can use bouncy, elastic loaders. Professional contexts need subtle, smooth spinners. Match brand energy.
Maintain consistent stroke widths. Circular paths should be true circles. Progress bars should fill evenly.
Engaging loaders reduce perceived wait time. Boring spinners feel slower. A delightful loader can turn frustration into momentary joy.
.spinner {
animation: spin 1000ms linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.bounce-dot {
animation: bounce 600ms ease-in-out infinite alternate;
}
.bounce-dot:nth-child(2) { animation-delay: 100ms; }
.bounce-dot:nth-child(3) { animation-delay: 200ms; }
@keyframes bounce {
from { transform: translateY(0) scaleY(1); }
to { transform: translateY(-20px) scaleY(0.9); }
}
.skeleton {
background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
background-size: 200% 100%;
animation: shimmer 2000ms infinite;
}
@keyframes shimmer {
to { background-position: -200% 0; }
}
transform: rotate, translateY, scaleanimation: infinite loopsbackground-position: shimmer effectsstroke-dashoffset: SVG spinnersopacity: pulsing effects