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