playbooks

home / skills / dylantarre / animation-principles / joy-delight

joy-delight skill

/skills/06-by-emotional-outcome/joy-delight

This skill helps you design joyful, delightful animations by applying Disney principles to user interactions and celebrations.

npx playbooks add skill dylantarre/animation-principles --skill joy-delight

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.9 KB
---
name: joy-delight
description: Use when creating animations that evoke happiness, surprise, or delightful moments in the user experience.
---

# Joy & Delight Animation

Create animations that spark happiness, pleasant surprise, and memorable delight.

## Emotional Goal

Joy emerges from unexpected pleasures, playful movements, and moments that exceed expectations. Delight comes from animations that feel alive, responsive, and genuinely fun.

## Disney Principles for Joy

### Squash & Stretch
Exaggerate bouncy, elastic movements. Objects that squash 30-40% on impact feel alive and playful. Use for success states, rewards, and celebrations.

### Anticipation
Build excitement before reveals. A slight pullback (100-150ms) before a pop-in creates satisfying payoff. Perfect for notifications and achievements.

### Staging
Draw focus to joyful moments. Clear visual hierarchy ensures the delightful element gets full attention. Dim surroundings during celebration animations.

### Straight Ahead Action
Create spontaneous, organic movements for confetti, particles, and celebration effects. Randomized paths feel natural and exciting.

### Follow Through & Overlapping Action
Let elements overshoot and settle with bouncy secondary motion. Hair, ribbons, and decorative elements should continue moving after main action.

### Slow In & Slow Out
Use asymmetric easing—quick starts with slow, satisfying landings. `cubic-bezier(0.34, 1.56, 0.64, 1)` creates playful overshoot.

### Arc
Bouncing, curved trajectories feel more joyful than linear paths. Elements should travel in parabolic arcs during celebrations.

### Secondary Action
Add sparkles, particles, or wobbles to primary animations. A "like" heart that radiates small hearts amplifies joy.

### Timing
Fast, snappy timing (150-250ms) feels energetic. Quick bursts with micro-pauses create rhythm. Success animations: 200-400ms.

### Exaggeration
Push proportions and movements 20-30% beyond realistic. Oversized bounces, stretched smiles, and amplified reactions.

### Solid Drawing
Maintain volume during stretchy movements. Squashed elements should expand horizontally to preserve mass—this reads as physicality.

### Appeal
Round shapes, bright colors, and smooth curves. Asymmetry in timing and position adds character and charm.

## Timing Recommendations

| Element | Duration | Easing |
|---------|----------|--------|
| Pop-in | 200-300ms | `ease-out-back` |
| Bounce | 300-500ms | `spring(1, 80, 10)` |
| Confetti | 800-1200ms | `ease-out` |
| Celebration | 400-600ms | `ease-out-elastic` |

## CSS Easing

```css
--joy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--joy-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--joy-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
```

## When to Use

- Success confirmations and completions
- Achievement unlocks and rewards
- Onboarding celebrations
- Easter eggs and surprises
- Positive feedback states
- Welcome animations

Overview

This skill helps designers and developers craft animations that evoke happiness, surprise, and delightful moments in user experiences. It condenses Disney-inspired principles into actionable timing, easing, and motion guidance for interfaces and micro-interactions. Use it to turn routine UI feedback into memorable, joyful moments.

How this skill works

The skill inspects animation intent (reward, confirmation, surprise) and recommends specific principles like squash & stretch, anticipation, arcs, and secondary action to amplify emotion. It provides concrete timing ranges, easing curves, and motion patterns (pop-ins, bounces, confetti) so animations feel lively and purposeful. Recommendations include numeric durations, CSS easings, and behavior notes for primary and secondary elements.

When to use it

  • Success confirmations and completion states
  • Achievement unlocks and reward gestures
  • Onboarding celebrations and welcome moments
  • Easter eggs, surprises, and playful micro-interactions
  • Positive feedback like likes, saves, or progress milestones

Best practices

  • Exaggerate motion 20–40% for emotional clarity but keep volume consistent (solid drawing).
  • Use anticipation (100–150ms pullback) before reveals to create satisfying payoffs.
  • Prefer curved arcs and asymmetric easing (quick start, slow landing) for joyful motion.
  • Layer secondary actions (sparkles, particles, wobble) to reinforce the primary animation without distracting.
  • Limit duration for single micro-interactions: 150–400ms for snappy responses; longer for full celebrations (400–1200ms).

Example use cases

  • A success modal that pops in with squash & stretch and a confetti trail on task completion.
  • A heart-like button that pops, radiates tiny hearts, and settles with follow-through motion.
  • Onboarding step completion where a trophy icon arcs in, overshoots, and lands with playful easing.
  • Achievement unlock screen with staged dimming, a center celebration, and layered particle bursts.
  • Easter egg reveal that uses straight-ahead particle motion and asymmetric timing for surprise

FAQ

How do I choose duration and easing for different elements?

Match intent: quick feedback (150–250ms) uses snappy easing; rewards and celebrations use longer ranges (400–1200ms) with elastic or spring easings to feel playful.

When should I add secondary actions like particles or sparkles?

Add secondary actions to amplify a primary animation when you want extra delight—keep them subtle, shorter or staggered in time, and ensure they don’t compete with the main focal element.