# Build This Scroll Website with NEW Grok 4.5

**Video.** [youtube.com/watch?v=kM7cHTf-RAg](https://www.youtube.com/watch?v=kM7cHTf-RAg) · id `kM7cHTf-RAg` · 12:42 · reviewed 02-08-2026.

**In one line.** A Grok 4.5 test inside Cursor; the keeper is the blend-mode trick that melts a black-background video into a black page — plus a handful of taste corrections he applies that match our anti-slop rules.

## The process he shows

1. **Start bare in Cursor with Grok 4.5 (high fast).** First prompt: "build a website for a fictional AI-driven car company, four to five sections, keep the background pure black, I'll add images later — don't worry about them." Content first, assets later.
2. **Restyle with a transplant prompt.** He copies a design prompt from motionsites.ai (his prompt shop) and says: "I will send you a prompt for an unrelated website. Do not implement it. Keep our structure, name, copy, sections. Just apply the new design." Same style-transplant move as his Kimi video.
3. **Melt a video into the page with blending mode "exclusion".** He drops a stock motionsites video into the hero: "add this video as the background… and apply to it blending mode of exclusion." The video's own black is not the page's black; the CSS blend mode makes it disappear into the page. He proves it in Figma first: paste a frame of the video over the page background, cycle blend modes, see that exclusion blends naturally — then asks the coding model for the same CSS property.
4. **Edit by screenshot-pointing.** Every layout fix is a screenshot of the section plus a plain sentence: "remove the stroke around this section", "center align this text", "move this text inside the image".
5. **Full-bleed with gradient fades.** "Make it take the full width of the page, no paddings… from the bottom and from the top add a gradient from our background color to transparent" — the seamless bleed we already hold as the bottom-fade rule.
6. **Tame a second video.** Saturation zero, opacity 70 percent, blending mode exclusion — a foreign-colored video forced into the page's palette.
7. **Taste corrections, by hand.** Two videos side by side are distracting: move one section down, delete the near-duplicate section. "AI models like to add strokes and borders — not a great design practice": remove them. Stat numbers stealing attention from the headline: shrink them 20 percent, "the main thing in web design is hierarchy."
8. **Fill empty cards.** On an image card he adds two big numbers (headline-size) with four-to-five-word captions, and a white logo made in Figma, top-aligned.
9. **Scale to remaining pages in max mode.** "In the navbar there are two links, model and experience. Build those pages with the same font styles and design direction we already established, four to six sections each." Then a quick mobile check by narrowing the window.

## What is genuinely new for us

- **`mix-blend-mode: exclusion` to melt video into the page.** Our doctrine melts video with a scrim plus a bottom gradient fade; the blend mode is a second, different tool — it makes a video's mismatched black background vanish into a pure-black page with one CSS property. Real technique, model-independent.
- **Test the blend mode in Figma before prompting.** Paste a video frame over the page color, cycle blend modes, name the winner in the prompt. Cheap certainty instead of prompt roulette. (Any layer editor works; Figma is his habit.)
- **Desaturate + dim to force a foreign video into the palette** (saturation 0, opacity ~70 percent, blend exclusion). A one-line recipe for using a video whose colors do not match.
- **His stroke rule said plainly.** "AI models like to add strokes/borders" — matches our anti-slop rules; his fix (ask for their removal in the same breath as any new section) is a good reflex.

## What we skip and why

- **Grok 4.5 and Cursor.** Model-and-editor test; our stack is Claude and Codex, and every prompt shown works there.
- **Copying assets from other companies' sites** (he lifts an xAI background "just for the concept"). Fine for his demo, never for our public pages — we generate our own assets in one style.
- **The transplant prompt and scale-by-established-style.** Already captured in the Kimi digest ([sUeTik8Sf4o](sUeTik8Sf4o-kimi-k3-web-designs.md)); no need to hold it twice.
- **Bottom/top gradient bleed.** Already doctrine ([motion-design.md](../../motion/motion-design.md) §3, video under the page).

## Fold-in candidates

- **Blend-mode exclusion melt** — one bullet on the technique shelf: melt a black-background video into a dark page with `mix-blend-mode: exclusion`; test the mode on a frame in a layer editor first → [motion-design.md](../../motion/motion-design.md) §3.
- **Foreign-video taming recipe** — saturation 0 + opacity ~70 percent + blend mode, one line under the same bullet → [motion-design.md](../../motion/motion-design.md) §3.

## Deserves a full reference page with frames

**No.** One technique carries the video, and it is one CSS property plus one Figma habit — the digest and the §3 fold-in hold it fully. The rest repeats moves we already decoded.