Generate the target
Use GPT Image 2 to create a single strong visual reference. This sets taste, palette, composition, and the unforgettable object.
v15/v16 prototype · one image to site
One static image. One cinematic website.
The viral AI website demos leave out the actual recipe: art direction, stable assets, scroll scenes, masking, timing, fidelity, and mobile polish.
scroll
The hidden recipe
Not “Claude + one prompt.” It’s a controlled production line.
Preserve the magic
Don’t rebuild every detail. Use the AI image as a hero plate, then extract/crop layers only where movement adds depth.
Give Codex constraints
Local file paths, exact layout rules, typography, CTA hierarchy, and “do not invent random purple SaaS garbage.”
Motion pass
Build the premium feel with pinned scroll scenes, mask reveals, parallax separation, scale changes, and one clean easing system.
Fidelity pass
Compare screenshot to reference. Fix crop, spacing, type scale, shadows, rhythm, and mobile before calling it “done.”
Pinned scroll scene
The image becomes the world.
Scroll expands the plate, isolates the focal area, then reveals the offer layer on top. That’s the part most demos skip.
Reusable system
The prompt stack Luke can teach.
Hero reference prompt
Creates one cinematic 16:9 target image with a buildable visual plate.
Creates one cinematic 16:9 target image with a buildable visual plate.
Codex shell prompt
Builds the actual site around stable local assets and strict style rules.
Builds the actual site around stable local assets and strict style rules.
Motion prompt
Adds pinned scroll, parallax, masks, reveal timing, and easing.
Adds pinned scroll, parallax, masks, reveal timing, and easing.
Fidelity prompt
Forces a screenshot comparison and fixes the bits that make AI sites feel cheap.
Forces a screenshot comparison and fixes the bits that make AI sites feel cheap.
Build a cinematic landing page from this AI hero reference. Assets: - Reference image: assets/motion-atlas-reference.png Rules: 1. Use the reference as the visual source of truth. 2. Preserve the image magic as a major hero plate. 3. Recreate nav, headline, CTA, cards, and layout in code. 4. Add a pinned scroll scene where the image expands, masks, and reveals an offer panel. 5. Use refined editorial typography, warm paper background, black/white, and #BBDCEF accent. 6. No generic SaaS gradients. No clutter. No fake complexity. 7. Mobile must stack cleanly and keep the hero visual visible. Motion pass: - Hero layers drift subtly with cursor. - On scroll: hero plate scales, mask window opens, copy card fades up. - Use one easing language. Premium, not bouncy. Fidelity pass: Compare against the original visual direction and fix spacing, crops, shadows, type scale, and CTA hierarchy.
Video packaging
I turned one AI image into a cinematic website.
Cold open with the result. Then reveal the real workflow. The win is not “AI made a site.” The win is giving people a repeatable system for making AI sites feel expensive.
Thumbnail
1 IMAGE → WEBSITE
1 IMAGE → WEBSITE
Public value
Starter prompt + workflow overview
Starter prompt + workflow overview
Skool value
Full prompts, assets, motion/fidelity checklist
Full prompts, assets, motion/fidelity checklist