Interaction Pattern Library

An interaction pattern library is a catalog of reusable UI behaviors — each documented with the trigger, the transition, the target state, and the implementation specification. The library serves two purposes: it gives the concept generation phase a vocabulary of proven interactions, and it gives the development phase a reference for implementation.

Our interaction pattern catalog: Stagger Reveal (trigger: element enters viewport, transition: 50ms-staggered fade-up, implementation: Framer Motion stagger with InView). Glass Panel Hover (trigger: cursor enters card, transition: border brightens to rgba(0,255,255,0.4), subtle scale 1.02, implementation: CSS transition 200ms). Tab Switch (trigger: tab click, transition: content cross-fades in 300ms, indicator slides, implementation: layout animation). Detail Expand (trigger: row click, transition: panel slides open from right at 400ms, implementation: AnimatePresence). Glow Pulse (trigger: status change, transition: cyan text-shadow pulses 3x then settles, implementation: CSS keyframe animation).

Each pattern in the library includes: a visual reference (static before/during/after states), the motion specification (easing, duration, delay), and the code implementation (React/Framer Motion snippet). When generating concept visuals, the prompt references patterns by name: "Use the Stagger Reveal pattern for the agent grid." The model interprets the visual intent; the developer implements the exact specification.