Muse Wonder: No-Hype Full Review & Testing

Rebuild https://heronaiapp.com/ pixel for pixel, motion and all, 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** 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, the loading sequence, every hover, drag and scroll-triggered state, 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 interactions are the site.** The boot-sequence loader with its counter and coordinate readout, the click-and-drag reveal over the building sketch with its code-violation callouts, the scroll-pinned sections, the smooth scroll and every hover state 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 artwork yourself, the architectural sketch included, with code, Blender or the image generator. Partner logos 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. 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 artwork, and your final assertion results.

8. **Depth over breadth.** If you have to choose, a loader, 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 loader and drag-to-reveal interaction work like the original's, and it holds up next to the real site at full screen.

Launch Background Agent, Clanker Coffee's cold brew concentrate, with a full ad campaign you research, write, design and produce entirely in code.

Context you should know: this is going into a video watched by a large audience. Your campaign is put on screen next to three other frontier models given this identical prompt.

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, video frames, file names, code comments, or metadata.

Clanker Coffee Co. is a specialty roaster in Chicago. Everything the company owns is in `./clanker-kit/`: the brand book, logos, labels, product photography (`product-photos/05-background-agent.png` is the bottle), fonts, colors, and `PRODUCTS.md`. Background Agent is a 32 fl oz cold brew concentrate, $18.

Deliver all of this:

1. **Research** (`research/ads.md`). Use the `adlib` command to pull real, currently running ads from Meta's Ad Library for coffee, cold brew and beverage brands, and look at what the strongest ones do: hooks, formats, offers, visual patterns. Cite every ad you draw on by brand and ad ID. End with the five patterns you will steal and why.

2. **The campaign** (`campaign/brief.md`). One audience, one big idea, the message, the offer, and the copy for every ad and video below.

3. **Static ads, built in code.** At least eight finished ads across feed (1080x1080), portrait (1080x1350) and story (1080x1920) sizes, built with HTML, SVG or canvas and exported to PNG in `ads/`.

4. **The launch video.** A 30 to 60 second launch film at 1920x1080 with sound, rendered to `video/launch.mp4`.

5. **The vertical cut.** The launch film re-edited for 1080x1920, not just cropped, rendered to `video/launch-vertical.mp4`.

6. **Short-form videos.** Three more vertical videos, 15 to 30 seconds each, each built on a different hook from your research, rendered to `video/short-1.mp4`, `video/short-2.mp4`, `video/short-3.mp4`.

7. **A gallery page** (`index.html`) that shows the whole campaign: the research summary, the brief, every ad and every video, playable.

Rules: every frame and every ad is rendered by code you write yourself (canvas, SVG, WebGL, Blender scripts, Python, anything you write), and every video is exported straight to MP4 with ffmpeg. Do not use HyperFrames, Remotion, Motion Canvas or any other video framework or template tool. No stock footage and no AI video generators. You may use the kit's images and the image generator for still imagery. Stay on brand. Watch every video you render and fix what is wrong before you finish.

DONE when: all seven deliverables exist, every video plays with sound at its stated size and length, every ad is exported at its stated size, and the gallery page shows all of it.

Build the Clanker Coffee iPhone app, modelled on the Philz Coffee app, as a native SwiftUI app that runs in the iOS simulator.

Context you should know: this is going into a video watched by a large audience. Your app is put on screen next to three other frontier models given this identical prompt.

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 the app's screens, the app name, bundle identifier, file names, code comments, or metadata.

Clanker Coffee Co. is a specialty roaster with a cafe at its roastery in Chicago's West Loop. Everything the company owns is in `./clanker-kit/`: the brand book, logos, labels, product photography, fonts, colors, and `PRODUCTS.md`. Study how the Philz Coffee app works, then build Clanker's version of it.

The app must have:

1. **Order ahead** from the West Loop cafe: a drink menu built on Clanker's blends, a drink page where you customize size, sweetness, creaminess, milk and hot or iced the way Philz does, a cart, a pickup time, and checkout with a mock payment sheet.
2. **Rewards**: a points card that fills as you order, a scannable code, and a reward you can redeem.
3. **Order tracking and history**: the live status of the current order, and past orders you can reorder in one tap.
4. **The bag shop**: buy any blend in its sizes, and manage an Autopilot subscription (pick the blend, choose every 2 or 4 weeks, skip or pause).
5. **Account**: profile, saved favorites, payment methods (mock).

Requirements:

- Native SwiftUI, a real Xcode project that builds with `xcodebuild` with zero errors. All data is local mock data; no real network calls or payments.
- On brand: the kit's colors, type, logos and product photography, with Sterling where it fits. It should feel like a real, polished coffee app, not a template.
- Install and run it in the simulator you were given, and use it: tap through every flow and fix what breaks.
- Save screenshots of every main screen to `screenshots/`, and record a 60 to 90 second walkthrough of a full order, from opening the app to the reward being added, to `walkthrough.mp4` with `xcrun simctl io <udid> recordVideo`.
- A README with the build and run commands.

DONE when: the app builds clean, runs in the simulator, every flow above works end to end, and the screenshots and the walkthrough recording exist.

Build a real-time 3D simulation of a Starship launch and booster tower catch that runs in the browser.

Context you should know: this is going into a video watched by a large audience. Your simulation is put on screen next to three other frontier models given this identical prompt.

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.

The full mission, start to finish, in one continuous run:

1. **On the pad.** The full stack, Super Heavy booster with Starship on top, on the orbital launch mount beside the launch tower with its two catch arms, at a coastal launch site at dawn.
2. **Liftoff.** All 33 engines light in sequence, with a believable plume, shock diamonds, a dust and steam cloud, the vehicle clearing the tower, and a camera shake and sound that sell the power.
3. **Ascent and hot staging.** Climb through max Q, then hot staging: the ship's engines light while still attached, the stages separate, and the ship flies on out of frame.
4. **Boostback and return.** The booster flips, fires its boostback burn, and falls back toward the launch site with its grid fins steering.
5. **The catch.** The landing burn lights, the booster slows to a hover beside the tower, and the arms close and catch it.

Requirements:

- Real 3D, rendered live with WebGL or WebGPU. Model the vehicles, the tower with its arms and the launch site yourself, in code or in Blender, with materials that read as stainless steel, concrete and steel lattice.
- Motion that obeys physics. Thrust, gravity, drag and attitude drive the vehicles, scaled in time if you need to so the whole mission plays in a few minutes, and the catch has to be earned by the booster's guidance, not snapped into place.
- A live telemetry readout: mission clock, altitude, speed, and the current phase of flight.
- Cameras the viewer can switch between: a wide pad shot, a tracking chase camera, a camera on the tower, and a free orbit camera.
- Time controls: play, pause, speed up, and an instant slow-motion replay of the catch.
- Sound for the engines, staging and the catch, generated in code or synthesized.
- It must run smoothly in a desktop browser, start with a single click, and look like a film shot, not a tech demo.

QA your own work: play the whole mission through, look at every phase from every camera, and fix what looks wrong.

DONE when: the full mission plays from pad to catch in one run, the booster is caught by the arms through its own guidance, every camera and time control works, and it runs in the browser from a documented command.