Build a website your hand can control (the paper scrunch site)

A hyperrealistic studio photograph of a life-size papercraft sculpture portrait of a young woman, her head and shoulders constructed from hundreds of flat kraft-paper facets. Every plane of the face is a separate piece of matte warm-beige card with crisp folded edges, visible paper thickness, fine seam gaps and subtle shadow inside each crease, a physical low-poly paper model photographed in a studio, not a digital render or a texture overlay. Each facet catches a slightly different value of light. Only her eyes and lips are real: glossy hyperrealistic eyes with wet highlights and soft lashes, naturally glossy lips, set into the matte paper face for an uncanny mixed-media contrast. Her hair is pulled back and swept over one shoulder in a loose plait built entirely from individually cut and folded strips of dark paper with visible cut edges and fine printed hair grain, a few loose paper strands framing both sides of her face. Soft directional key light from camera left, deep black studio backdrop, shallow depth of field, medium-format portrait photography, extremely detailed.

Start from the attached papercraft portrait exactly as it is. The entire paper sculpture crumples inward like a sheet being scrunched into a ball: facets buckle, creases collapse, the face folds in on itself, until only a tight crumpled paper ball floats against the black backdrop. Slow, continuous, satisfying motion. Studio lighting unchanged, camera locked off, black background, 9 to 10 seconds.

Build me a single self-contained index.html (all CSS and JS inline, no build step, no frameworks) for a full-screen portfolio hero where my hand controls a paper-crumple video via live webcam hand tracking. My crumple clip is in this folder as scrunch.mp4: a papercraft portrait that starts flat and intact and crumples into a paper ball in one continuous take.

First, prep the video for smooth scrubbing. Re-encode it so every frame is a keyframe: ffmpeg -i scrunch.mp4 -x264-params keyint=1:min-keyint=1 -pix_fmt yuv420p -movflags +faststart scrunch-scrub.mp4, and use scrunch-scrub.mp4 in the page. Also extract the first frame as poster.jpg: ffmpeg -i scrunch.mp4 -frames:v 1 poster.jpg. Scrubbing a normal mp4 is janky; all-keyframes makes seeking instant.

LAYOUT (dark, editorial, full viewport, no page scroll): black background, white text, one warm accent. Top nav with a serif wordmark on the left, centered text links, and two pill buttons on the right (a ghost outline and a solid white one). Under it a small tagline row, then a large headline (max-width about 58vw, font-size clamp(44px,6.6vw,96px)) whose last line is a serif italic block. Bottom-left, pushed to the bottom, a short muted bio paragraph and a white pill link. Gentle staggered rise-in on load. Add a very faint SVG fractal-noise grain over the whole page.

THE PAPER REEL (the video the hand controls): fixed in the upper right (top about 38px, bottom 12px, a right offset around clamp(80px,13vw,280px), width min(50vw,720px)). Inside, the video at 100% width and height, object-fit contain, mirrored horizontally (transform scaleX(-1)), poster.jpg as its poster, and a soft radial-gradient CSS mask so the portrait feathers into the black page (roughly an ellipse 60% 58% at center, solid to about 48%, transparent by about 82%). Keep the video PAUSED at all times and drive it by a scrunch amount from 0 to 1, where 0 is the flat first frame and 1 is the fully crumpled last frame; map it to currentTime = scrunch * (duration - 0.06). Ease it: keep a shown value that lerps toward the target every animation frame (shown += (target - shown) * 0.18) inside a requestAnimationFrame loop, and set currentTime ONLY there, never inside an event handler. Guard all timeline math until loadedmetadata so duration is never NaN. Add a small status badge top-left of the reel that reads Flat under about 3% and otherwise N% scrunched, with its dot changing colour once it starts crumpling.

THE FLOATING POLAROID WEBCAM (the controller): a draggable, resizable polaroid pinned bottom-right, about 240px wide. Cream paper, a slight rotation, soft shadow, a strip of translucent tape across the top, a subtle paper-grain texture. Use container-type: inline-size and size the internals in cqw units so the whole polaroid scales cleanly when resized. The photo window (aspect ratio about 3 / 3.4, dark) holds a canvas showing the webcam feed MIRRORED with a hand skeleton drawn over it; under it a handwritten caption reading open-hand "flat", dot, fist "scrunch". A small status pill sits over the photo. A resize grip in the bottom-right corner scales the width (clamp about 120 to 520px, keep aspect). The whole polaroid drags anywhere with pointer events (on first drag switch from right/bottom anchoring to left/top and clamp inside the viewport).

HAND TRACKING (openness controls scrunch): request the webcam (getUserMedia, user-facing, 640x480). Load MediaPipe Tasks Vision from the jsdelivr CDN (import @mediapipe/tasks-vision@0.10 vision_bundle.mjs, FilesetResolver.forVisionTasks pointed at the matching wasm, HandLandmarker with the hosted hand_landmarker float16 task model), VIDEO running mode, numHands 1; try the GPU delegate first and fall back to CPU. Each frame, draw the mirrored video to the canvas (cover fit), run detectForVideo only when the video time advanced, and if a hand is found draw the standard 21-landmark skeleton as thin white lines with a soft glow plus small accent dots (wrist dot slightly bigger). Compute openness continuously: average the distance from each fingertip (landmarks 8, 12, 16, 20) to the wrist (0), divide by palm size (distance from wrist 0 to middle-finger base 9), then normalize roughly as (r - 1.05) / (1.85 - 1.05) clamped 0 to 1, so a fist is about 0 and an open hand about 1. Set the scrunch target = 1 - openness (open hand = flat, closed fist = crumpled) and update the status pill. When no hand is detected, ease the target back toward 0 (flat) slowly and show a "no hand, relaxing flat" note.

FALLBACKS AND POLISH: if hand tracking fails to load, show a "tracking offline, click reel to play/pause" message and let a click on the reel toggle play/pause instead, and expose a window.__scrunch(v) helper (0 to 1) so I can test without a hand. Responsive: under about 980px, hide the centre nav links and turn the reel into a faint full-bleed background behind the text, with the polaroid smaller in the corner; respect prefers-reduced-motion by skipping the scrub and just showing the poster. Everything in one index.html besides scrunch-scrub.mp4 and poster.jpg. Then run it and show me a preview.