playbooks

home / skills / dylantarre / animation-principles / calm-relaxation

calm-relaxation skill

/skills/06-by-emotional-outcome/calm-relaxation

This skill helps create calm, relaxing animations that soothe users and reduce anxiety by applying gentle, slow motion principles inspired by Disney's

npx playbooks add skill dylantarre/animation-principles --skill calm-relaxation

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

Files (1)
SKILL.md
2.9 KB
---
name: calm-relaxation
description: Use when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.
---

# Calm & Relaxation Animation

Create animations that soothe, settle, and create peaceful user experiences.

## Emotional Goal

Calm emerges from slow, gentle, predictable motion. Relaxation comes from animations that breathe, flow naturally, and never demand attention or create tension.

## Disney Principles for Calm

### Squash & Stretch
Very subtle (2-5%). Gentle breathing or pulsing rather than bouncing. Soft, organic deformation like clouds or water.

### Anticipation
Long, gradual preparation (200-400ms). Slow builds create no surprises. Everything telegraphed well in advance.

### Staging
Soft focus, ambient positioning. No aggressive attention-grabbing. Elements share space harmoniously without competition.

### Straight Ahead Action
Gentle, organic flow for ambient animations. Drifting clouds, floating particles, subtle gradients—natural randomness.

### Follow Through & Overlapping Action
Extended, graceful follow-through. Long settling times (500ms+). Elements drift to rest like leaves on water.

### Slow In & Slow Out
Heavy easing on both ends. Very gradual acceleration and deceleration. `cubic-bezier(0.4, 0, 0.6, 1)` for smooth, gentle motion.

### Arc
Wide, sweeping curves. Gentle parabolas. Motion should flow like water or wind—never angular or abrupt.

### Secondary Action
Ambient, background motion. Subtle parallax, gentle floating elements. Supporting motion that doesn't demand attention.

### Timing
Slow and deliberate (400-800ms+). Long durations feel meditative. No quick movements. Breathing rhythm: 4-6 seconds per cycle.

### Exaggeration
Minimal to none. Realistic, natural movements. Subtlety is calming; exaggeration creates tension.

### Solid Drawing
Soft edges, rounded forms. No sharp angles. Organic shapes that feel natural and comfortable.

### Appeal
Soft colors, low contrast. Gentle gradients. Rounded shapes. Natural, organic aesthetics.

## Timing Recommendations

| Element | Duration | Easing |
|---------|----------|--------|
| Fade transitions | 400-600ms | `ease-in-out` |
| Floating elements | 3000-5000ms | `ease-in-out` |
| Breathing pulse | 4000-6000ms | `ease-in-out` |
| Parallax drift | 800-1200ms | `ease-out` |

## CSS Easing

```css
--calm-gentle: cubic-bezier(0.4, 0, 0.6, 1);
--calm-float: cubic-bezier(0.37, 0, 0.63, 1);
--calm-breathe: cubic-bezier(0.45, 0, 0.55, 1);
```

## Breathing Animation

```css
@keyframes calm-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

.breathing-element {
  animation: calm-breathe 5s ease-in-out infinite;
}
```

## When to Use

- Meditation and wellness apps
- Loading states for long processes
- Ambient backgrounds
- Reading experiences
- Night mode transitions
- Healthcare interfaces
- Onboarding welcome screens
- Success states that don't need celebration

Overview

This skill guides creation of calm, soothing animations for interfaces and experiences that reduce anxiety and encourage focus. It adapts Disney’s animation principles to subtle, meditative motion: slow rhythms, soft shapes, and predictable flow. Use these patterns to make UI motion feel natural, nonintrusive, and restorative.

How this skill works

The skill inspects animation intent and maps it to specific timing, easing, and motion choices that favor calm—long durations, heavy easing, wide arcs, and minimal exaggeration. It provides concrete CSS easings, recommended durations, and small code examples (breathing pulse, float, parallax) so designers and engineers can implement low-attention, ambient motion. It also suggests visual attributes (soft colors, rounded forms) to reinforce a relaxing aesthetic.

When to use it

  • Meditation, wellness, or mindfulness features where stillness and breathing are central
  • Loading or waiting states for long processes where users need reassurance, not distraction
  • Ambient backgrounds and passive decorative motion to create atmosphere without drawing focus
  • Reading modes, night modes, or low-stimulus interfaces that support concentration
  • Onboarding or welcome flows that should calm new users rather than excite them

Best practices

  • Favor long, slow cycles (breathing rhythm 4–6s; floating 3–5s) and avoid sudden changes
  • Use heavy easing on both ends (slow in, slow out) and wide, flowing arcs instead of sharp angles
  • Keep deformation minimal (2–5% squash & stretch) and settle elements slowly with long follow-through
  • Opt for low contrast, soft gradients, and rounded shapes to reduce visual tension
  • Make secondary motion subtle and desynchronized so it remains background and never competes

Example use cases

  • A meditation app breathing circle that scales gently over a 5s cycle using calm-breathe easing
  • A long-process loader that uses slow fade transitions (400–600ms) and a drifting background
  • Night-reading mode where soft parallax drifts and slow color shifts reduce eye strain
  • Healthcare check-in screens with slow, reassuring motion and long settling times
  • Onboarding welcome screen with ambient floating elements and minimal, inviting motion

FAQ

Will slow animations feel unresponsive?

No—calm animations are meant for ambient or transitional contexts. Keep interactive feedback immediate, and reserve slow, meditative motion for background or non-critical elements.

What easing should I use for calming motion?

Use heavy easing like cubic-bezier(0.4, 0, 0.6, 1) for slow-in/slow-out and the provided calm-* easings for float and breathe patterns.