From dylantarre-animation-principles
Use when creating animations that convey strength, authority, or bold confidence in brand and product.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Create animations that convey strength, authority, and commanding presence.
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 strength, authority, and commanding presence.
Power comes from deliberate, controlled, weighty motion. Confidence means animations that know exactly where they're going and arrive with certainty.
Minimal stretch, impactful squash. Heavy objects don't stretch—they compress on impact (10-15%). Weight and solidity over flexibility.
Deliberate, confident preparation (100-200ms). Not hesitation—gathering power. Like a predator before striking.
Dominant positioning. Large scale, center stage. Powerful elements command attention through presence, not motion.
Avoid. Power requires intention and control. Every movement should be deliberate, not spontaneous.
Controlled deceleration. Heavy elements don't bounce—they settle with authority. Short, decisive follow-through.
Strong ease-out with sudden stops. Fast acceleration, decisive landing. cubic-bezier(0.0, 0, 0.2, 1) for powerful arrivals.
Direct paths preferred. Power takes the straightest route. When arced, low and driving—like a charging bull.
Impactful ripples or shockwaves. When power lands, the environment responds. Subtle screen shake, radiating force.
Medium-fast with decisive endpoints (150-300ms). Not rushed, not leisurely. Purposeful velocity.
Moderate (15-25%). Amplify impact, not movement. The landing matters more than the journey.
Heavy, grounded forms. Strong geometric shapes. Stability and mass in every frame.
Bold, angular design. High contrast. Dark, saturated colors. Commanding presence.
| Element | Duration | Easing |
|---|---|---|
| Entrance | 200-300ms | ease-out |
| Impact | 100-150ms | ease-out |
| Settle | 150-200ms | ease-out |
| Transition | 250-350ms | ease-in-out |
--power-strike: cubic-bezier(0.0, 0, 0.2, 1);
--power-land: cubic-bezier(0.16, 1, 0.3, 1);
--power-drive: cubic-bezier(0.25, 0.1, 0.25, 1);
@keyframes power-land {
0% {
transform: translateY(-20px) scale(1.05);
opacity: 0;
}
60% {
transform: translateY(2px) scale(0.98);
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}