hand trackingmediapipevideo scrubbingreact + vite

MOTION / FORM — Gesture-Controlled Exploded Gallery

Name: MOTION / FORM — Gesture-Controlled Exploded Gallery
Brand: Brand Motion Studios

Pinch your fingers apart and the object comes apart with them.

A full-screen gallery of five transformation films driven entirely by your hands. Slide sideways to move between cards, hold an open palm to enter one, then pinch to scrub the object between assembled and exploded — the distance between thumb and index maps straight onto the film's timeline, so the object is wherever your fingers are. Two fingers dismisses it. Hand tracking runs on-device through MediaPipe with the WASM served from the app's own origin, so it works offline and no video ever leaves the machine. The films are never played linearly while gesture control is on: currentTime is written from the pinch value every frame, which is why they are re-encoded so that every frame is a keyframe. Spoken feedback announces each card, and mouse, scroll and keyboard fallbacks mean the whole thing still works with no camera at all.

Paste the prompt intoClaude CodeCursorAntigravityWindsurfLovableBoltv0

What's in the source

42 files — the finished project, ready to run with npm install and npm run dev.

motion-form-gesture/
├─ src/  16 files
├─ public/  14 files
├─ scripts/  1 file
├─ README.md
├─ index.html
├─ package.json
└─ … 8 more

How to run this

Works the same on Windows, macOS and Linux. No prior setup beyond Node.js, and nothing to configure — the pack runs as-is.

Built with: Vite 8
Requires: Node.js 20 or newer
Opens at: http://localhost:5173

Note — Driven entirely by hand gestures, so it needs a webcam — allow the camera prompt when the page loads. Tracking runs on-device via MediaPipe and no video ever leaves the machine. Note that browsers only grant camera access on a secure context: localhost is fine, but on any other host it must be served over HTTPS. The films ship re-encoded to 720p all-intra so the pack fits in one download; the README has the ffmpeg line to rebuild them at 1080p from your own masters.

✦ Or let an AI agent set it up for you

Already using Claude Code, Antigravity, Cursor or Windsurf? Unzip the pack, open the folder as a project, and just ask:

Install the dependencies and run this project, then give me the URL

It reads the README included in the pack, runs the right commands for this project, and sorts out anything that trips along the way. You still need Node.js installed (step 1 below) — everything after that it can handle.

Or run it yourself

1
Install Node.js, if you don't have it
Download the LTS build from nodejs.org and run the installer — on Windows and Mac it handles everything. Mac users with Homebrew can run brew install node instead.
To check it worked, run node --version. It should print a number like v22.11.0.
2
Unzip the pack, then open a terminal inside the folder
Windows: open the unzipped folder in File Explorer, click the address bar, type powershell and press Enter.
Mac: press Cmd+Space, type terminal, press Enter. Then type cd (with a trailing space) and drag the unzipped folder onto the terminal window — it fills in the path for you. Press Enter.
3
Install the dependencies
Run npm install
One-time, and takes roughly 30–60 seconds. It creates a node_modules folder — that's expected, and it's why the zip doesn't ship one.
4
Start it
Run npm run dev
Then open http://localhost:5173 in your browser. Leave the terminal open while you use it — closing it stops the site. Press Ctrl+C in the terminal to stop.
5
Optional — build for production
When you're ready to deploy, npm run build produces the optimised output. The pack deploys to Vercel, Netlify or any Node host with no changes.

+ If something goes wrong

“npm is not recognised” / “command not found: npm”: Node.js isn’t installed, or the terminal was open before you installed it. Close the terminal, open a new one, and try again.
“Port 5173 is already in use”: Something else is running there — often a previous copy of this site. Close the other terminal, or stop it with Ctrl+C.
The page loads but images or video are missing: Make sure you ran the command from inside the unzipped MOTION / FORM — Gesture-Controlled Exploded Gallery folder itself, not the folder containing it.
npm install shows warnings: Warnings (as opposed to errors) are normal and safe to ignore. Only a message starting with ERR! needs attention.

Still stuck? Email us and we'll get it running with you.

Questions about MOTION / FORM

Who is MOTION / FORM for?

MOTION / FORM is for designers, developers and agencies who want a site that moves like film and doesn't look like a template. Ask your AI to make it about your brand and it rewrites the copy, colours and images around the same build.

What is MOTION / FORM built with?

MOTION / FORM is built with Mediapipe, React + Vite, hand tracking and video scrubbing. The source is a Vite project: run npm install, then npm run dev, and it opens locally exactly as the preview shows. The prompt is written for coding agents such as Claude Code, Cursor and Antigravity.

Can I use MOTION / FORM for a client project?

Yes. Every purchase includes a commercial licence: use it in your own projects and in work you deliver to clients, including paid client work, change and rebrand it, and publish the result with no credit needed. What you can't do is resell, share or republish the prompt or the source files themselves.

Should I buy the prompt or the source?

The prompt is the written brief that built the design: paste it into a coding agent such as Claude Code, Cursor or Antigravity and it builds the site on your computer, which you then refine. The source is the finished project itself, ready to run exactly as the preview shows. The source always includes the prompt.

Will the prompt give me exactly the preview?

Not exactly, and that's expected. A prompt is a starting point: AI output varies between tools and between runs, so plan to refine spacing, timing and copy. The source pack is the preview itself, finished and running.

Can I get a refund?

Single designs are final once delivered, unless something is wrong on our side: a broken or empty download, a pack that isn't what its page describes, or a double charge. Then email support@brandmotion.in with your receipt and we fix it or refund it. The full terms are on the refunds page.

Prompt $4.99 · Source $14.99 · or All-Access

Unlock MOTION / FORM — Gesture-Controlled Exploded Gallery

Buy just the prompt, the full source, or get All-Access for every design in the store.

The prompt

$4.99

The exact prompt that built it. Paste it into Claude Code and make it yours.

Complete sourcePrompt included

$14.99

The finished build, as a download that runs today. The prompt comes with it.

Or get All-AccessEvery design in the store, from $74.25 a year

Secure checkout by Lemon SqueezySecure checkout by Razorpay · UPI, cards, netbanking
Instant access the moment payment clears
Anything broken on our side is fixed or refunded within 7 days. Policy

A prompt is a starting point, not a build script. AI models land differently on every run, so expect to refine the result — spacing, timing and copy — before it feels like the preview. The source pack is that preview, finished and running.

What's included

✦Both prompts — the exploded-asset generation brief and the full application brief
✦MediaPipe gesture layer: slide, open palm, pinch aperture and two-finger dismiss
✦The all-intra encode and verification commands that make frame-accurate scrubbing possible
✦Five finished transformation films, plus posters and the studio backdrop
✦Complete source included — runs with no API keys