Claude Fable 5 Just Changed Web Design Forever!

youtube.com/watch?v=_JF_s-ZRTyY · id _JF_s-ZRTyY · 16:47 · reviewed 02-08-2026

The process he shows

Pinterest. Find one image with the look he wants (a 3D globe).
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.
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.
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.
Drop the video in. "Add this video as the background of the hero. No overlay." Recolor orange to purple.
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.
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.
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.
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.
Free assets. motionsites.ai/backgrounds hosts ready videos; he pastes a URL into any section that feels empty.
Scroll-scrub. "Play the hero video based on scroll", then a transparent-to-solid gradient so the section border stops being a hard cut.
Rest of the pages. Same styles, one prompt: field guides, geology, plants, live tour, sign-up.
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 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 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, and not our channel: we deliver to governments and partners, not follower counts.
Buying his prompt library. Our recreation prompts (NovaAI, Marcus) 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: `[local implementation path] (asset step).
Style-locked extension for Fable 5. Hero first, then "build the rest in the style already established", one section per message — home: `[local implementation path] (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.