MotionLab · animation & interaction generator
MotionLab is a browsing tool for web animation decisions. Pick a category, compare named patterns such as Fluid Wave, Magnetic Hover or Elastic Reveal, then tune speed, intensity, direction and delay in a live playground until the timing feels right — and take the values back to your stylesheet.
Each guide names the patterns, explains what they cost, and tells you when a simpler option will read better. Start with the category that matches the problem on your screen right now.
01 · Entrance motion
Fluid Wave, Morphing Gradient, Floating Layers and Liquid Reveal compared on load cost, perceived speed and how they behave when the hero holds real text.
Read the guide
02 · Scroll systems
Parallax Drift, pinned sections, scroll-linked progress and staggered entry. Where Intersection Observer is enough, and where scroll-driven animations earn their complexity.
Read the guide
03 · Pointer craft
Magnetic Hover, 3D Tilt, Glass Distortion and cursor followers — plus the micro-interaction rules that keep buttons, cards and links feeling responsive rather than springy.
Read the guide
04 · Reveals
Line masks, clip-path wipes, Liquid Reveal and Elastic Reveal. How to split type without breaking screen readers, and how to reveal images without layout shift.
Read the guide
05 · Live tool
Six presets, four controls, one generated CSS snippet. Shuffle for a starting point, then tune duration, amplitude, direction and stagger until the preview reads correctly.
Open the toolEvery pattern in the index is described against the same four questions. If a pattern fails the first one, nothing else about it matters.
Motion should explain a relationship: this panel came from that button, this list is still loading, this card is the one under your pointer. Decoration that carries no meaning is the first thing to cut when a page feels slow.
Transform and opacity can usually be handled without re-running layout. Animating width, height, top or box-shadow invites layout and paint work on every frame, which is where dropped frames come from on mid-range hardware.
Micro-interactions read best around 120–200ms, component transitions around 200–320ms, and full-page or hero sequences up to roughly 600ms. Anything longer needs to be interruptible or it becomes a wait.
Content must be readable with animation switched off. Every pattern here assumes a prefers-reduced-motion branch and a no-JavaScript fallback in which elements are simply visible.
Reference reading: the specifications and browser notes behind these patterns are documented on MDN's CSS animation reference, the Web Animations API pages, and support tables on Can I use.