MotionVault

A minimalist web animation inspiration library — 202 effects across 10 categories, each with a copy-ready AI prompt — plus MotionLens, a tool that turns any website's animation into a reusable prompt.

Why

Two recurring problems when building interfaces:

1. Finding good animation references is hard. Galleries show off visuals but not implementations, so every effect still starts from a blank file.
2. Seeing a great animation in the wild doesn't mean you can reuse it. Reverse-engineering duration, easing, and keyframes from DevTools is slow guesswork.

MotionVault addresses the first with a browsable library where every effect ships with a complete, copy-ready prompt for AI coding tools. MotionLens addresses the second: click any animated element on any page, and get structured parameters plus a reproduction prompt.

Features

The library

• 202 effects across 10 categories — text, cards, 3D, particles, backgrounds, buttons, scroll, SVG, loaders, spring physics
• Copy-ready AI prompts for every effect, written for Cursor / Claude Code (React 19 + TypeScript stack constraints, exact durations, easings, and color values)
• Live previews for every effect, lazily mounted and paused off-screen
• Interaction tags (hover / click / move / scroll / auto) so you know how each effect triggers before opening it
• White, minimal design — the effects are the content
• Real tech, no fakes: CSS keyframes, WAAPI, Framer Motion, GSAP + ScrollTrigger, React Three Fiber, Canvas 2D, Lenis smooth scroll

MotionLens (capture/)

• Structural extraction of CSS animations, transitions, and WAAPI via getAnimations({subtree: true}) — exact keyframes, no approximation
• Sampling fallback for GSAP / rAF inline-style animations: 60 fps computed-style sampling with segmented least-squares easing fit
• Trigger probing: dispatches pointer/focus events and observes running animations to attribute hover/click/scroll triggers
• Two shells, one engine: a 50 KB zero-dependency bookmarklet and a Chrome MV3 extension with a local library and tab-record mode for canvas/WebGL
• BYOK LLM analysis (OpenAI / Anthropic / openai-compatible) converts a capture into an EffectDraft with bilingual reproduction prompts; extraction works fully offline without a key — copy the CaptureReport JSON and feed it to any AI tool yourself

Demo

Live site: https://xiyu519.github.io/MotionVault/

The site also ships a built-in walkthrough of the MotionLens pipeline (pick → extract → analyze → collect) on the /capture route, with step-by-step guides for both the bookmarklet and the extension.

Tech Stack

Layer	Choice
Framework	React 19 + TypeScript + Vite 7
Styling	Tailwind CSS 3, tailwind-merge, CVA
Animation	Framer Motion, GSAP + ScrollTrigger, WAAPI, CSS keyframes
3D / Canvas	Three.js + React Three Fiber + drei, Canvas 2D
Routing	React Router 7
MotionLens	TypeScript core, esbuild (bookmarklet), Chrome MV3 (extension), Playwright (benchmark)

Quick Start

Requires Node.js ≥ 20 (22 recommended; .nvmrc pins 22).

git clone https://github.com/xiyu519/MotionVault.git
cd MotionVault
npm install
npm run dev        # http://localhost:3000

Build for production with npm run build; lint with npm run lint.

MotionLens Quick Start

node capture/scripts/build-bookmarklet.mjs   # → capture/dist/bookmarklet-url.txt
node capture/scripts/build-extension.mjs     # → capture/dist/extension (load unpacked)

Bookmarklet: save the URL as a bookmark, click it on any page, click the animated element. No key required — click "skip" in the settings panel for offline extraction of durations, easings, and keyframes. Full documentation: capture/README.md.

Repository Structure

├── src/
│   ├── components/effects/   # the 202 effects, one folder per category
│   ├── data/                 # categories + effect entries (prompt, tags, component)
│   ├── pages/                # home, 10 category pages, /capture walkthrough
│   └── components/ui/        # shared UI primitives
├── capture/                  # MotionLens
│   ├── src/core/             # extraction engine (pick, extract, sample, fit)
│   ├── src/analyze/          # BYOK LLM analyzer + prompt builder
│   ├── src/shell/            # bookmarklet + Chrome extension shells
│   ├── benchmark/            # harness that tests MotionLens against this library
│   └── test/                 # unit tests + Playwright e2e
├── public/                   # prebuilt bookmarklet + url for the /capture page
└── docs/assets/              # README demos and social preview

Deployment

Fully static output — no server needed. Pushing to main/master triggers .github/workflows/deploy.yml, which builds and publishes dist/ to GitHub Pages automatically (SPA routing fallback via public/404.html is built in). Vercel / Netlify also work zero-config.

Benchmark

MotionLens is benchmarked against MotionVault itself — the library is the test suite, every miss has a known ground truth. Latest run (72 cards, 6 per category, headless Chromium):

• Total coverage: 63.9% (46/72 cards with ≥1 structured animation or fitted sample segment)
• 62 structured animations extracted: waapi = 53, transition = 7, css = 2
• Sampling fallback hit 23 cards (27 fitted segments, average fit error 0.114)
• layout / buttons / scroll / loaders at 100%; canvas & WebGL categories at 0% by design (vision fallback territory)

Full numbers and per-category table: capture/benchmark/results/report.md.

Contributing

Contributions welcome — new effects, MotionLens fixes, docs. See CONTRIBUTING.md for the dev setup, the effect-entry format, and PR conventions.

Legal & Ethics

MotionVault effects are original implementations. MotionLens extracts **facts abo