motion-and-interaction-systemlisted

# 11 — Motion and Interaction System ## Motion Hierarchy - **Tier 1 (always)** — Page transitions, loading / skeleton, form validation, success / error, nav hover, smooth scroll, accordion, modal, tooltip - **Tier 2 (usually)** — Scroll-reveal, hover enhancements, staggered reveals, counters, progress, subtle parallax - **Tier 3 (when appropriate)** — CTA micro-interactions, confetti, animated illustrations, ambient motion, easter eggs **Anti-slop** — each animation serves one purpose: state change, attention direction, or brand reinforcement. Uniform fade-in on everything = red flag. ## Hero Drama (NON-NEGOTIABLE — every site) Static hero = AI slop. Every hero MUST have ONE dramatic motion element layered on the brand-splash background: - (a) Ken Burns slow-zoom (`scale(1) → scale(1.08)` over 18-24s, ease-in-out, infinite reverse) on the brand-splash image - (b) Parallax scroll on splash (`animation-timeline: scroll(root block); transform: translateY(calc(var(--scroll) * 0.3))`) - (c) Animated gradient mesh overlay (3-5 brand-color blobs, `filter: blur(80px)`, drifting via `@keyframes drift` 30-60s) - (d) Particle field (canvas-based, `requestAnimationFrame`, ≤30 particles) - (e) Split-text headline reveal (each word `@starting-style translateY(40px) opacity:0 → 0 0`, stagger 80ms via `sibling-index()`) Pick ONE per site (never stack — overload = noise). Pair with `prefers-reduced-motion` static fallback. The hero is the first impression — flat = forgettable. ## Numb