From dylantarre-animation-principles
Use when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that convey competence, seriousness, and business-appropriate polish.
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.
Create animations that convey competence, seriousness, and business-appropriate polish.
Professionalism means motion that respects users' time and context. Credibility comes from animations that demonstrate technical competence without showing off.
None to minimal (0-5%). Professional interfaces use rigid, precise motion. Objects maintain exact proportions.
Brief and functional (50-100ms). Just enough to prevent surprise. No theatrical preparation—get to the point.
Clear hierarchy and purpose. Business-appropriate layouts. Every element in its proper place with clear function.
Avoid entirely. Professional motion is controlled and predictable. No spontaneity or variation.
Minimal, controlled settling. Quick stabilization. No bouncing or playfulness—immediate completion.
Smooth, professional curves. Standard easing that feels polished but not decorative. ease-out for efficiency.
Minimal curves, direct paths preferred. Professional motion is efficient. Straight lines communicate directness.
Functional only. Loading states, progress indicators. No decorative animation—everything serves a purpose.
Efficient and consistent (150-250ms). Quick enough to feel responsive, slow enough to track. No wasted time.
None. Realistic, proportional movements. Professional means grounded and believable.
Precise, consistent geometry. Perfect alignment. Technical accuracy in every detail.
Clean, systematic design. Grid-based layouts. Neutral colors. Function-first aesthetics.
| Element | Duration | Easing |
|---|---|---|
| Transitions | 150-250ms | ease-out |
| Feedback | 100-150ms | ease-out |
| Modals | 200-250ms | ease-out |
| Data updates | 150-200ms | ease-in-out |
--pro-standard: cubic-bezier(0.4, 0, 0.2, 1);
--pro-enter: cubic-bezier(0.0, 0, 0.2, 1);
--pro-exit: cubic-bezier(0.4, 0, 1, 1);
@keyframes pro-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pro-slide-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.professional-element {
animation: pro-slide-up 200ms ease-out forwards;
}