Jonathon's AI Wiki

Build Animated Award-Winning Websites with Claude Fable 5 (Viktor Oddy / motionsites.ai)

5 min read

Source: ai-research/viktoroddy-fable-5-animated-websites-2026-06-10.md — X post @viktoroddy, status 2064703131808584116 (2026-06-10). The post text is extracted verbatim; the video walkthrough is reconstructed from xAI Grok’s video-understanding analysis of the screen recording (no machine transcript exists), and motionsites.ai detail is from a WebFetch of the public landing page.

Author: @viktoroddy (Viktor Oddy) · Posted: 2026-06-10 · Engagement at fetch: 828K+ views, 8K+ likes, 14K+ bookmarks. Evidence flag: promotional creator content with a funnel to a paid product (motionsites.ai / Design Rocket); the actual prompts are not in the post — they are gated behind the prompt library. Treat superiority framing (“award-winning,” “#1 Best UI Prompt Library”) as marketing, not benchmark.

A field signal that Mythos (released 2026-06-09) is being used in the wild for high-end animated web design within ~24 hours of launch. Viktor Oddy — the same creator behind the wiki’s spec-style prompting example and the motionsites.ai prompt library — posted a 12-minute screen-recorded tutorial building cinematic, scroll-heavy “award-winning” landing pages with Fable 5 High plus an AI image-asset pipeline. The post is thin on verifiable specifics, but the workflow it demonstrates is a concrete, current data point on how operators are pointing the new Mythos-class model at frontend work.

Key Takeaways

  • The hook is Fable 5, not a new tool. “Claude Mythos is Insane!” — the tutorial sells the new model as the unlock for one-prompt (or short prompt-chain) animated websites that previously took heavy manual coding. The model dropdown in the video shows Fable 5 (incl. “Fable 5 High”), Opus 4.0, Sonnet 4.5. See Mythos 5 article for what the model actually is (verified against the system card — that page is authoritative; the in-video “Fable 5 High” label is read from Grok’s frame analysis).
  • The output target is “award-winning” cinematic sites: scroll-triggered animations, parallax, video backgrounds, gradient overlays, soft lighting, dramatic hero sections, GSAP/Three.js-style motion, SVG paths, particle effects. Dark, high-production-value aesthetic.
  • AI image assets are part of the pipeline. A recurring 3D floating-island hero element is generated and iterated with an image tool (the video references GPT Image 2, upscaling, color grading, inpainting, and “turn to video”), then dropped into the site as a hero.
  • Prompts are the gated product. A self-reply links to motionsites.ai for “ALL prompts from this video.” motionsites.ai (public landing page) is a 200+-template animated-website prompt/template library — free “Copy” + “Premium” tiers + a “Go Unlimited” plan — “Powered by Design Rocket,” whose course pitch is “AI Design Websites That Most Agencies Charge $5,000 For.”
  • Same creator, second wiki appearance. Viktor Oddy already anchors Prompt Examples — Spec-Style Prompting (hyper-detailed React/TS/Vite/Tailwind single-shot prompts). This video extends the same “engineer one massive prompt for production-ready output” thesis to animated full sites, now on Fable 5.

The workflow shown (from Grok’s video analysis)

  1. Open Claude.ai, select Fable 5 / “Fable 5 High,” start a new project (“Welcome, viktor”).
  2. Generate + iterate a hero image asset (the floating island) in an image tool — generate, upscale, color-grade, inpaint, optionally animate.
  3. Paste a long, highly engineered frontend prompt instructing Claude to act as an expert frontend dev and build a full site (hero, nav, cinematic transitions) with scroll animations, parallax, video backgrounds, performance and mobile-responsiveness requirements.
  4. Iterate in chat — generate HTML/CSS/JS, debug, expand on prior output; switch to a code editor / preview to test. Reference points named include “Apple-styled websites” and “renewable energy landing pages.”
  5. Promote the result — the video’s later frames show composing an X post with the hero image and “Fable 5 + 1 prompt,” and a highlights page pushing motionsites.ai.

Try It

  • Read the Fable 5 article first for the real model facts (pricing 50 per Mtok, free on Pro/Max/Team through June 22, token-hungry) before assuming the demo’s results are typical.
  • For a fully-sourced end-to-end build pipeline (brand brief → image/video assets → canvas → ZIP → GitHub → Vercel), use the wiki’s How to Build Websites with Claude Design playbook rather than the gated prompts here.
  • If you want the spec-prompt technique this creator teaches, the spec-style prompting article already captures the pattern (exact hex, font weights, CDN URLs, pixel values) without the paywall.
  • Use GPT Image 2 (or the Kie.ai Nano Banana 2 + Kling path from the build-websites playbook) for the hero-asset step.

Open Questions

  • The actual prompts are unverified — gated behind motionsites.ai. No way to confirm the “one prompt” framing or reproduce the results from the post alone.
  • No transcript. The spoken tutorial content is not captured; the steps above are inferred from Grok’s frame-level visual analysis, not the narration.
  • Does “Fable 5 High” map to an official tier? The video shows a “Fable 5 High” option; the verified Fable 5 spec (system card, 2026-06-09) describes adaptive thinking always-on with no public effort knob on the consumer surface — reconcile whether “High” is a real UI control or a relabel.
  • Is this Claude Design or Claude chat + artifacts? The frames show the Claude.ai interface and a code/preview view, not clearly the Claude Design canvas. Placement here is as a Fable-5 website-building tutorial, adjacent to the Design cluster.

Graph View

Backlinks