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

**Video.** [youtube.com/watch?v=YhF8Qg2GL80](https://www.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

1. **Collect three references, not one.** Pinterest (he prefers it: concepts, not shipped sites), plus [seesaw.website](https://www.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é).
2. **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.
3. **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.
4. **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."
5. **Build with Codex (GPT 5.6 Sol, medium; ultra for the last page).** New project from scratch in Codex.
6. **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."
7. **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."
8. **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.
9. **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.
10. **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).
11. **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.
12. **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](../../motion/reference-viktoroddy-aistudio.md) and the [sitio-cinematico skill](/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md) (text never in the image).
- **The blend-mode exclusion melt.** Captured in the Grok digest ([kM7cHTf-RAg](kM7cHTf-RAg-grok-scroll-website.md)) with its fold-in.
- **motionsites.ai prompts.** His shop; our grammar already covers what the prompts sell ([reference-motionsites-analysis.md](../../motion/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](../../motion/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](../../motion/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](/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md) build phase.
- **seesaw.website row** — add "Motion/animated websites | seesaw.website" to the galleries table → [references.md](../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.