This Skill Turns Fable 5 & GPT 5.6 Into Web Design MONSTERS

Study Guide

Overview

In this video, Chase AI demonstrates a reusable skill (a portable prompt file you invoke inside an AI coding agent) that lets Claude Fable 5 and GPT 5.6 one-shot a premium, animated scroll website. The skill, called Scroll World, was originally created and open-sourced by Peter Wang; Chase forked it and added budget tiers, mobile improvements, and SEO handling. He builds the same Japan travel demo site in both Claude Code and Codex (with GPT 5.6 / Soul), walks through the guided interview, and compares the two models' scene transitions.

Key Points

  • A whole animated site from one skill and one shot. The demo website is not a single scroll animation but several clipped together into a smooth, coherent, premium experience.
  • Credit to Peter Wang. Chase found the original Scroll World skill on Twitter, forked it, and added budget tiers (so you spend less), mobile improvements, and SEO handling.
  • How scroll animations work. Start from one image, turn it into a video, extract every frame with FFmpeg, then tie each frame to the user's scroll position.
  • Higgsfield MCP does the media generation. Images (GPT image / Nano Banana style) and videos (Seedance) are generated through the Higgsfield MCP or CLI without leaving the terminal.
  • Guided, hand-holding interview. The skill asks for creative direction, a budget (number of scenes), and a mobile strategy, then proposes a journey and confirms the anchor image before generating videos.
  • Fable 5 edged out GPT 5.6 on transitions. Both produced impressive one-shot sites; Chase preferred Fable 5's smoother scene-to-scene transitions.

Detailed Sections

What a scroll-animation site actually is

Chase opens on the finished site to make the point that this is not just one scroll animation. It is several scroll animations clipped together into a smooth, high-quality, coherent experience. Doing this manually is painful: you make multiple videos, match up starting frames, and pull frames out one by one. The skill makes the whole process easy to execute.

The Scroll World skill and Chase's fork

The original skill, Scroll World, was made and open-sourced by Peter Wang (Chase links both versions in the description). Chase forked it and introduced budget tiers so you do not need six full scenes, plus a lot of improvements to the mobile version and SEO-related handling.

How the animations work under the hood

Big picture: start with a single image, turn that image into a video, then extract all the individual frames from the video using FFmpeg. Each frame is associated with the scroll position the user is at on the page. There is extra work behind the scenes to keep it smooth and not janky, and every scene is built to reference the others so the whole site looks like one coherent story.

Higgsfield MCP for images and video

Image and video generation runs through the Higgsfield MCP (or CLI), so you never leave the terminal. It calls the image models (GPT image / Nano Banana style) and video models (namely Seedance). To connect it, go to Higgsfield, open MCP and CLI, copy the MCP URL, complete authentication, then add the skill (copy its URL into Claude Code or Codex, or install it as a plugin).

The guided interview and budget tiers

Whether in Claude Code or Codex, you invoke the skill (for example /scrollworld) and give creative direction. Chase's example: a boutique Japan travel brand with an origami art direction. If you do not know your style, the AI will ask questions back and forth. It then asks about budget (how many scenes) and mobile. The reference site used six scenes, which is overkill for most and cost Chase about 800 Higgsfield credits; he suggests four scenes as a sweet spot (you can go as low as three). Mobile options range from lean crop-safe to a full portrait chain that generates extra mobile-specific videos. For the demo he chose the cheapest options: lean and crop-safe.

Journey proposal and the anchor image

The skill presents a journey proposal describing each scene and how many generations it will take (for example four image generations, four scene videos, plus connectors and cross fades, totaling nine), along with a conservative estimated generation time. After you approve, it generates the anchor, the still starting frame that sets the art direction for everything downstream. This is the step to nail: if you approve the anchor, the whole site is based on it. Inside Codex with Soul you can generate images natively (no need to send image requests to Higgsfield), but video generation still has to go to Higgsfield. In Claude Code, which has no native image generation, Higgsfield carries the full load.

Reviewing the finished sites and comparing models

The Codex / GPT 5.6 build finished in about 32 minutes with four scenes across ten generations, running on localhost. The Japan site scrolls through travelers on a subway, a house that opens up, a hotel that unfolds, and a bird that begins to fly. Chase likes the visuals and how each individual scene progresses, but his main complaint is hard cuts between scenes one to two and two to three; the scene three to four transition (a blurred scene four coming into frame, giving a 3D depth effect before seamlessly resolving) is exactly what he wants everywhere. Comparing to the Fable 5 build in Claude Code, the scene-to-scene transitions are noticeably sleeker, so he gives Fable 5 the edge over Soul / GPT 5.6 here, while stressing both are impressive one-shot results.

From spectacle to functional site

Chase argues the hard part (a coherent, non-janky, high-quality animated scroll base) is now solved by the skill. Layering on real function, text, a CTA, and pulling the user from the hero down to a form, is standard work that both Fable 5 and GPT 5.6 handle easily. He closes by again crediting Peter Wang, noting both skill versions are linked, and emphasizing you just show up, invoke the skill, give creative direction, and it goes to work.

Takeaways

  • A reusable skill file can compress a painful multi-step workflow (image to video to frame extraction to scroll binding) into a single guided one-shot.
  • Budget tiers matter: six scenes cost roughly 800 Higgsfield credits, so four scenes is a practical sweet spot for most people.
  • The anchor image is the highest-leverage decision; everything else inherits its art direction, so review it carefully before approving.
  • Where the agent runs changes the pipeline: Codex with Soul can generate images natively, while Claude Code offloads all media to Higgsfield.
  • Both Fable 5 and GPT 5.6 produce impressive one-shot animated sites; Fable 5 had the smoother scene transitions in this comparison.
YouTube