# Claude Fable 5 Just Changed Web Design Forever!

[youtube.com/watch?v=_JF_s-ZRTyY](https://www.youtube.com/watch?v=_JF_s-ZRTyY) · id `_JF_s-ZRTyY` · 16:47 · reviewed 02-08-2026

## The process he shows

1. **Pinterest.** Find one image with the look he wants (a 3D globe).
2. **Higgsfield image.** "Create an image like this, but place the globe near the bottom and leave a lot of empty space" — 16:9. The subject sits low so the UI has room.
3. **Seedance 2 video.** Turn the image into a 10 second 1080p video: "make the planet spin, do not change size or position, do not zoom in or zoom out." A still camera, only the subject moves.
4. **Claude desktop, model Fable 5.** He does not start from zero: he pastes one of his own motionsites.ai prompts, strips the interactions, and asks for the **hero section only**, pure black background.
5. **Drop the video in.** "Add this video as the background of the hero. No overlay." Recolor orange to purple.
6. **Next section by prompt.** The video stays pinned while the page scrolls, the hero text fades, and cards appear around the video — two left, two right, in the layout already set.
7. **Curate.** He drops a section too similar to another, then asks: "build 4 to 5 more sections in the style already established — same fonts, background, sizes — hide the video after section two; you can be a little creative." He says this style-locked extension is what keeps Fable away from stock AI layouts.
8. **Color-match the page to the video.** Screenshot a video frame, blur it in Figma, pick the averaged color, set it as the background of ALL sections. The video melts into the page.
9. **Footer video.** Second Pinterest image, animated with **Kling 3.0** ("rotate the Earth slowly, smooth, true depth of motion, no zoom"). One video spans the call-to-action AND the footer, no overlay; the legal line is deleted so the video breathes.
10. **Free assets.** motionsites.ai/backgrounds hosts ready videos; he pastes a URL into any section that feels empty.
11. **Scroll-scrub.** "Play the hero video based on scroll", then a transparent-to-solid gradient so the section border stops being a hard cut.
12. **Rest of the pages.** Same styles, one prompt: field guides, geology, plants, live tour, sign-up.
13. **Distribution.** Screen-record the site, post on X, tag the tool vendor (Lovable, Claude AI) hoping for a repost. The first frame is the thumbnail; the lead magnet goes in the reply, never the headline.

## What is genuinely new for us

- **The Fable 5 build order.** Hero only first from one detailed prompt, then styles locked, then "extend in the established style", one section per message, curating and deleting as he goes. Our [sitio-cinematico](/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md) order (reference → scene → animation → hero → site) is compatible; new is the explicit style-locked wording and the delete-the-duplicate loop, claimed to work on the exact model this workspace runs on.
- **The averaged-color melt.** Blur a video frame, take its average color, make it the page background. Our [doctrine](/Users/unctad/Claude/9 - System/ui-ux/motion/motion-design.md) has the bottom gradient fade; this trick is what makes the fade invisible.
- **The still-camera negative prompt.** "Do not change size or position, no zoom in or zoom out" — the constraint that makes any generated clip usable under UI.
- **One video across two sections.** The closing video spans call-to-action plus footer, stripping the legal line — a strong page ending we do not name yet.
- **motionsites.ai/backgrounds.** A free library of ready page videos; assets with zero generation cost.

## What we skip and why

- **The X growth loop.** Tag the vendor, first-frame thumbnail, lead magnet in the reply — already decoded in [the award-winning-sites reference](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-yt-award-winning-animated-sites.html), and not our channel: we deliver to governments and partners, not follower counts.
- **Buying his prompt library.** Our recreation prompts ([NovaAI](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-novaai-prompt.md), [Marcus](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-marcus-prompt.md)) already carry the same contract discipline.
- **ChatGPT image as generator.** Higgsfield MCP and Google AI Studio already cover images, at zero cost.

## Fold-in candidates

- **Averaged-color melt.** One line under "Video under the page": match all section backgrounds to the blurred average color of the video — home: `9 - System/ui-ux/motion/motion-design.md` §3.
- **Still-camera negative prompt.** Make "do not change size or position, no zoom" the standard line in every video-asset prompt — home: `/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md` (asset step).
- **Style-locked extension for Fable 5.** Hero first, then "build the rest in the style already established", one section per message — home: `/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md` (build step).
- **Video spanning two sections.** Add the CTA-plus-footer video close to the technique shelf — home: `9 - System/ui-ux/motion/motion-design.md` §3.
- **motionsites.ai/backgrounds.** List it as a free ready-video source — home: `9 - System/ui-ux/inspiration/references.md`.

## Deserves a full reference page with frames: yes

It is our only decoded record of Fable 5 — the model this workspace runs on — building a motion page end to end. The strongest lessons are visual: the color-matched melt, the pinned video with cards around it, the footer-spanning close. Frames would carry them better than words.