About

A library you can paste.

MOTION/LAB collects the motion patterns that make award-winning sites feel the way they do — pinned scroll, masked type, refractive glass, Flip transitions — and turns each one into three things: a live demo, its complete source, and a prompt precise enough that an AI coding tool rebuilds it exactly.

Nothing here is copied. Every technique is recreated from first principles, documented with exact values, and ships with a reduced-motion fallback.

How a prompt is written

  1. What it does (visual) — a frame-by-frame description a designer could storyboard from.
  2. Tech stack — exact libraries, versions and import lines.
  3. HTML + CSS — the skeleton with class names, sizes, positioning and overflow rules.
  4. Animation spec — every tween's target, property, from → to, duration, ease string, stagger and timeline position; every ScrollTrigger's trigger, start, end, scrub and pin.
  5. Interaction, responsive, accessibility, performance — pointer timings, gsap.matchMedia() breakpoints, the reduced-motion fallback, cleanup and DPR caps.
  6. Knobs + acceptance criteria — what to tweak and how to verify the result matches.

Each effect has a second, shorter drop-in prompt for adding the effect to an existing section without changing the rest of your site.

How to add an effect

The repository is built to scale past a thousand effects without slowing down: demos compile to isolated pages, listings never load a demo until hover, search is a static index.

npm run new:effect -- --slug=my-effect --category=scroll
# → src/content/effects/my-effect/{meta.md, prompt.md, demo.html, demo.css, demo.js}

npm run thumbs -- --only=my-effect   # headless QA + 1200×750 thumbnail
npm run build                         # fails if any file or field is missing
npm run deploy                        # Cloudflare Pages
  • Demos load libraries from /vendor/ only — no CDN at runtime.
  • Every demo cleans up (ctx.revert(), renderer.dispose()) and pauses off-screen.
  • Only one WebGL demo runs at a time on any page.
  • Transforms and opacity only; will-change only while animating.