The New GPT 5.6 Sol is Insane upgrade for web designers!

Video. youtube.com/watch?v=YhF8Qg2GL80 · id YhF8Qg2GL80 · 21:23 · reviewed 02-08-2026.

In one line. His fullest end-to-end run — inspiration to designed image to animated video to built site — and the builder is Codex, our own tool; it also lands one real new technique, the boomerang video loop.

The process he shows

Collect three references, not one. Pinterest (he prefers it: concepts, not shipped sites), plus seesaw.website (a gallery of motion/animated sites) and Land-book. He screenshots: (a) a hero layout he likes, (b) one element from another design (a circle chain) to swap in, (c) a third design only for its colors (cream — he avoids the AI-purple cliché).
Brief the image model like a junior designer. In ChatGPT images or Higgsfield, all three screenshots go in with a task-description prompt: "take the first image as reference, redesign it to be about a web design agency; instead of flowers add those circles; take the colors from the third screen; change the logo to motionsites.ai." He runs a few variants and picks one.
Split the design from its background. From the chosen design image: "create me an image like this in 8K. Remove the text, buttons, any logos. Same background, same position, no zoom in or out." The text layer will be HTML; only the background gets animated.
Animate with Seedance 2.0. Simplest prompt: "animate this image", 16:9, 10 seconds, 1080p, "do not zoom in or zoom out". Second route: motion by reference — screen-record any animation whose smoothness he likes, upload it with the image: "animate the first image the same way as the video attached; the motion should feel the same."
Build with Codex (GPT 5.6 Sol, medium; ultra for the last page). New project from scratch in Codex.
Clean the reference before sending. In Figma he hides the circle elements from the design image first: "keep the reference as minimal as possible, so the AI doesn't spend its mental energy understanding them."
Name the font and the color; never let the model choose. "AI is not very good at fonts — it uses the fonts it was programmed with." He takes a font spec from a motionsites prompt (Geist, loaded from Google Fonts) and eyedrops the accent hex in Figma. Build prompt: "build out this hero section only, do not build the rest. Keep the background pure black. Use this color as accent and this font."
Video in, no overlay. "Place this video as the background of the hero. Please do not add any overlay" — coding models add a dark veil by default, thinking the text needs it.
One-shot the rest. "Build the rest of the landing page, four to five sections: features, testimonials, portfolio cards, and sections you come up with." He is surprised by the layout quality unprompted.
Video inside a card, melted by blend mode. The Seedance video goes into one capability card as background, "increase the size so it is not cropped", and its mismatched black is hidden with blending mode "exclusion" — he cycles blend modes on a frame in Figma first to pick the right one (same move as his Grok video).
The boomerang loop — three attempts. Goal: the video plays forward, then plays backward, endlessly, with no cut. Attempt one, seeking the video's time position: lags. Attempt two, "when the video ends, hide the video element and a canvas takes over; a render loop steps an index forward through frames, then reverses": still lags in his run. Attempt three works: a "boomerang playback logic" prompt whose critical, non-obvious line is do not seek video.currentTime — on mount, play the video and drive the reverse from captured frames. Once it works on the card he applies the same logic to the hero.
Last page in ultra mode, then mobile pass. "Build the about-us page, five to six sections, no other pages." Checks every page at phone width.

What is genuinely new for us

The boomerang loop. Play forward, reverse from a canvas frame buffer, never seek video.currentTime. Our doctrine has ambient loops and the frame-sequence scrub; the seamless forward-backward loop is a new member of that family — it makes any short generated clip feel endless and calm instead of cutting back to frame one.
Motion by reference. Screen-record any animation with the smoothness you want, hand it to the video model with the still: "same motion feel." Our AI Studio reference holds video RESKIN by reference; this is the inverse — new image, borrowed motion. One line of prompt, big control.
"Do not add any overlay." The build model veils background videos by default; when the design does not need a scrim, say so explicitly. Small standing line for build prompts.
Reference hygiene. Strip everything from the reference image that the builder should not reason about, before sending. One minute in any editor, visibly better builds.
Fonts and colors are always stated, never left to the model. We hold type-as-brand; his blunt version — the model falls back to its trained fonts and it reads as AI — is worth keeping as a rule of the build prompt.
seesaw.website — a motion-site gallery missing from our galleries list.

What we skip and why

GPT 5.6 Sol as a model verdict. It is a model test; but note the builder is Codex — the workflow itself is literally ours, no translation needed.
The design-as-image-first pipeline. Steps 2–4 (design an image, strip text, animate the background) are already decoded in reference-viktoroddy-aistudio.md and the sitio-cinematico skill (text never in the image).
The blend-mode exclusion melt. Captured in the Grok digest (kM7cHTf-RAg) with its fold-in.
motionsites.ai prompts. His shop; our grammar already covers what the prompts sell (reference-motionsites-analysis.md).

Fold-in candidates

Boomerang video loop — one bullet on the technique shelf: seamless forward-reverse loop via canvas frame buffer, never seek video.currentTime → motion-design.md §3, next to the frame-sequence bullet.
Motion by reference — one line in the asset section: give the video model a screen-recording of the motion feel you want along with the still → motion-design.md §5.
Build-prompt hygiene trio — state font + accent hex, say "no overlay" when no scrim is wanted, strip extras from the reference image → sitio-cinematico skill build phase.
seesaw.website row — add "Motion/animated websites | seesaw.website" to the galleries table → references.md §Design galleries.

Deserves a full reference page with frames

Yes. Three reasons: it is the complete loop on OUR stack (Codex builds it end to end); the boomerang technique needs its exact prompt text recovered from frames (the transcript only paraphrases the three attempts); and the blend-mode cycling in Figma is shown on screen, worth two captured frames. One page with the working boomerang prompt verbatim would make the technique copy-ready.