# Fable 5 + Claude Code Builds Award-Winning Websites on Autopilot

**Video.** [Viktor Oddy on YouTube](https://www.youtube.com/watch?v=bhietcNpXw8) · id `bhietcNpXw8` · 13:32 · reviewed 02-08-2026.
**Not a duplicate.** Distinct from the decoded [Higgsfield MCP tutorial](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-viktoroddy-tutorial.html) (4:26, MCP setup + Pinterest style pin) and from the [award-winning loop](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-yt-award-winning-animated-sites.html) (14:35, full loop + selling on X). This one is a start-to-finish build of one animated landing page, with motion transfer as the spine.

## The process he shows

1. **Pick a reference site.** He takes a finished animated site (one he built earlier with Fable 5) and screenshots its hero at full width.
2. **Restyle the hero image with GPT Image 2.** He pastes the screenshot plus a portrait found on Pinterest: "create an image like this, but instead of the girl make it a man". Then a second pass: "same image but without any text, icons or buttons" — this strips the UI out of the screenshot and leaves a clean background plate.
3. **Motion transfer in Higgsfield.** He downloads the reference site's hero video, then prompts Higgsfield (Seedance 2): "animate the image the same way as the video attached — the motion should be the same", attaching the reference video and his new image, and matching the duration (5 seconds, 1080p 16:9). The original site's motion now plays with his subject.
4. **Open Claude.** Claude desktop app, Code tab, new session in an empty folder.
5. **Tailor a library prompt before using it.** He copies a hero prompt from his motionsize.ai library, has Claude (Sonnet) edit it first ("remove the image reveal interaction, keep the fonts, pure white background"), then pastes the tailored prompt with Fable 5 selected. A working hero comes back, checked on mobile.
6. **Local font drop.** He drags a Helvetica Neue folder into the project and says "change the font to the one in the folder".
7. **Wire the scrub.** "Make the hero 500vh" (distance for the video scrubbing), plus a "video seeking guard" snippet he pastes as a screenshot so the scrubbed video plays without lag in every browser; then the video URL.
8. **Fix by pointing.** The hands overlap the text, so he selects the content in the preview and says "move the content to the bottom of the hero section".
9. **Second section in plain words with pixel numbers.** A full-height horizontal grid of product cards (about 33vh wide, 280px image, 18px name, 16px price), then he pastes a prepared product list (name, price, image link).
10. **Second video, same recipe.** Copy the first frame of the reference site's second video, restyle it in GPT Image 2 ("make the hand male"), animate it in Higgsfield with the same motion-transfer prompt, same duration (4 seconds).
11. **Curtain reveal.** "After the horizontal scroll completes, expand a centered block from zero width to 100% in sync left and right, and reveal a scrubbed video underneath" — same seeking guard. Done: no Figma, every asset made by AI.

## What is genuinely new for us

- **The motion-transfer recipe.** Copy a video frame → restyle the frame (swap subject, strip text) → "animate the same way as the attached video, same motion, same duration". Any admired site's hero motion becomes reusable with our own subject. Our [award-winning loop reference](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-yt-award-winning-animated-sites.html) mentions copying a reference video in passing; here it is the whole operational spine, twice, with exact prompts and the duration-matching rule.
- **The text-strip trick.** "Create the same image but without any text, icons or buttons" turns a full website screenshot into a clean background asset. Simple, and we did not hold it.
- **The curtain reveal.** A centered block expanding from zero to full width after a horizontal scroll, revealing a second scrubbed video. A named transition our technique shelf in the [motion doctrine](/Users/unctad/Claude/9 - System/ui-ux/motion/motion-design.md) does not have.
- **Point-and-fix.** Selecting the broken element in the preview and giving a one-line order ("move the content to the bottom") instead of describing it. A small habit worth keeping.

## What we skip and why

- **motionsize.ai paid prompt library.** We already decoded the library idea in the [motionsites analysis](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-motionsites-analysis.md), and our recreation prompts are our own contract form.
- **GPT Image 2 as the image tool.** Our doctrine routes images through Google AI Studio (Nano Banana 2, free tier) or Higgsfield MCP; the GPU rule says check the free path first.
- **500vh hero + seeking guard.** Same problem our [NovaAI prompt](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-novaai-prompt.md) already solves with the 80vh spacer, lerp 0.12 and the frame cache; his guard is a variant, not a gain.
- **Claude desktop setup.** Held since the first tutorial.

## Fold-in candidates

1. **Motion-transfer recipe** — one bullet in [motion-design.md](/Users/unctad/Claude/9 - System/ui-ux/motion/motion-design.md) §5 Making the assets: frame copy → restyle → "animate same as attached video", match durations, with a link here.
2. **Text-strip trick** — one line inside that same §5 bullet: screenshot → "same image without any text" gives a clean plate.
3. **Curtain reveal** — one line on the technique shelf, [motion-design.md](/Users/unctad/Claude/9 - System/ui-ux/motion/motion-design.md) §3: block expands zero to full width after a scroll section, revealing a scrubbed video, with a link here.

## Deserves a full reference page with frames: no

The build loop is already shown frame by frame in the two existing Viktor Oddy pages; a third framed page would mostly repeat them. The unique payload here is three short recipes (motion transfer, text strip, curtain reveal), and they fit as doctrine lines linking back to this digest.