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 · criteria · digests

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
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
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
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
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
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

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
• 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
• 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, GPT Sol digest
• 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, two-plate digest
• 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, GPT Sol digest
• 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, Fable 5 digest

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) 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.