power-confidence

dylantarre's avatarfrom dylantarre

Use when creating animations that convey strength, authority, or bold confidence in brand and product.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Brand and Creative Direction]

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for creating 'Power & Confidence' animations, designed to convey authority and strength. It translates classic Disney animation principles into actionable CSS easing and timing guidelines, helping designers and developers build a commanding brand presence through deliberate, high-impact motion that emphasizes weight and certainty.

Use Cases

  • Hero sections and headlines: Establish immediate brand authority on landing pages using high-impact visual entrances and dominant positioning.
  • Premium product showcases: Use weighted, deliberate motion to emphasize the quality, solidity, and craftsmanship of luxury or high-end products.
  • Executive presentations: Enhance key metrics and data visualizations with confident transitions that command professional attention and convey reliability.
  • Brand identity systems: Implement consistent motion guidelines that reflect core values of strength and bold confidence across all digital touchpoints.
  • Sports and fitness apps: Design UI feedback and achievement displays that feel powerful and energetic to drive user motivation and engagement.
namepower-confidence
descriptionUse 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

--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

@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