# Research: the entrance image, August 2026

Question: what is the fastest reliable way to make a realistic, moving entrance image for a page, and what does "good" look like today. Feeds the gap named in [`audit-images-and-entrances-08-08-2026.md`](audit-images-and-entrances-08-08-2026.md) — no recipe exists yet for the entrance specifically.

## 1. The recommended path, in 5 lines

1. **Lock the scene as a still first.** Generate a photoreal plate with Nano Banana 2 or FLUX.2 on our rented GPU — never ask a video engine to invent the scene AND move it in one shot; the plate is the asset we keep forever.
2. **Animate that exact plate.** Feed it to Grok Imagine or Veo 3.1 Fast as image-to-video, naming what moves and telling the engine what must stay still (clouds drift, hair sways — camera does not pan).
3. **Loop it.** Same start/end frame first; boomerang second; a short crossfade only as a last resort.
4. **Encode small.** AV1/WebM primary, MP4/H.264 fallback, poster JPG shown instantly.
5. **Cost and time.** Roughly $0.50–$1.20 and 10–15 minutes per finished hero on our own keys — cheaper and faster than any per-minute stock-video subscription.

## 2. Engine table (prices verified 08-08-2026)

| Step | Engine | Price | Source |
|---|---|---|---|
| Scene still, cheapest | FLUX.2 on our RunPod GPU | ~$0.013/image (already priced in our toolkit) | `claude-code-video-toolkit/tools/flux2.py` |
| Scene still, fast/easy | Nano Banana 2 (Gemini 3.1 Flash Image) | $0.045 (512px) to $0.151 (4K); ~$0.067 at 1K, batch mode half that | [aifreeapi.com/nano-banana-2-pricing](https://www.aifreeapi.com/en/posts/nano-banana-2-pricing) |
| Scene still, higher quality | Gemini 3 Pro Image (Nano Banana Pro) | $0.134/image at 1K–2K, $0.24 at 4K (batch: $0.067 / $0.12) | [Google Cloud docs](https://docs.cloud.google.com/gemini-enterprise-agent-platform/models/gemini/3-pro-image) |
| Plate → loop, cheapest | Grok Imagine video | $0.05/s standard, $0.08/s the "1.5" model we already use | [docs.x.ai/developers/models/grok-imagine-video](https://docs.x.ai/developers/models/grok-imagine-video) |
| Plate → loop, our other key | Veo 3.1 Fast | $0.10/s (720p), $0.12/s (1080p), $0.30/s (4K) | [ai.google.dev/gemini-api/docs/pricing](https://ai.google.dev/gemini-api/docs/pricing) |
| Plate → loop, top quality | Veo 3.1 Standard | $0.40/s (720p–1080p), $0.60/s (4K) | same, for when Fast looks soft |
| Face/portrait clips (unchanged) | Grok Imagine, our default | $0.081/s = $0.65 for 8 s | already verified, `reference-grok-imagine-master-clip.md` |
| Free image fallback | Higgsfield CLI | free plan, **out of credits on our account today** — not usable until topped up | checked this session |

**8-second finished loop, cheapest stack:** one Nano Banana 2 plate (~$0.07) + Grok Imagine 8 s (~$0.65) ≈ **$0.72**. With FLUX.2 for the plate: **≈$0.66**.

**Trap 1 — camera drift.** Any camera pan or zoom the engine adds by itself breaks the loop seam; say "camera locked, no pan, no zoom" every time.
**Trap 2 — text baked in.** Ask for "the same image, no text" before animating, or captions get warped into moving garbage (matches our own text-strip trick).
**Trap 3 — engine quirks.** Grok Imagine returns square video regardless of the ratio asked; Veo adds black bars that must be cropped. Budget for both.

## 3. What admired sites actually do (checked live, 08-08-2026)

The honest finding: **half of the admired web does not move its entrance at all.**

- **Linear.app** — no video, no moving image. A static dark canvas, a giant headline, a frozen mock of the product UI below the fold. Zero network requests for video. Motion is spent entirely on the product panel, not the entrance.
- **Vercel.com** — a static black abstract shape behind the headline; it does not move. Only the row of client logos scrolls. No video file loads at all.
- **Stripe.com** — the famous flowing color mesh is not a video: it is a live WebGL/canvas animation computed in the browser (`dotGeneration.worker.js`, `waveGeometry.worker.js`). Zero file weight, no loop seam because it is drawn fresh every frame — but it is code, not our AI-video doctrine, and only works because Stripe employs shader engineers.
- **motionsites.ai** (our own reference for "AI video, not code") — even its own hero is a CSS gradient blob, not video. Its example cards mix real moving loops (a motorbike night scene, "Tokyo Nocturne") with plain still photos (a Mostar bridge travel guide, a pastel-sky mindfulness app). Measured the loop files directly: 4–9 MB each as GIF — far too heavy for a live hero, fine only as a small gallery thumbnail.
- **Awwwards Sites of the Day** (grid checked live) — the opposite register: dark canvas, full-bleed editorial photography, oversized serif or mono type laid over the image, one accent color. This is the creative-agency register, and it is the one closest to Frank's venture and presentation pages.

**Reading it straight:** developer-tool SaaS (Linear, Vercel, Stripe) spends its motion budget on the *product*, not the hero — the entrance is often a frozen shape or a code-drawn gradient. Creative/agency/fashion sites are where the cinematic photo-or-video entrance lives. Frank's pages (SCRC, ventures, presentations) belong in the second group, so the AI-video-entrance doctrine is the right one for them — but it is not a universal law of "good websites," and citing Linear or Stripe as proof we need video would be wrong.

Sources: [awwwards.com/websites/sites_of_the_day](https://www.awwwards.com/websites/sites_of_the_day/), sites visited directly.

## 4. Loop craft — how to hide the seam

- **Same start and end frame, first choice.** Some image-to-video engines accept both a start and an end frame; giving them the identical plate for both makes the loop mathematically seamless. Confirmed as a first-class feature only on Luma Dream Machine's "Loop" toggle; Veo 3.1 and Grok Imagine have no such switch as of today, so on our two engines this has to be approximated (generate long, trim to a clean cycle) rather than requested directly. [pixflow.net comparison](https://pixflow.net/blog/best-ai-video-generator/)
- **Boomerang / ping-pong, second choice.** Play the clip forward then reverse (mirror), no seek needed — any clip becomes an infinite loop with no visible cut. Works best on symmetric motion: steam, hair, water, light. Already our house rule in `motion-design.md`.
- **Crossfade, last resort.** Dissolve the last ~10 frames into the first ~10 (under 300–400 ms at 24–30 fps) so the cut is felt, not seen. This is a patch, not a fix — it introduces a soft blur moment; only use it when neither of the above works.
- **Loop length.** 4–10 seconds is the sweet spot: under 4 s the eye catches the repeat, over 15 s the file gets heavy for something nobody watches start to finish. Our factory's 8 s master-clip length is already the right size — reuse it.
- **Verify by watching, not by trusting the export.** Mute it, watch it loop three times on the real page, not the generation tool's preview. The seam only shows up there.

Sources: [thebetterwebmovement.com loop guide](https://thebetterwebmovement.com/how-to-create-a-seamless-video-loop-step-by-step/), [sora21.com boomerang guide](https://www.sora21.com/learn/ai-video-loop-seamless)

## 5. Alternatives to a full video

- **Cinemagraph — one moving element in a still.** Mask a moving detail (steam, a flag, water) over an otherwise frozen frame; cheaper to render, lighter to ship, and often reads as *more* tasteful than full motion because it says "alive" without demanding attention. [flixel cinemagraph guide](https://blog.flixel.com/using-cinemagraphs-to-bring-websites-to-life/)
- **Parallax from one split image.** Already in our cookbook ("Split one image into moving layers"): the image model splits ONE still into background + foreground; on the page, the 2026 way to drive it is the CSS Scroll-Driven Animations API (`animation-timeline: view()`) — zero JavaScript, runs on the GPU compositor thread, keeps scroll buttery. [builder.io parallax 2026](https://www.builder.io/blog/parallax-scrolling-effect)
- **WebM/AV1 vs plain MP4.** WebM (VP9) is 25–35% smaller than MP4 at the same look; AV1 is up to 50% smaller than H.264. 2026 stack: AV1 first (roughly 60% of devices decode it in hardware), WebM/VP9 second, MP4/H.264 as the universal fallback. [sureshot.video format guide](https://sureshot.video/blog/best-video-format-for-web)
- **Poster-first loading.** The poster image shows the instant the page paints; the video crossfades over it once ready. Never a flash of black. Already our house rule.

## 6. The floor — performance and accessibility

- `prefers-reduced-motion: reduce` → freeze on the poster, always. Motion is a gift, never a toll (existing house rule, confirmed still current practice). [CSS-Tricks](https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/)
- **File budget:** ≤4 MB on desktop, ≤2 MB on mobile for a hero loop. [design guidance, 2026](https://mintec.co/blog/video-lcp-hero-performance-2026/)
- **Loading:** `preload="none"` + lazy-load for anything below the fold; only the first-viewport hero gets eager loading. Fixed `aspect-ratio` on the `<video>` tag stops layout shift while it loads. [web.dev lazy loading video](https://web.dev/articles/lazy-loading-video)
- **Mobile fallback:** dropping video for a static poster under a phone breakpoint is a legitimate bandwidth courtesy, not a taste downgrade.
- **Attributes, always:** `muted autoplay loop playsinline` — without `muted` autoplay is blocked on every modern browser.

## The minimum standard for an entrance image

1. Lock the scene as a still plate first (Nano Banana 2 or FLUX.2 on our RunPod GPU); never generate a moving hero straight from text.
2. Animate the locked plate with Grok Imagine or Veo 3.1 Fast, naming exactly what moves and telling the engine what must stay still.
3. Loop by matching first and last frame where the engine allows it, boomerang otherwise; a crossfade only as a last resort, kept under 400 ms.
4. Every loop runs 4 to 10 seconds; verify it live on the page, three plays, before calling it done.
5. Ship AV1/WebM as the primary file with an MP4/H.264 fallback, poster JPG shown instantly, video crossfading in once ready.
6. Keep the finished file under 4 MB on desktop and 2 MB on mobile; fall back to the poster still below a phone breakpoint if it doesn't fit.
7. Honor `prefers-reduced-motion: reduce` by freezing on the poster, always.
8. When the entrance is a supporting element, not the main character, prefer a cinemagraph (one moving detail) or a parallax split-image over a full video — cheaper, lighter, often more tasteful.
9. Reserve the full cinematic AI-video entrance for venture, business and presentation pages; working-tool pages earn their motion from the product itself, not a hero video (see Linear, Vercel, Stripe, section 3).
10. Every hero ships two things: the shipped page file, and the locked source plate/master clip kept in the asset library for reuse — assets before scenes, the library is the show.