home / skills / dylantarre / animation-principles / power-confidence
This skill helps you create powerfully confident animations by applying weighty motion, precise timing, and bold emphasis across brand assets.
npx playbooks add skill dylantarre/animation-principles --skill power-confidenceReview the files below or copy the command above to add this skill to your agents.
---
name: power-confidence
description: Use when creating animations that convey strength, authority, or bold confidence in brand and product.
---
# Power & Confidence Animation
Create animations that convey strength, authority, and commanding presence.
## Emotional Goal
Power comes from deliberate, controlled, weighty motion. Confidence means animations that know exactly where they're going and arrive with certainty.
## Disney Principles for Power
### Squash & Stretch
Minimal stretch, impactful squash. Heavy objects don't stretch—they compress on impact (10-15%). Weight and solidity over flexibility.
### Anticipation
Deliberate, confident preparation (100-200ms). Not hesitation—gathering power. Like a predator before striking.
### Staging
Dominant positioning. Large scale, center stage. Powerful elements command attention through presence, not motion.
### Straight Ahead Action
Avoid. Power requires intention and control. Every movement should be deliberate, not spontaneous.
### Follow Through & Overlapping Action
Controlled deceleration. Heavy elements don't bounce—they settle with authority. Short, decisive follow-through.
### Slow In & Slow Out
Strong ease-out with sudden stops. Fast acceleration, decisive landing. `cubic-bezier(0.0, 0, 0.2, 1)` for powerful arrivals.
### Arc
Direct paths preferred. Power takes the straightest route. When arced, low and driving—like a charging bull.
### Secondary Action
Impactful ripples or shockwaves. When power lands, the environment responds. Subtle screen shake, radiating force.
### Timing
Medium-fast with decisive endpoints (150-300ms). Not rushed, not leisurely. Purposeful velocity.
### Exaggeration
Moderate (15-25%). Amplify impact, not movement. The landing matters more than the journey.
### Solid Drawing
Heavy, grounded forms. Strong geometric shapes. Stability and mass in every frame.
### Appeal
Bold, angular design. High contrast. Dark, saturated colors. Commanding presence.
## Timing Recommendations
| Element | Duration | Easing |
|---------|----------|--------|
| Entrance | 200-300ms | `ease-out` |
| Impact | 100-150ms | `ease-out` |
| Settle | 150-200ms | `ease-out` |
| Transition | 250-350ms | `ease-in-out` |
## CSS Easing
```css
--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);
```
## Impact Animation
```css
@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;
}
}
```
## Weight Simulation
- Larger elements animate slower
- Powerful elements affect surroundings
- Impacts create brief compression
- Recovery is quick and controlled
## When to Use
- Hero sections and headlines
- Premium product showcases
- Brand statements
- Achievement displays
- Dashboard key metrics
- Executive presentations
- Automotive and luxury brands
- Sports and fitness apps
This skill teaches how to design animations that read as powerful, authoritative, and confidently routed. It codifies timing, motion, and visual choices so animations feel weighty, controlled, and unmistakably deliberate. Use it to make brand and product motion communicate strength and premium presence.
It inspects motion properties—timing, easing, scale, translation, and visual weight—and prescribes patterns for entrances, impacts, and settles. The approach maps Disney-inspired principles to practical values: restrained squash, decisive anticipation, direct paths, moderate exaggeration, and environment feedback. It also supplies concrete timing ranges and CSS easing suggestions you can drop into designs.
What timings should I use for a power animation?
Use medium-fast timings: entrances 200–300ms, impacts 100–150ms, settle 150–200ms, transitions 250–350ms with decisive endpoints.
How much squash or exaggeration is appropriate?
Keep squash minimal (around 10–15%) and overall exaggeration moderate (15–25%)—enough to emphasize weight and arrival without breaking realism.