/flow

Animation Catalog

Purpose: Use this file when you need a concrete animation pattern, duration, easing choice, or reduced-motion fallback.

Contents

• Entry and exit defaults
• Micro-interactions and state feedback
• Gesture patterns
• Scroll and page transitions
• Stagger guidance

Entry Patterns

Exit Patterns

Rule: exits are usually 60-80% of entry duration.

Micro-Interactions

Gesture Patterns

Scroll and Page Patterns

Stagger Rules

• Use stagger only when sequential attention helps comprehension.
• Keep stagger intervals in the 30-80ms range.
• Keep total stagger under 500ms.
• 200ms * 10 items = 2s is too slow.
• Prefer viewport-only stagger when long lists are involved.

Minimal Examples

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-enter {
  animation: slideUp 240ms var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .card-enter {
    animation: fadeIn 120ms ease-out both;
  }
}

## Modern CSS Patterns (2025)

| Pattern | Duration | Easing | Use When | Notes |
|---------|----------|--------|----------|-------|
| MPA cross-document fade | `200-250ms` | ease-out | Astro/MPA route changes | `@view-transition { navigation: auto }` only |
| Scroll-driven reveal | continuous | linear | ViewTimeline usage | `animation-range: entry 0% entry 60%` |
| Popover/dialog entry (pure CSS) | `150-200ms` | ease-out | `@starting-style` + `allow-discrete` | No JS required |
| Gradient hover transition | `300ms` | ease-out | `@property` gradient animation | Chrome/Safari only |
| Magnetic cursor pull | `300ms` | `cubic-bezier(0.33, 1, 0.68, 1)` | Creative/portfolio button hover | Wrapper padding creates detection zone |
| Aurora/holographic shift | `4-8s` | ease infinite | Premium card effects, hero backgrounds | `background-size: 200% 200%`, OKLCH gradient layers |
| Skeleton shimmer | `1.5-2s` | ease-in-out infinite | Content loading states | `background-size: 200% 100%`, linear-gradient animation |
| Liquid glass refraction | continuous | N/A | Overlay cards, iOS-style surfaces | SVG `feDisplacementMap` + `backdrop-filter: blur()` |
| Scroll-state sticky shadow | instant | N/A | Header shadow on stick | `@container scroll-state(stuck: top)`, CSS-only |

<motion.ul variants={{ show: { transition: { staggerChildren: 0.05 } } }}>
  {items.map((item) => (
    <motion.li
      key={item.id}
      variants={{
        hidden: { opacity: 0, y: 16 },
        show: { opacity: 1, y: 0 },
      }}
    />
  ))}
</motion.ul>