# PIXO: a 3D desk-buddy robot with moods driven by your cursor

## 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/6ade1646e655cfbd81272fdd/main.mp4
- Poster (still fallback only): https://media.scrollhaus.ai/thumbs/pixo.e9090248bc93.webp

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 one-screen React + TypeScript + Vite + Tailwind CSS hero around one Spline scene. Components: Nav, HeroCopy (kicker, leaning headline, lede, CTAs), MoodChip, TipsRow, and PixoStage, which loads the Spline scene with @splinetool/runtime (or @splinetool/react-spline) and drives it. Put the mood logic in one hook (usePixoMood: pointer, speed, shake, idle, clicks to a mood) and the per-frame pose writer in src/lib/pixo-rig.ts. Do not output a giant HTML file, a video, or a screenshot pretending to be the website.

## Design direction
A fictional desk-buddy robot, PIXO. A warm cream studio (#FFFDF3 over a soft cyclorama) with one cute, glossy robot: a rounded cream head with a dark glass screen face (cyan pill eyes, white glints, pink cheek glows, a small mouth), tangerine ear caps, an antenna with a glowing tangerine bulb, a rounded body with a tangerine waist ring and a cyan chest lamp, floating capsule arms with tangerine ball hands, and a dark hover base with a cyan thruster ring and a soft floor shadow. PIXO behaves like a pet that is paying attention, not a cursor follower: five moods are read from how you use the mouse.

Colours: ink #1B1A1F, tangerine #FF6B2C, cyan #6CF3FF (UI accent #2EC9DA), cream #F6F2EC, page #FFFDF3, mood colours curious #2EC9DA, happy #FF6B2C, dizzy #A77BFF, sleepy #8A7CFF, startled #FFC23D.
Type: Space Grotesk 400/500/700 (UI, headline) and Instrument Serif italic (the word "attention.").
Font stylesheet: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&family=Space+Grotesk:wght@400;500;700&display=swap

## The robot (build it in Spline, parts on pivots)
Name every driven part: PIXO Rig (whole robot), PIXO Head Pivot (empty at the neck, y 375) holding Head Shell (330 x 250 x 230, corner radius 90), Screen (262 x 182 x 30, radius 62), ears and caps, PIXO Antenna Pivot (crown) with stem and bulb, and PIXO Face (empty at the screen centre) holding Eye L/R (38 x 66 pills, emissive cyan), Glint L/R, Cheek L/R, Mouth, a hidden Face Text (mood glyphs) and a hidden Message (click words). Arm L/R Pivots sit at the shoulders (x +/-158, y 330). Body 250 x 230 x 200 (radius 95), waist ring radius 133, thruster disc and glow torus underneath. One directional key light high and to the front-right with soft shadows, AO on, a shadow-catcher floor. A play camera at (-300, 430, 1650) on desktop (PIXO sits right of the copy) and (0, 800, 2750) on portrait screens; orbit controls off.

## Moods (decide every frame, most urgent first)
- Dizzy: 4 fast horizontal direction reversals (over 900 px/s) within 0.9 s. For 2.4 s the eyes become "@   @", the head wobbles and spins, the arms flail and the body swivels, all decaying.
- Startled: any input while asleep. For 0.9 s the eyes widen 1.45x, the mouth becomes a tall "o", PIXO hops and "!" appears.
- Happy: clicking PIXO (or hovering it). It hops 70 units, waves its right arm, the antenna bulb and chest lamp flash, the cheeks grow and the screen shows "^   ^" with the next word from HI! / BEEP / <3 / BOOP / :D / HEHE.
- Sleepy: 6 s without input. Over 1.2 s the eyes squash to lines, the head droops 14 degrees, the arms flop and three "Z" letters drift up from the head, growing and fading.
- Curious (default): the head turns up to 30 degrees and nods up to 14 degrees toward the pointer, the eyes slide across the screen (16 x 10 units), a gentle head tilt, and slightly wider eyes when you move slowly.
Always on: hover bob (sin 2.1 t x 9), a slow body lean toward the pointer, antenna sway, idle arm sway, a pulsing thruster ring and chest lamp, a blink every 3.7 s.
Face text: Spline text is laid out left/top in its text box, so after each text change read the glyph bounds and offset the object so the glyph centre lands on the screen centre.

## Page
Nav: an eye-screen logo mark + "PIXO", "How it works", "Moods", a dark "Pre-order" pill. Copy on the left at 7vw: kicker "DESK BUDDY, VERSION ONE" with a tangerine dot, the headline "A desk buddy / that pays attention." (clamp 44 to 92 px, -0.045em) leaning toward the pointer (perspective 900 px, rotateY up to 7 degrees, rotateX 5 degrees, shift 10 px), the lede, "Meet PIXO →" (tangerine with a soft glow) and "Watch it react" (outline). Bottom-left a live mood chip ("Mood curious", the dot in the mood colour); bottom-right tips "Move slowly · Shake · Wait · Click PIXO", the current one highlighted. Phones: copy stacked on top, PIXO in the lower half, tips hidden, no horizontal overflow at 390 px.
Live reference: https://my.spline.design/untitled-dESa1GXEyJG0iZtoNZjnhp8i/ · Asset map: https://scrollhaus.ai/build-assets/pixo.json