# NULLFORM — Clothes for bodies that don’t exist yet

## Motion implementation and acceptance

Implement the interactions specified in the brief. The catalogue recording is a visual reference and the poster is a loading, error or reduced-motion fallback. Implement the moving scene separately from both.
- Catalogue recording (reference only): https://video.gumlet.io/6a7e9e0f2621db881577453e/6ad1a2e22c6388d890efa7e6/main.mp4
- Poster (still fallback only): https://media.scrollhaus.ai/thumbs/nullform.21e1b9630123.webp

Additional source assets. For each grouped list, prepend its base URL to each filename or path exactly as written.
- https://cdn.spline.design/@splinetool/runtime@2.0.85/build/runtime.js

For scroll-scrubbed video, use a muted inline video, wait for loaded metadata, and map section progress in both directions to the video timeline. Seek when the target changes and coalesce seeks while one is pending. For a frame sequence, draw the indexed frame to canvas as scroll progress changes. For scripted, CSS or 3D motion, recreate the triggers and transforms in the brief. Use normal playback for clips described as loops.

Test at two different scroll positions and then scroll back. Confirm the video time and visible frame change, or confirm the specified canvas, CSS or 3D state changes. If a required source fails, report its URL and the missing motion before calling the build complete.

Create a responsive React + TypeScript + Vite + Tailwind CSS hero section. Use small components for navigation, the 3D stage, the headline, the HUD and the intro. Put media URLs in src/lib/assets.ts and animations in cleaned-up hooks. Do not output a giant HTML file, an iframe, or a screenshot pretending to be the website.

## Design direction
A one-screen dark hero for a digital fashion house: a live Spline cyber mannequin under a spotlight turns to follow a cyan particle orb that rides the cursor. A crosshair and live gaze readout track the pointer, and the giant split word NULL / FORM decodes into cyan glyphs where the cursor passes. Michroma display, Saira body, Azeret Mono HUD.

Palette and type: --void: #000; --ink: #e8ecf1; --dim: #8a929c; --cyan: #5ef2ff; --display: "Michroma", system-ui, sans-serif; --body: "Saira", system-ui, sans-serif; --mono: "Azeret Mono", ui-monospace, monospace.
Font stylesheet: https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&family=Michroma&family=Saira:wght@300;400;500&display=swap

## Layout and copy
One 100svh screen: nav (NULLFORM®, Collection 07 · Fit lab · Journal, "Book a scan") → giant split word "NULL" | figure | "FORM" → bottom-left intro ("Clothes for bodies that don't exist yet…", "Enter the fit lab →") → bottom-right tracking HUD. No other sections.

## Motion and interaction
Load the Spline scene (served Brotli-compressed from media.scrollhaus.ai) and keep every overlay pointer-events:none so the canvas gets the mouse; the scene's own events drive the orb and the look-at. When idle 3.5s or on touch, dispatch synthetic pointermove+mousemove on the canvas along x = W(.5+sin(.42t)·.32+sin(1.3t)·.04), y = H(.42+sin(.7t+1)·.2) so the figure keeps glancing. Crosshair lines and a coordinates tag follow the pointer; HUD shows Locked/Searching and signed gaze x/y. Letters within max(120px, 1.3×height) heat up (dt·6·(1−d/reach)+dt, decay 1.4/s) and swap glyphs every 55ms while heat > .25.
Use the npm package @splinetool/runtime@2.0.85 in one React component with a canvas ref; keep pointer state in refs, run one requestAnimationFrame loop, and dispose the Application on unmount.

## Exact media
Asset and content map (JSON, not HTML): https://scrollhaus.ai/build-assets/nullform.json
Visual demo: https://video.gumlet.io/6a7e9e0f2621db881577453e/6ad1a2e22c6388d890efa7e6/main.mp4
Thumbnail / loading poster: https://media.scrollhaus.ai/thumbs/nullform.21e1b9630123.webp
- 3D scene: https://media.scrollhaus.ai/sites/nullform/assets/scene.splinecode
- Poster until the scene is ready: https://scrollhaus.ai/sites/nullform/assets/poster.webp
Read the JSON map before implementing; its referenceNotes contain the full design and motion details. Use the exact URLs. Do not replace the scene with a video or an image.

## Responsive behavior and finish
At 1440×900 keep NULL and FORM flanking the figure. At 390×844 stack the word at the top, hide the HUD, keep the intro readable over a bottom gradient, and avoid horizontal overflow. Honor reduced motion and keep keyboard access.

Run the production build. Check the cursor driving the mannequin's gaze, the letter decode, the HUD and the idle glance on touch. Compare against the reference; report any unverified differences rather than claiming a guaranteed match.