# Opus 5 designs websites that feel like movies

**Video.** [Opus 5 Designs Websites That Feel Like MOVIES For Just $1](https://www.youtube.com/watch?v=kf3OpxxmC9E) · id `kf3OpxxmC9E` · 16:12 · reviewed 02-08-2026 · author Viktor Oddy

## The process he shows

1. **Pinterest.** Search "<niche> award-winning website" (his example: real estate). Pick one hero design you like.
2. **Higgsfield image chat.** Paste the reference. Ask for a front view, remove the UI clutter (map, assistant widget), put his company name where the logo was. Output: a hero image, not code.
3. **Style transfer.** Paste the hero plus a second mood image (snow and ice). "Make the first image snowy white like the second, but do not add the mountain."
4. **Split the image into two layers, by prompt alone.** (a) "Remove all content and everything above the houses, make it transparent" = foreground cutout. (b) "Remove the houses, keep only the background, 8K" = clean background plate. He compares models: **Nano Banana** gives the cleaner background plate at a fraction of the price. A free online background remover (or Figma's) finishes the cutout.
5. **Figma as sketch board only.** He places a giant word (Google Font **Anton**) BETWEEN the two layers to preview the text-behind-the-scene look. No real design work happens in Figma.
6. **Claude Code (desktop app), model Opus 5**, new folder: build the hero with a chosen font pair (he copies the font CSS from a site he likes) and the flat hero image first. Hero first, rest later.
7. **The parallax.** Upload the two layers (front = transparent PNG, back = JPEG). Prompt: back layer behind, front on top with higher z-index, parallax on scroll; add two or three sections below so scrolling shows it.
8. **Iterate by screenshot.** He mocks the target look in Figma, screenshots it, and sends the screenshot as the change request instead of describing it in words. Claude matches the picture.
9. **Fonts.** Anton is a Google Font: naming it is enough, Claude imports it.
10. **Mobile pass.** On mobile only, move the description under the headline; desktop stays.

## What is genuinely new for us

- **Scenery-split parallax.** ONE reference still, split by the image model itself into a background plate and a foreground cutout, with a giant word sandwiched between, moved by scroll. We hold the person-on-top z-stack (Marcus) and scroll-scrub video; this is the same layer idea applied to scenery, built from a single Pinterest image. A real addition to the grammar shelf.
- **The mock IS the prompt.** We already work mockup-first for our own specs; sending a rough Figma screenshot as the change request, instead of words, is a sharper iteration habit than we have written down.
- **Nano Banana for background plates.** We hold Nano Banana 2 in the AI Studio note; the specific verdict "cleaner and cheaper for background plates" is new detail.

## What we skip and why

- **The "$1 Opus 5" framing and motionsite.io** — sales, not method.
- **ChatGPT images as an alternative image chat** — we already route images through the Higgsfield MCP and Google AI Studio.
- **"The hero is 90% of the site, perfect it first"** — our sitio-cinematico skill already builds hero first.
- **Doing the layer sandwich in Figma** — for him it is only a preview; our previews are HTML.

## Fold-in candidates

1. **Scenery-split parallax** (background plate + foreground cutout + giant word between, from one reference image) → `9 - System/ui-ux/motion/motion-design.md` §3 technique shelf, next to person-on-top.
2. **Send a screenshot of the mocked change as the change request** → sitio-cinematico skill (`~/.claude/skills/sitio-cinematico/`), iteration step.
3. **Nano Banana for clean background plates** (less noise, cheaper) → `9 - System/ui-ux/motion/motion-design.md` §5 making the assets.

## Deserves a full reference page with frames: yes

The technique is visual: reference still → foreground cutout → background plate → the word between the layers → the scroll. Four frames teach it faster than any text, and it is the one new entry for the grammar shelf.