Entrance
On load. One choreographed sequence, then still: background fades, the subject rises with a little scale, chrome staggers in, an accent line grows from the left.
Delay table: Marcus prompt
31-07-2026
Motion
Animated sites, video, and people in the page.
A person on the page, no frame. She stands over the letters, part of the design. What we want for Valentina. Recipe · Valentina plan
Simple text over a moving video. The video is made by AI; scrolling moves it. The page itself stays plain. Recipe · How it was built, step by step
motionsites.ai, the model to copy. A shop of ready prompts for pages like these. We took their methods apart. What we learned
To build a page like these: take a recipe from the index below. To make a person speak on a page: the photo-avatar-video skill. The full rules: motion-design.html.
Everything in this section
Every document of this capability, one line each. This is the one home; every document links back here.
| Document | What it is |
|---|---|
| The recipes | |
| motion-design.html | The rules: the four motion moments, the people ladder, the taste rules, how assets get made. |
| criteria.html | Frank's verdicts on this section, each with the why. 5 criteria so far |
| References | |
| reference-viktoroddy-tutorial.html | Higgsfield MCP plus Claude, a tutorial summarized with thumbnails. |
| reference-yt-award-winning-animated-sites.html | The same author's full loop, from a mood board to a shipped site. |
| reference-viktoroddy-aistudio.html | The same author's Google AI Studio process, the design made as a picture before any code. |
| reference-novaai-prompt.html | Scroll-scrubbed video plus the glass system, a verbatim build spec. |
| reference-marcus-prompt.html | Person-on-top layering and entrance timing, a verbatim build spec. |
| reference-motionsites-analysis.html | The reference business, taken apart down to its code. |
| People in pages | |
| photo-avatar-video skill | The method: one photo becomes a talking bust on a page. |
| bust-sizes.html | The five possible sizes, shown on Frank's own face. |
| busto-proposal.md | Turning Valentina into a talking bust, the proposal. proposed |
| Valentina, live | The first built bust, on the real page. built, live |
| The factory | |
| musetalk.md | Our own production line for bust videos, 2 to 5 centimes a minute. |
| musetalk-worker | Its engine code. private repo |
| Continuity | |
| topics/motion.md | The topic file, where this work resumes. |
The four motion moments
Every motion belongs to exactly one moment. A page uses few of each, restraint is the difference between cinematic and slop. Always: prefers-reduced-motion: reduce collapses everything to about 0ms. Motion is a gift, never a toll.
Scroll
As the reader moves. Reveals fade up on threshold, staggered per sibling; scroll-scrub drives a background video's timeline from scroll position. Premium, flagship pages only.
Full method: NovaAI prompt
Ambient
Always, slowly. A muted background loop, a slow marquee, a gradient drift on one headline word. Slow enough that the eye can ignore it if it wants to.
Grammar: motionsites analysis
Hover
On touch. Colour transitions of about 300ms, chevrons nudging a couple of pixels. Nothing larger than that.
Recipe: motion-design.html §2
People in the page
Three levels, each melting the person further into the design. Higher on the ladder is not always the right choice, it is the more capable one.
Built, live
Photo chip
A circular photo with a pulsing voice aura. Cheap, calm, proven: Valentina on azfa.eregistrations.dev, the OBFC copilot on businessregistrations.gov.ls, Grace's presenter bubble in Lesotho.
A
Grammar ready
Cutout on top
A transparent PNG of the person layered above the page's own typography. The person overlapping the letters is what makes them part of the page, not a photo in a frame. Z-stack: Marcus prompt.
Added 31-07-2026
Talking bust
A lip-synced video of the person, transparent background, borderless, speaking the page's own narration. Pipeline: photo-avatar-video skill. First application: the Valentina bust proposal.
The framed alternative, a rectangular presenter video as in the Lesotho hero, is level 0: it works, but the frame says "advertisement" while the melt says "guide".
Taste rules
What keeps it ours, not slop.
- Light stays default. The dark cinematic canvas is a register for public and venture motion pages; adopting it is a per-page decision, never a drift into every document.
- One hero motion per page. Scroll-scrub, or person-on-top, or ambient video, never two on the same page.
- Motion never carries information alone. The page must still pass the 5-second cover-the-text test frozen, as if printed.
- Unity of style. Every AI asset on a page comes from one style reference; a page with three styles reads as slop instantly.
- The recreation-prompt form is the contract. Exact asset URLs, token tables, delay tables, a do-not list, acceptance criteria, the same discipline as our BPA-faithful mockups.
- Weight budget. Poster images always, metadata preloaded, lazy-load below the fold, alpha busts capped at 30 seconds per file.