animation-systems

Files (1)

• SKILL.md

SKILL.md (first lines)

<!-- skill: animation-systems | version: 1.0.0 | updated: 2026-03-17 -->
---
name: animation-systems
description: Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
---

# Animation Systems (Stripe × Linear × Apple × Vercel)

This skill helps you ship **tasteful, product-grade motion**.
Not "more animation."
**Better animation**: clarity, hierarchy, feedback, and delight—without jank.

---

## The goals (why motion exists)

Use animation to:

1) **Explain hierarchy** (what matters)
2) **Confirm action** (feedback)
3) **Guide attention** (where to look next)
4) **Maintain continuity** (spatial relationships)
5) **Add polish** (craft signals)

If an animation doesn't serve one of these, delete it.

---

## The Stripe/Linear/Apple/Vercel style (shared traits)

### 1) Restraint

- Fewer animations, better chosen.
- One strong hero moment; the rest is supporting motion.

### 2) Clear choreography

- Primary element moves first.
- Secondary elements follow with small stagger.
- Motion establishes a "reading order."

### 3) Physical but not cartoony

- Use easing that feels **human** (soft acceleration + gentle settle).
- Avoid bouncy defaults for serious product UI.

### 4) Texture + depth (subtle)

- Small parallax, soft shadows, blur fades, light beams.
- Avoid heavy 3D unless it's the hero.

---

## Motion primitives (build these first)

Think in primitives you can reuse everywhere.

### A) Fade + rise (default entrance)

Use for: text blocks, cards, modals.

- Opacity: 0 → 1
- Y: 12–24px → 0
- Duration: 300–700ms depending on size

### B) Scale + fade (micro emphasis)

Use for: popovers, toasts, selected states.

- Scale: 0.98 → 1
- Opacity: 0 → 1

### C) Slide (navigation)

Use for: drawers, step transitions.

- Use transform translate; avoid animating layout.

### D) Morph / shared element (high craft)

Use for: tab indicators, expanding cards.

- Requires consistent geometry + measured layout.

---

## Defaults (practical numbers)

Use these as a starting system.

### Durations (rule of thumb)

- Micro (hover/press): **120–200ms**
- UI state change (toggle, select): **180–260ms**
- Small transitions (popover, toast): **220–320ms**
- Page section entrance: **400–800ms**
- Hero sequences: **800–1600ms** (with internal beats)

### Easing (safe set)

Pick a small set and reuse.

- UI: **ease-out** with gentle settle
- Emphasis: slightly stronger ease
- Entering: ease-out
- Exiting: ease-in (faster)

If implementing:

- Use your animation library's "power2.out / expo.out" equivalents.
- Avoid elastic/bounce unless brand is playful.

### Stagger

- 40–90ms per element (text lines/cards)
- Use smaller stagger on mobile

---

## Choreography patterns

From RamonsDka/the-architect-overlay, MIT.

More from RamonsDka/the-architect-overlay