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. The demo is free to try; the source and the prompt come with a subscription.
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
- What it does (visual) — a frame-by-frame description a designer could storyboard from.
- Tech stack — exact libraries, versions and import lines.
- HTML + CSS — the skeleton with class names, sizes, positioning and overflow rules.
- 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.
- Interaction, responsive, accessibility, performance — pointer timings,
gsap.matchMedia()breakpoints, the reduced-motion fallback, cleanup and DPR caps. - 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.
What else is here
- Scroll Library — a scroll museum: eleven rooms that demonstrate reveal, pin, parallax, transform, text, SVG, colour, WebGL, navigation, storytelling and CSS-native techniques live, each linking to its effects. Scroll effects get a special viewer: auto-scroll, ScrollTrigger markers, a Lenis toggle and a scrub bar showing every trigger range.
- Playground — every effect exposes knobs; changing one re-runs the demo and, for subscribers, rewrites all prompt tabs so what you copy matches what you tuned.
?k=in the URL shares a state. - Prompt Builder — stack effects in page order, set fonts, colours and tone, and copy one master prompt for a whole site (subscribers).
- Assets — original, CC0/OFL icon sets, textures and 3D primitives, each with its license, made for the demos and free to reuse.
- Saved — favorites, custom collections and history, stored in your browser, exportable as JSON. ? shows the keyboard shortcuts.
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-changeonly while animating.