# Petal System — build prompt

## 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/6ad0838455aedeac6cf047b7/main.mp4
- Poster (still fallback only): https://media.scrollhaus.ai/thumbs/petal-operating.5889740a4d06.webp
- Scene source · petal-operating.glb: https://media.scrollhaus.ai/meshy-collection/v3/petal-operating.glb
- Scene source · petal-operating-alt.glb: https://media.scrollhaus.ai/meshy-collection/v3/petal-operating-alt.glb

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.

Build a complete, responsive creative website using **React, TypeScript, Vite, and Tailwind CSS**. Keep the source in small, editable modules (`App.tsx`, `ModelStage.tsx`, `config.ts`, `style.css`) rather than one huge HTML document. Three.js and its GLTFLoader are the only extra libraries needed for the 3D asset. The HTML file is a minimal Vite entry point.

## Brand and art direction

- Name: Petal System. Hero line: “Beautiful things move.”
- Palette: fuchsia, vermilion, blush. Graphic motif and typography: floral dot pattern, high-impact uppercase type, petal-shaped cards.
- Make this identity clearly different from other Scrollhaus sites. Do not turn it into a generic agency template or change the written text/colours from the live reference.
- Reference: https://scrollhaus.ai/sites/petal-operating/index.html

## Essential interaction

- Show the sharp poster `https://media.scrollhaus.ai/meshy-collection/v3/petal-operating.webp` immediately, then load the actual 3D model from `https://media.scrollhaus.ai/meshy-collection/v3/petal-operating.glb` in a transparent WebGL canvas. The poster fades only after the model renders.
- Import `MeshoptDecoder` from `three/addons/libs/meshopt_decoder.module.js` and call `new GLTFLoader().setMeshoptDecoder(MeshoptDecoder)` before loading. The hosted GLBs use Meshopt compression; omitting the decoder makes the model fail to open.
- Center the model inside a parent group, scale the parent to a 3.2-unit maximum dimension, and fit the camera to both width and height with a 12% margin. Normalize the model to its bounding box and light it with ambient, key, and coloured rim lights; use sRGB output, ACES tone mapping, antialiasing and device pixel ratio up to 2 for a crisp face.
- Move the sculpted face and eyes with pointer position: normalize pointer x/y across the WHOLE viewport to −1..1; smoothly interpolate rotation Y toward x×0.55 radians and rotation X toward −y×0.28 radians with a time-based 85 ms easing constant. Return to a gentle idle head turn when the pointer leaves. Pause rendering when the hero is offscreen or the tab is hidden. Support touch through Pointer Events and honor reduced-motion preference.
- Include a “Shift form” button. It loads a second Meshy model and poster on demand from `https://media.scrollhaus.ai/meshy-collection/v3/petal-operating-alt.glb` and `https://media.scrollhaus.ai/meshy-collection/v3/petal-operating-alt.webp`, with the same gaze interaction. Mainframe has a third `mainframe-companion` variant. Keep the first form immediately visible and do not fetch alternatives until the user asks.
- Release geometries, materials and textures on unmount. Resize with ResizeObserver. During loading or a WebGL failure, retain the sharp poster with a restrained pointer response; replace it with the real rendered model as soon as the first frame is ready. The normal experience must use the actual GLB.

## Complete page

- Full-height hero with name, eyebrow, sequential headline word reveal, brief typewriter intro, primary action, copyable email button, 3D character, cursor hint, and scroll cue.
- Below it: a large brand manifesto, two interactive feature cards, a closing contact section, and footer. Do not stop after the hero.
- Responsive at 1440×900 and 390×844. Keep text and the face uncropped, menu usable, and every action keyboard accessible. All body text meets readable contrast and reduced motion skips decorative animations.
- Create a sharp 16:9 gallery poster and hero-only cursor-interaction recordings for regular, phone, and large previews. A full-page tour is unnecessary: show the head turning both ways. On desktop gallery cards, map horizontal cursor position to the recording pose; on phones, loop the hero demonstration. Never stretch a small thumbnail to full-screen.

## Delivery and validation

Build must run with `npm run build` in a Vite project. Include source modules, not a giant inline HTML paste. Verify the GLB and poster return 200 with correct MIME, the face follows the cursor both left and right, phone/desktop layouts have no horizontal overflow, and the actual build matches the live reference.

## Exact design and copy

- CSS variables: `--bg: #f5bfd1`, `--fg: #53052c`, `--accent: #ff2765`, `--secondary: #d37d9d`. Use DM Sans for body, DM Mono for labels, and the live headline font: Syne.
- Navigation wordmark: “PETAL SYSTEM” with a visible “✿” glyph. Center label: “FASHION & FLORAL FUTURES”. Links: “The story”, “Explore”, “Connect ↗”. On narrow screens replace links with a two-line hamburger and full-screen menu.
- Hero eyebrow: “BLOOM STATE / ACTIVE”. H1: “Beautiful things move.”. Headline letters/words enter with rotating bloom pop in a 0.75-second stagger; do not reuse the exact animation across the collection.
- Intro typewriter: “A living fashion editorial for the endlessly curious.” at 23 ms per character. Show a blinking 2px cursor during the reveal.
- Primary action label: “See what is growing”. Copyable address: “hello@petalsystem.studio”. Switching form changes only the 3D character; it preserves page position and copy.
- The idea heading: “Colour is a form of confidence.”. Body: “We make room for bold colour, unexpected shapes, and personal expression.”. Explore section cards: “COLLECTION / In full bloom” and “STUDIO / The makers”. Closing heading: “Wear the unexpected.”. Keep these as distinct sections below the hero, then a minimal footer.
- Desktop nav is 88px tall. Hero uses a 54%/46% content/model grid, at least 100svh, with 118px top padding and 90px bottom padding. H1 uses a fluid 64–158px size and 0.91 line-height. On phones use a vertical composition, 72px nav, 88px top hero padding, and put the model above readable copy without cutting the face. Cards become a single column below 560px.
- Render a subtle bespoke background motif: floral dot pattern, high-impact uppercase type, petal-shaped cards. Keep full-resolution shapes crisp. The poster is full-resolution transparent WebP, and the normal model is Meshopt-compressed GLB for fast transfer; the two are visually identical at the initial camera angle.

Keep original model colours and neutral poster/video colour; do not add colour boosts.