# Entrance recipes from Viktor Oddy — 08-08-2026

What makes a page's first screen move beautifully, mined from the ten Viktor Oddy digests, three reference pages, the motion cookbook and its criteria. Paths below are under `9 - System/ui-ux/motion/` unless stated. [Cookbook](motion-design.md) · [criteria](criteria.md) · [digests](../inspiration/viktoroddy/)

## 1. The entrance recipes, best value first

| # | Recipe | What the visitor sees | Build it with what we own | Cost | Source |
|---|---|---|---|---|---|
| 1 | Video under the hero | A calm scene wakes up: light, smoke, water or a spinning object loops behind the text, forever | One still (Nano Banana, free) → animate with Grok Imagine or Veo, "animate this, no zoom in, no zoom out" → a poster picture shown before the video loads, video faded in under the hero text | ~$0.65 (Grok, fast) to $3.20 (Veo, standard), one clip | [Fable 5 digest](../inspiration/viktoroddy/_JF_s-ZRTyY-fable5-web-design.md) |
| 2 | Reskin a working hero | The same proven page wears a new subject, a new clip and new words, in minutes | Swap the still (old background + new reference picture), swap the clip (old clip + new still, same length in seconds), swap every text keeping the same number of letters | About the same as #1, per new version | [reskin digest](../inspiration/viktoroddy/IeR5ZMKssSc-sonnet5-reskin-3d-sites.md) |
| 3 | Head-turn hero | A face slowly turns to look at the visitor, as if it had noticed them | One portrait → ask for a left-looking and a right-looking still of the same face → give both to Grok or Veo as the start and the end of one clip: "head turns left to right, body stays still" | Stills free, clip ~$0.65-3.20 | [head-turn digest](../inspiration/viktoroddy/9RiV-_MUiCI-head-turn-hero.md) |
| 4 | Scenery-split parallax | Scrolling pulls a background, a giant word and a cut-out subject apart, like looking through layers of glass | One reference still → ask the image model for (a) the background alone, high resolution, no subject, and (b) the subject alone, cut out on a transparent background → a giant word placed between the two layers, scroll moves them at different speeds | Stills free to cheap, plus code time | [parallax digest](../inspiration/viktoroddy/kf3OpxxmC9E-parallax-image-split.md) |
| 5 | Hover reveal, two pictures | Moving the mouse across the hero wipes from one picture to another | One still → ask for the same picture with one thing changed (a texture, a missing object) → the two pictures cross-fade under the cursor | Stills free to cheap, plus code time | [AI Studio reference](reference-viktoroddy-aistudio.md) |
| 6 | Curtain reveal | The page opens like a stage curtain onto a second moving scene | Two clips (the hero clip, and a second one built the same way) → a centred block grows from zero to full width, showing the second clip behind it as it opens | ~$1.30-6.40, two clips | [motion-transfer digest](../inspiration/viktoroddy/bhietcNpXw8-motion-transfer-build.md) |

## 2. The craft rules that separate a good entrance from a cheap one

- **Loop with no seam.** Play the clip's own stored pictures forward, then backward, never asking the video to jump back to its own start — any short clip then feels endless instead of visibly resetting. [GPT Sol digest](../inspiration/viktoroddy/YhF8Qg2GL80-gpt-sol-web-design.md)
- **Style-reference discipline.** One picture (often the most-liked one on a public mood board) anchors every picture made after it; skip this and each new image drifts to its own look, and the page stops feeling like one thing. [Higgsfield tutorial](reference-viktoroddy-tutorial.html)
- **Motion by reference.** The clearest way to ask for a movement is not in words: record 5-10 seconds of a motion you admire on any site, and give both that recording and your own still picture to the video tool: "animate this the same way as the attached video." [motion-transfer digest](../inspiration/viktoroddy/bhietcNpXw8-motion-transfer-build.md), [GPT Sol digest](../inspiration/viktoroddy/YhF8Qg2GL80-gpt-sol-web-design.md)
- **The text-strip trick.** "The same picture, but with no text, buttons or icons" turns any finished screenshot into a clean plate, ready to animate or to build from. [motion-transfer digest](../inspiration/viktoroddy/bhietcNpXw8-motion-transfer-build.md), [two-plate digest](../inspiration/viktoroddy/5ZAsjUoMx1Y-two-plate-build.md)
- **Camera negatives.** Say plainly what the camera must NOT do — "no zoom in, no zoom out, do not change size or position" — or the clip drifts, and a drifting clip cannot sit still behind fixed text. [Fable 5 digest](../inspiration/viktoroddy/_JF_s-ZRTyY-fable5-web-design.md), [GPT Sol digest](../inspiration/viktoroddy/YhF8Qg2GL80-gpt-sol-web-design.md)
- **How the video melts into the page.** Two cheap ways. A CSS blend mode called "exclusion" (a rule that erases matching dark colours where two layers overlap) removes the edges of a black-background video into a dark page — test it on one still frame first, in any image editor. Or blur one frame of the video and paint the page's own background that same average colour. [Grok digest](../inspiration/viktoroddy/kM7cHTf-RAg-grok-scroll-website.md), [Fable 5 digest](../inspiration/viktoroddy/_JF_s-ZRTyY-fable5-web-design.md)

## 3. What we have never built

Every recipe in part 1 lives only in doctrine today. A companion audit of the Studio's own shipped pages, run the same day (`audit-images-and-entrances-08-08-2026.md`), found no live page using a video hero, a head-turn, a parallax split, a reskin, a hover reveal or a curtain — the built examples are a few static photo heroes (`informality.html`, the sez-central-asia brochure) or, worse, hand-coded flat shapes (VoxPopuli's `loop3d` variants). Not one entrance recipe from this stream has shipped yet.

The Studio's own plan ([topics/motion.md](/Users/unctad/Claude/5%20-%20Handovers/topics/motion.md)) queued four of the ten videos for a full reference page with real frames, and none of the four were built:

1. **YhF8Qg2GL80 (the GPT Sol / Codex build).** Would give us the boomerang loop's exact working prompt, word for word — today's digest only paraphrases the three attempts that got it working — plus the frame showing him cycling blend modes in an image editor before asking for the matching CSS.
2. **kf3OpxxmC9E (the parallax split).** Would give us the four frames that teach recipe 4 by sight — reference still, the cut-out, the background plate, the giant word between them — today it is text only.
3. **9RiV-_MUiCI (the head-turn hero).** Would give us the three frames that teach recipe 3 — the left-looking still, the right-looking still, the resulting motion — the trick is visual and text undersells it.
4. **_JF_s-ZRTyY (the Fable 5 build).** Our only decoded record of Fable 5, the model this workspace runs on, building a motion page start to finish; would give us the averaged-colour melt and the pinned-video-with-cards-around-it choreography as frames, not paraphrase.

## 4. The honest gaps

What none of these ten videos teach, that a real government or citizen-facing entrance still needs:

- **A slow connection or an old phone.** Every example assumes fast broadband and a recent phone; none shows what the visitor sees while the video is still loading, or what happens if it never does.
- **The right to use a face.** Every portrait comes from Pinterest, a stock search or an AI model, with no question asked about whether that face may be made to move. Our own public-domain-portrait rule comes from elsewhere in this workspace, not from these videos.
- **Real load time.** "1080p, not 4K, loads faster" is stated once and never measured; none of the ten checks an actual load time or a performance score.
- **A citizen register.** All ten examples are consumer brands, real estate, fashion, a car company — never an official or government page; none says how much motion still reads as trustworthy rather than promotional on a public service.
- **More than one language on the hero.** None shows a long or right-to-left word sitting over a moving background; every example is a short English headline.
- **What to do when the tool is down or the budget is spent.** No fallback path is ever shown — every recipe assumes the paid model answers and returns exactly what was asked.