Opus 5 designs websites that feel like movies

Video. Opus 5 Designs Websites That Feel Like MOVIES For Just $1 · id kf3OpxxmC9E · 16:12 · reviewed 02-08-2026 · author Viktor Oddy

The process he shows

Pinterest. Search " award-winning website" (his example: real estate). Pick one hero design you like.
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.
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."
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.
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.
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.
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.
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.
Fonts. Anton is a Google Font: naming it is enough, Claude imports it.
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

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.
Send a screenshot of the mocked change as the change request → sitio-cinematico skill (~/.claude/skills/sitio-cinematico/), iteration step.
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.