A pixel-for-pixel website clone

Rebuild https://oryzo.ai/ pixel for pixel, motion and 3D included, making every asset yourself.

Context you should know: this is going into a video watched by a large audience. Your clone is put on screen next to the real site and next to other frontier models given this identical prompt, at the same viewport.

The comparison is blind. Never put your model name, your company's name, or any mention of which AI made it anywhere in what you build: not in on-screen text, credits, the page title, file names, code comments, or metadata.

**First, read the methodology.** Clone `https://github.com/per-simmons/clone-app-pat-pro-public` and read `SKILL.md` and `references/00-contract.md` before anything else, then each stage reference as you reach it. Follow its workspace layout, artifacts, verification gate and convergence loop. `scripts/assert-styles.mjs` is the gate.

Two overrides, and they win where they conflict with the repo:

- **Do not stop to check in.** You are running unattended. Run the whole pipeline start to finish without asking for approval or asking questions.
- **Use your own browser automation**, headless Playwright or Puppeteer, anywhere the repo says to use the Claude Chrome extension. Computed styles read off the live page through the CSSOM are ground truth. Screenshots and screen recordings are visual reference only, never the gate.

You have two creative tools: **Blender**, driven headless with Python scripts, and an **image generator** you call from the command line. Every raster image in your clone comes from the image generator. Every 3D model comes from Blender or your own code.

**The graphics must be hyper-realistic and match the original exactly. This is judged strictly, side by side.** The cork coaster must read as real cork: grain, pores, edge wear, physically based materials, real lighting, soft shadows, depth of field where the original has it. Every image you generate must match the original's subject, framing, lighting and color so closely that a viewer has to look twice. No cartoon, low-poly, flat or placeholder art, no plastic-looking defaults, no "close enough" substitutes.

Requirements:

1. **Recon the whole page before writing code.** Every section top to bottom at desktop and mobile widths, the loader, every hover, drag and scroll-triggered state, the 3D scenes, the navigation and the footer.

2. **Extract, don't guess.** Pull real computed values off the live page: type scale, exact colors, spacing, radii, borders, grid and container widths, breakpoints, easing curves and durations, font families and weights.

3. **The 3D and the motion are the site.** The WebGL coaster scenes, the scroll-driven sequences, the hover-hand interaction, the chat and magazine moments, the temperature states and every hover must all work and feel like the original.

4. **No lifted assets.** Do not hotlink, download, or trace the original's images, video, 3D files, or fonts. Make the 3D in Blender or code and every image with the image generator. Fonts come from an open CDN with metrics matched as closely as you can. List every substitution in the README.

5. **Rebuild it all.** Every section, every component, every interactive state, at desktop and mobile. A static skin over a site whose identity is 3D and motion is a failed clone.

6. **Prove the match.** Run `assert-styles.mjs` against your extracted tokens and iterate until there are zero failures and the project builds clean. Then compare your clone to the real site at the same viewport, desktop and mobile, section by section, and fix what your eye catches that the assertions missed, until the two are indistinguishable.

7. **Ship it runnable**, with a documented run command and a README covering what you substituted, how you made the 3D and the imagery, and your final assertion results.

8. **Depth over breadth.** If you have to choose, a hero, coaster scene and first three sections that are indistinguishable from the original beat a whole page that is approximately right.