Clone an Awwwards winner, 3D and all

Rebuild https://www.butter.video/ pixel for pixel, including its 3D, 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 three 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** (OpenAI gpt-image) you can call from the command line.

Requirements:

1. **Recon the whole page before writing code.** Every section top to bottom at desktop and mobile widths, every hover and scroll-triggered state, the navigation, the timeline section, the effect tiles, the logo wall, the footer, and all loading and transition motion.

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

3. **Make the 3D yourself.** The hero keychain and its puffy, inflated charms must be real 3D: model them in Blender, export glTF/GLB, and render them live in the page with WebGL, matching the original's composition, lighting, material softness and motion. Use the image generator for textures, decals, and flat artwork, and as a design reference for shapes before you model them. Any other 3D or inflated artwork on the page gets the same treatment.

4. **No lifted assets.** Do not hotlink, download, or trace the original's images, video, 3D files, or fonts. Anything visual you did not generate in code, Blender, or the image generator is a placeholder matched to the original's role, aspect and color. Brand logos in the customer wall become neutral wordmarks set in type. 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. The motion is part of the clone: scroll choreography, hover behavior, the hero's 3D movement, the timeline, the effect tiles. A static skin over a site whose identity is 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, and fix what your eye catches that the assertions missed.

7. **Ship it runnable**, with a documented run command and a README covering what you substituted, how you made the 3D (Blender scripts included in the repo), and your final assertion results.

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

DONE when: the clone passes the style gate with zero failures, runs from a documented command, its 3D hero is real Blender geometry rendering live in WebGL, and it holds up next to the real site at full screen.