# Make pages move

**Source file.** Frank's view: [motion-design.html](motion-design.html)

The recipes for animated sites, video, and speakers. Everything here lives under one topic: [motion](/Users/unctad/Claude/5 - Handovers/topics/motion.md). Visual map: [index.html](index.html).

**Where these recipes apply.** Public and venture pages — brochures, landing pages, product sites. Working documents, boards and teaching pages stay light and calm; nothing here overrides them. A page that moves says "alive, modern, cared for" before a single word is read.

---

## Use video, not code

The moving feel is **AI-made video under a calm page**. [motionsites.ai](reference-motionsites-analysis.md), the reference business of the genre, uses no animation code: it plays videos and lays quiet UI over them. "3D animation" on such sites is a video OF a 3D scene, never a 3D program. So every page needs three things, each with its recipes below:

- **the images and videos** — [make them](#make-the-images-and-videos);
- **the layer of quiet UI** — [the page recipes](#the-page-recipes);
- **the speaker**, when a person presents the page — [put one in](#put-a-speaker-in-the-page).

## When things move: load, scroll, always, hover

- **On load, once.** Background fades in (≈1.2 s) → the subject rises with slight scale (≈1.4 s, delay 300 ms) → menus and buttons fade up staggered (0.9 s, delays 500→1500 ms) → an accent line grows from the left. Then everything is still. Exact timing table: [Marcus prompt](reference-marcus-prompt.md).
- **On scroll.** Reveals: hidden blocks slide up 700 ms as they enter the view, staggered ~100 ms per sibling. Scrub: the scroll position drives a background video's timeline — the premium effect, flagship pages only ([NovaAI prompt](reference-novaai-prompt.md)).
- **Always, slowly.** One muted background loop, or a 240 s marquee, or a 6 s color drift on ONE headline word. Slow enough that the eye can ignore it.
- **On hover.** 300 ms color changes, arrows nudging 2 px. Nothing larger.
- **Always:** `prefers-reduced-motion: reduce` turns everything off. Motion is a gift, never a toll.

## The page recipes

Each is proven in a linked source; copy from there, never reinvent.

- **Put a video under the page.** Full-bleed muted looping video + a poster image, a soft dark layer for legibility, and a bottom fade into the page background so the video melts into the document. Nothing ever flashes black: poster first, 300 ms crossfade when the video is ready. ([motionsites analysis](reference-motionsites-analysis.md))
- **Make the page scrub a video as you scroll.** Poster → video → drawing surface; scroll progress drives the frame, smoothed; keep ≤90 pre-cut frames at 960 px. Full spec: [NovaAI prompt](reference-novaai-prompt.md).
- **Put glass over video — the only place glass is allowed.** Panels at 15% white with background blur, thin white borders, one solid white button. On documents glass stays banned. ([NovaAI prompt](reference-novaai-prompt.md))
- **Put the person on top of the letters.** Background, then giant type, then the person's cutout, then the menus. The overlap is what makes her part of the page. ([Marcus prompt](reference-marcus-prompt.md))
- **Reveal, marquee, color drift, type-as-brand.** All four with code in the [motionsites analysis](reference-motionsites-analysis.md).
- **Use frames instead of video on phones.** Convert the scrub video to a strip of JPG frames (e.g. [ezgif](https://ezgif.com/video-to-jpg)) and draw one frame per scroll position. ([award-winning-sites video](reference-yt-award-winning-animated-sites.html))
- **Make a clip loop forever.** Play its stored frames forward then backward (never seek the video's own clock); any 4-second clip becomes endless with no seam. ([GPT Sol digest](../inspiration/viktoroddy/YhF8Qg2GL80-gpt-sol-web-design.md))
- **Melt a video into the page.** Dark page: `mix-blend-mode: exclusion` erases the edges of a black-background video. Any page: blur a frame of the video and use its average color as the page background. Tame a foreign video by desaturating and dimming it; test on one frame first. ([Grok digest](../inspiration/viktoroddy/kM7cHTf-RAg-grok-scroll-website.md), [Fable 5 digest](../inspiration/viktoroddy/_JF_s-ZRTyY-fable5-web-design.md))
- **Make the hero follow the visitor.** Two stills — facing left, facing right — as start and end frames of one generated clip; the subject seems to turn with the reader. ([head-turn digest](../inspiration/viktoroddy/9RiV-_MUiCI-head-turn-hero.md))
- **Split one image into moving layers.** The image model splits ONE still into a background plate and a foreground cutout; a giant word scrolls sandwiched between them. ([parallax digest](../inspiration/viktoroddy/kf3OpxxmC9E-parallax-image-split.md))
- **Open a curtain onto a second video.** A block expands from zero to full width, revealing a second scroll-scrubbed video behind it. ([motion-transfer digest](../inspiration/viktoroddy/bhietcNpXw8-motion-transfer-build.md))

## Put a speaker in the page

A person who presents the page in a real voice. The whole subject has its own page — [People](../people/index.html) — with the two kinds (still · moving), the four sizes (face · half bust · bust · full body), the buttons, and how to order one ("put a speaker on this page"). The recipe: [site-speaker skill](/Users/unctad/.claude/skills/site-speaker/SKILL.md). The production line: [the factory](#the-factory).

A framed rectangular presenter video also works, but the frame says "advertisement"; the cutout says "guide".

## Make the images and videos

- **Free first: [Google AI Studio](https://aistudio.google.com)** (checked 02-08-2026, ~10 requests/min free): **Nano Banana 2** for images — portraits, scene stills, at zero — **Veo 3.1** for video (native sound, vertical, 1080p), **Gemini Omni Flash** for video edited by conversation. Process decoded: [the AI Studio reference](reference-viktoroddy-aistudio.md).
- **Inside Claude: Higgsfield.** The `higgsfield` CLI (signed in) + 7 skills; images and video without leaving the chat. One discipline: ALL images of a page from ONE style reference. ([Higgsfield tutorial](reference-viktoroddy-tutorial.html))
- **Motion by reference (02-08-2026).** The strongest animation prompt is an example, not words: "animate this image the SAME WAY as the attached video, same duration" — the example can be a screen recording of any site you admire. The **text-strip trick** ("the same image without any text") turns any screenshot into a clean background plate. Keep the camera still with explicit negatives (no zoom, no pan). ([motion transfer](../inspiration/viktoroddy/bhietcNpXw8-motion-transfer-build.md), [two-plate build](../inspiration/viktoroddy/5ZAsjUoMx1Y-two-plate-build.md))
- **Prompt libraries.** [motionsites.ai](https://motionsites.ai) (decoded in the references) and [sceneai.art](https://sceneai.art/) sell copy-ready prompts for animated sections, backgrounds and gradients — a legitimate shortcut: buy the prompt, keep our taste rules.
- **Other video engines: [Krea](https://www.krea.ai/)** (checked 31-07-2026): Hailuo 2.3 today (Hailuo 3 announced), API access to Kling, Veo, Seedance; free 100 units/day.
- **A speaker's master clip: Veo 3.1 on our OWN paid Gemini key** (proven 03-08-2026 — image-to-video from her green portrait: 8 s, living eyes, real blinks, ~40 s of waiting). **Price it before running:** $0.10/s fast, $0.40/s standard — an 8 s master is $0.80 fast, $3.20 standard. Default to FAST (the mouth is repainted anyway). It replaces the paid Magic Hour step entirely; script `9 - System/ui-ux/people/assets/make-veo-master.py`, memory [[reference-veo-video-on-gemini-key]]. Two traps: crop the black bars it adds, and name the garment explicitly in the portrait prompt or the clothes get repainted. Magic Hour (~1.20 EUR) is the fallback. **DEFAULT since 05-08-2026 (Frank's verdict): Grok Imagine** (xAI, `grok-imagine-video-1.5`) — A/B'd on Valentina's green portrait and judged **more expressive than the paid clip** — chosen for the face, not the bill: **$0.081/s** (=$0.65 for 8 s) against Magic Hour's ~$0.047/s and Veo fast's $0.10/s. Green kept flat. Quirk: returns square whatever ratio you ask. Recipe + traps: [[reference-grok-imagine-master-clip]]. Veo fast is second, Magic Hour last. Everything after is [the factory](#the-factory). Full engine table: [photo-avatar-video skill](/Users/unctad/.claude/skills/photo-avatar-video/SKILL.md).
- **Voices.** ElevenLabs for hosted and live voices ("Frank pro", "Pilar Durán"); Voicebox on the Mac, free and offline. Routing: [voice-agent skill](/Users/unctad/.claude/skills/voice-agent/SKILL.md).

## The factory

Our production line for the moving speaker's video: one paid master clip per person, then two free programs on a rented graphics computer repaint only the mouth for each new sentence — under a centime a part. Drawn step by step with real frames: [the factory page](../people/factory.html). Command and numbers: [musetalk.md](/Users/unctad/Claude/claude-code-video-toolkit/docs/musetalk.md). Standing rule (check this path before paying per minute): [[reference-rented-gpu]].

## Finish every video the same way — the new pattern

**The standard finish (Frank's verdict, 05-08-2026). Every video we make ends with these three steps, in this order.** The engines that generate a person return small frames — Grok gives 544 px square, the earlier avatar tests 576 px — and that resolution, not the mouth engine, is what makes a face look soft.

| Step | What | Where |
|---|---|---|
| 1 | **Repaint the mouth at native size** (MuseTalk or LatentSync). Never upscale before this: the repainted mouth would end up softer than the face around it. | rented GPU |
| 2 | **Upscale ×4** with Real-ESRGAN — 544 becomes 2176. Lip borders, hair strands, collars and eyes become real again. | this Mac, ~9 s a frame, free |
| 3 | **Add a medium grain**, new on every frame, luma only so the colour and the green stay clean. **Without it the skin is too even and reads as retouched.** | this Mac, seconds |
| 4 | **Then** remove the green. Keying last, on the sharp frames, gives better edges. | this Mac |

The command for steps 2 and 3: [`tools/upscale_video_local.py`](/Users/unctad/Claude/claude-code-video-toolkit/tools/upscale_video_local.py).

**Deliver two sizes.** Grain is expensive to compress: the same clip is 24 MB at 2176 and 0.7 MB at 1088. Keep the big one, put the small one on the page.

**Two explanations that look right and are wrong** (both measured, so nobody re-argues them): the upscaler does **not** shift the skin colour (R−0.6 G+0.4 B−0.7 out of 255), and it does **not** remove micro-texture (it measures higher). What it does is make the skin *even*, and evenness is what reads as retouched. The grain works by breaking that evenness. Full verdict: [criterion 14](criteria.md).

## What keeps it clean

- **Documents stay light.** The dark cinematic canvas is for public and venture pages, chosen per page, never a drift.
- **One hero motion per page.** Scrub OR person-on-top OR ambient video — never two.
- **The page must work frozen.** Print it: it must still say everything (the 5-second test).
- **One style reference per page.** Three styles on one page reads as slop instantly.
- **Write the recreation prompt like a contract.** Exact asset URLs, color and timing tables, a do-not list, acceptance checks — both reference prompts model it.
- **Weight budget.** Posters always; lazy-load below the fold; speaker clips ≤30 s per file.
- **Assets before scenes.** Never generate a scene for a person or place that has no locked asset; build the asset once (master clip, style reference, portrait), store it forever, recombine. The library is the show.

## Where the recipes come from

- [reference-viktoroddy-tutorial.html](reference-viktoroddy-tutorial.html) — Higgsfield inside Claude, the style-reference discipline
- [reference-yt-award-winning-animated-sites.html](reference-yt-award-winning-animated-sites.html) — his full loop: Pinterest → Higgsfield → motionsites.ai → Fable 5
- [reference-viktoroddy-aistudio.md](reference-viktoroddy-aistudio.md) — design the page AS AN IMAGE, then build mode codes it (13 frames)
- [reference-novaai-prompt.md](reference-novaai-prompt.md) — scroll-scrubbed video + glass, verbatim spec
- [reference-marcus-prompt.md](reference-marcus-prompt.md) — person-on-top + entrance timing, verbatim spec
- [reference-motionsites-analysis.md](reference-motionsites-analysis.md) — the reference business, decoded at code level
- [inspiration/viktoroddy/](../inspiration/viktoroddy/) — ten digests, one per reviewed video (02-08-2026)
- [photo-avatar-video skill](/Users/unctad/.claude/skills/photo-avatar-video/SKILL.md) — picture → talking video → cutout