playbooks

home / skills / dylantarre / animation-principles / comfort-safety

comfort-safety skill

/skills/06-by-emotional-outcome/comfort-safety

This skill helps you design comfort and safety animations that reassure users and convey protection across interfaces.

npx playbooks add skill dylantarre/animation-principles --skill comfort-safety

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

Files (1)
SKILL.md
3.1 KB
---
name: comfort-safety
description: Use when creating animations that reassure users, reduce anxiety, or communicate protection and security.
---

# Comfort & Safety Animation

Create animations that reassure, protect, and make users feel secure.

## Emotional Goal

Comfort comes from predictable, gentle motion that never startles. Safety means animations that communicate protection, stability, and user control.

## Disney Principles for Comfort

### Squash & Stretch
Minimal, soft (5-10%). Gentle give without instability. Like a cushion—absorbs impact, maintains structure.

### Anticipation
Clear, reassuring preparation (150-200ms). Users always know what's coming. No surprises, no hidden actions.

### Staging
Enclosed, protected compositions. Clear boundaries. Safe spaces. Visual hierarchy that guides without overwhelming.

### Straight Ahead Action
Avoid. Safety requires predictability. Every movement should be controlled and expected.

### Follow Through & Overlapping Action
Gentle, cushioned settling. Soft landings. Elements ease into place like being tucked in.

### Slow In & Slow Out
Smooth, gentle curves throughout. No sudden changes. `ease-in-out` for predictable, comfortable motion.

### Arc
Soft, natural curves. Cradling, embracing paths. Motion that wraps around rather than cuts through.

### Secondary Action
Reassuring cues only. Checkmarks, shields, locks. Visual confirmation of safety and completion.

### Timing
Moderate, unhurried (300-450ms). Time to process and feel safe. Never rushed or abrupt.

### Exaggeration
None to minimal. Realistic, grounded movements. Comfort requires believability.

### Solid Drawing
Stable, balanced forms. Low center of gravity. Shapes that feel grounded and secure.

### Appeal
Warm, muted colors. Soft edges. Familiar, comfortable aesthetics. Nothing aggressive or sharp.

## Timing Recommendations

| Element | Duration | Easing |
|---------|----------|--------|
| Transitions | 300-400ms | `ease-in-out` |
| Feedback | 200-250ms | `ease-out` |
| Confirmation | 350-450ms | `ease-out` |
| Protection reveal | 400-500ms | `ease-in-out` |

## CSS Easing

```css
--comfort-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--comfort-gentle: cubic-bezier(0.45, 0, 0.55, 1);
--comfort-settle: cubic-bezier(0.25, 0.1, 0.25, 1);
```

## Reassuring Patterns

```css
@keyframes comfort-embrace {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes comfort-check {
  0% {
    stroke-dashoffset: 24;
    opacity: 0;
  }
  50% { opacity: 1; }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.safe-element {
  animation: comfort-embrace 400ms ease-in-out forwards;
}
```

## Safety Signals

- Clear, visible feedback for all actions
- Undo animations that show reversibility
- Progress that never goes backward unexpectedly
- Transitions that maintain orientation
- Consistent patterns users can rely on

## When to Use

- Banking and finance
- Healthcare applications
- Password and security flows
- Data privacy controls
- Insurance platforms
- Backup and recovery
- Parental controls
- Sensitive data handling

Overview

This skill teaches how to design animations that reassure users, reduce anxiety, and communicate protection and control. It codifies gentle motion, predictable timing, and visual signals that convey safety across sensitive interfaces. Use it to make interactions feel stable, comforting, and trustworthy.

How this skill works

The skill inspects animation choices—timing, easing, scale, path, and visual hierarchy—and recommends patterns that promote comfort and safety. It suggests concrete durations, easing curves, and keyframe styles (soft scale, gentle arcs, subtle checkmarks) and flags behaviors to avoid, like sudden changes or exaggerated motion. It also provides reusable CSS easing variables and example keyframes for rapid implementation.

When to use it

  • Interfaces handling sensitive user data (banking, healthcare, privacy)
  • Security and password flows where reassurance and confirmability matter
  • Confirmation and undo affordances requiring clear feedback
  • Onboarding and help flows for anxious or first-time users
  • Backup, recovery, and parental control experiences

Best practices

  • Favor moderate, unhurried timing (300–450ms for transitions; 200–250ms for feedback).
  • Use ease-in-out or gentle cubic-bezier curves to avoid surprises and provide smooth acceleration and deceleration.
  • Keep scale changes minimal (5–10%) and use soft "squash and stretch" to absorb impact without instability.
  • Design enclosed compositions and clear boundaries to communicate protection; avoid abrupt off-screen motion.
  • Provide explicit confirmation and undo animations so users see reversible outcomes and feel in control.

Example use cases

  • A banking app where a successful transfer shows a soft embrace reveal and a checkmark confirmation.
  • A password reset flow with clear anticipation, slow in/out transitions, and an undo affordance.
  • Healthcare app notifications that slide in on a warm arc and settle gently to avoid startling users.
  • Privacy settings that reveal controls within a protected, enclosed composition with consistent orientation.
  • Backup progress indicators that advance steadily with reassuring, non-reversing motion.

FAQ

How do I decide animation duration for confirmations?

Use 350–450ms for confirmation reveals and 200–250ms for short feedback. These ranges give users time to perceive outcomes without feeling delayed.

What animations should I avoid for safety?

Avoid sudden starts/stops, large scale exaggerations, unpredictable paths, and straight-ahead chaotic motion. Anything that can startle or confuse should be removed.