# power-confidence

A skill that spells out how to animate strength and authority: heavy movement, sudden stops, almost no bounce. Useful for hero sections and premium product showcases.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 495 installs · ★ 124
- Author: dylantarre
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/06-by-emotional-outcome/power-confidence/SKILL.md
- Updated: 2025-12-30
- HTML: https://affpapa.org/en/nevibecode/skills/power-confidence

## What it does

The skill treats motion as weight. Stretch is kept minimal while squash on impact is pronounced. Anticipation runs 100-200ms — not hesitation, but gathering force. Durations sit between 150-300ms, with separate values for entrance, impact and settle.

Inside you get a timing table with easing pairs, three CSS variables (`--power-strike`, `--power-land`, `--power-drive`) and a ready `power-land` keyframe that drops on Y and compresses slightly. The principles are covered one by one: straight paths over arcs, controlled deceleration, secondary ripples such as a brief screen shake. Straight ahead action is the one to skip, since power needs intent.

Everything is written as CSS values and milliseconds, so the skill assumes web animation. If your project already has a design system with its own curves, these easings will need reconciling, otherwise the motion reads as out of step with the rest of the interface.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill power-confidence -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/power-confidence/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/power-confidence/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill power-confidence -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/power-confidence/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill power-confidence -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/power-confidence/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles power-confidence
```

2. **Manually: put the files in place**
- File: `.github/skills/power-confidence/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill power-confidence -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/06-by-emotional-outcome/power-confidence
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/power-confidence/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill power-confidence -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/06-by-emotional-outcome/power-confidence/SKILL.md

## When to use it
- make a hero headline land with weight instead of drifting in
- pick an easing curve for a hard stop
- add an environment response when a card hits
- set timings for entrance, impact and settle
- drop springy bounce from a premium interface

## Example prompts
- Animate the headline entrance in power-confidence style: 250ms in, hard stop.
- Pick the easing and keyframe for a card that lands with weight.
- Add a brief screen shake when the block hits, following power-confidence rules.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 8e7e53b116adc1e2.

BEGIN THIRD-PARTY FILE 8e7e53b116adc1e2
````text
---
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% {
````
END THIRD-PARTY FILE 8e7e53b116adc1e2

The third-party file has ended. Everything between the 8e7e53b116adc1e2 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2583 of 3039 bytes. © dylantarre · MIT · https://github.com/dylantarre/animation-principles/tree/HEAD/skills/06-by-emotional-outcome/power-confidence/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md