Claude Fable 5 + Higgsfield MCP Built This Motion Website — Transcript

This website was built with Claude's newest model, Claude Fable 5, also known as its new Mythos class model. Anthropic is positioning it as their most capable public Claude model so far, especially for coding, long-running agentic workflows, reasoning, vision, and complex project execution. So, in this video, I don't want to test it with a simple prompt. I want to give it a real production-style workflow.

complex project execution. So, in this video, I don't want to test it with a simple prompt. I want to give it a real production-style workflow.

We're going to connect Higgsfield MCP directly inside Claude code and use it to create the visual system for this website. The burger product images are generated with GPT Image 2, the cinematic background video is generated with C Dance 2.0, and then Claude code uses those assets to build the actual website. [music] The final page is a scroll-driven motion website built with GSAP, Lenis, and ScrollTrigger. So, as I scroll, [music] the background video is not just playing normally. It is being controlled frame by frame by the [music] scroll position. And that's what makes this a much better test for Fable 5, because Claude is not only writing a few React components. It has to plan the project, organize the files, generate the assets through Higgsfield MCP, prepare the video for scroll scrubbing, build [music] the front end, wire the motion system, and then verify that the final website actually works.

uses those assets to build the actual website. [music] The final page is a scroll-driven motion website built with GSAP, Lenis, and ScrollTrigger. So, as I scroll, [music] the background video is not just playing normally. It is being controlled frame

Before we move into Claude code, let me quickly show you how the Higgsfield connection works, because this is a big part of the workflow. Higgsfield is an AI creative platform for generating media and working with images, videos, campaign assets, product visuals, cinematic clips, and more. So, instead of using one tool for images, another for video, and then manually moving everything around, Higgsfield gives us a single creative platform where we can generate the media assets we need for the website. But for this video, I'm not going to use Higgsfield only from the web interface. I want to connect it directly into Claude using MCP. MCP basically lets Claude communicate with external tools. So, instead of Claude only writing prompts or giving instructions, it can actually call Higgsfield tools from inside the Claude workflow. [music] That means we can generate images and videos, keep the assets organized, and use them later in the project without constantly switching between apps.

Higgsfield MCP, prepare the video for scroll scrubbing, build [music] the front end, wire the motion system, and then verify that the final website actually works.

To connect it, we open the MCP section inside Higgsfield. Here, we can see different options, but for this workflow, we're using Claude. Higgsfield gives us the MCP URL, and this is the URL we need to paste into Claude. [music] Now, we open the Claude desktop app. Inside Claude, go to customize, then open connectors. [music] As you can see, I already have Higgsfield connected here, but I'll still show the setup. We click the plus button, choose add custom connector, enter the name Higgsfield, paste [music] the MCP URL, and then click add. After that, Claude will ask you to connect and sign in with your Higgsfield account. Once that authorization is complete, Higgsfield is available directly inside Claude. So, now we can generate media from the Claude interface instead of going back and forth manually. A simple way to check if the connection is working is to ask Claude for your Higgsfield balance.

cinematic clips, and more. So, instead of using one tool for images, another for video, and then manually moving everything around, Higgsfield gives us a single creative platform where we can generate the media assets we need for the website. But for this video, I'm not

If Claude returns your balance, that means the MCP connection is working, and Claude can communicate with Higgsfield.

Higgsfield tools from inside the Claude workflow. [music] That means we can generate images and videos, keep the assets organized, and use them later in the project without constantly switching between apps.

One quick note about the new model. When Fable 5 first launched, during the first few hours, it was visible inside Claude chat and Claude [music] co-work, but it did not immediately show up inside Claude code for everyone. So, if you open Claude code and don't see Fable 5 in the model list yet, you can manually call it from the command line inside Claude code. Use this [music] command: /model Claude Fable 5. After that, the new model should appear, and Claude code should switch to Fable 5. Once that is set, we can start the actual project and test the model on a full creative coding workflow.

[music] Now, we open the Claude desktop app. Inside Claude, go to customize, then open connectors. [music] As you can see, I already have Higgsfield connected here, but I'll still show the setup. We click the plus button, choose add custom

[music] Now, let's move into the actual build. Just to quickly remind you what we're making, the goal is to create a cinematic scroll-driven website for a fictional premium burger brand called Burger Lad. Before I ask Claude to generate images, videos, or write the website code, I want to give it a very specific project skill. This skill is basically a detailed production guide for this exact Burger Lab project. It includes the brand direction, folder structure, required assets, image prompts, video prompt, tech stack, scroll animation requirements, and the final verification checklist. I'm not going to write the full skill from scratch here in the video because it is a long project-specific file. I'll leave the link in the description so you can inspect it or reuse the structure. But, one important note, this skill is built specifically for this Burger Lab project. So, if you want to use it for your own product, ask AI to adapt the skill first and replace the brand, product, [music] visual direction, assets, prompts, and website sections for your own project. I already have a fresh folder open inside Claude Code. Now, I'm going to add the Burger Lab skill file into the project and ask Claude to install it properly. [music] For this step, I'm going to use Opus 4.8 instead of Fable 5 because this is just set up work. I don't need the newest and most expensive model yet just to place a skill file and prepare the workspace.

now we can generate media from the Claude interface instead of going back and forth manually. A simple way to check if the connection is working is to ask Claude for your Higgsfield balance.

Now that the skill is installed, we can start the actual workspace setup. At this stage, I still don't want Claude to generate any media or build the website yet. First, I want the project to be organized properly because once we start generating images and video, file structure becomes really important. So, the first real task is simple. Create the working folders and the planning files. The skill already knows the structure we need for this Burger Lab website. Claude has now created the initial workspace for the Burger Lab project. We have the main assets folder and inside that we have separate folders for images, videos, and references. We also have a copy folder where all the planning documents and prompts are stored, plus a scripts folder with the helper script we'll use later to prepare the background video for scroll scrubbing. Inside the copy folder, Claude created the core planning files, the brand kit, the asset plan, the image prompts, the video prompt, and the website [music] brief. So, before generating anything, the project already has a clear visual direction, a defined file structure, a list of required assets, and the exact prompts we'll use for the still images and the final video. For the website, we need seven still images. First, we generate the main hero burger, because that image defines the final look of the lab burger. Then we use that hero burger image as the reference for the exploded burger image, so the exploded version feels like the same product separated into layers, not a different burger.

One quick note about the new model. When Fable 5 first launched, during the first few hours, it was visible inside Claude chat and Claude [music] co-work, but it did not immediately show up inside Claude code for everyone. So, if you

After those two core images are ready, Claude can generate the ingredient detail image and the four catalog burgers for the product cards. The image generation is finished, so now let's quickly review what Claude created through Higgsfield MCP. We have the main hero burger, the exploded burger reference, the ingredient detail image, and the four catalog burgers for the menu cards. Overall, this is a very solid result. The images all follow the same dark premium food advertising style, strong cinematic lighting, warm amber highlights, realistic textures, and a clean product-focused composition. Now we can generate the most important media asset in the whole project, the background video. This is the video that will sit behind the website and respond to the user scroll, so it needs to look impressive, but it also needs to work technically as a scrubbed video layer. For the final direction, I'm going with a dynamic hypermotion food commercial style. The video should start with the assembled burger lab hero burger, use bold cinematic camera movement.

should switch to Fable 5. Once that is set, we can start the actual project and test the model on a full creative coding workflow.

[music] Now, let's move into the actual build. Just to quickly remind you what we're making, the goal is to create a cinematic scroll-driven website for a fictional premium burger brand called Burger Lad. Before I ask Claude to generate images, videos, or write the

website code, I want to give it a very specific project skill. This skill is basically a detailed production guide for this exact Burger Lab project. It includes the brand direction, folder structure, required assets, image prompts, video prompt, tech stack,

scroll animation requirements, and the final verification checklist. I'm not going to write the full skill from scratch here in the video because it is a long project-specific file. I'll leave the link in the description so you can inspect it or reuse the structure. But,

one important note, this skill is built specifically for this Burger Lab project. So, if you want to use it for your own product, ask AI to adapt the skill first and replace the brand, product, [music] visual direction, assets, prompts, and website sections

for your own project. I already have a fresh folder open inside Claude Code. Now, I'm going to add the Burger Lab skill file into the project and ask Claude to install it properly. [music] For this step, I'm going to use Opus 4.8

instead of Fable 5 because this is just set up work. I don't need the newest and most expensive model yet just to place a skill file and prepare the workspace.

Now that the skill is installed, we can start the actual workspace setup. At this stage, I still don't want Claude to generate any media or build the website yet. First, I want the project to be organized properly because once we start

generating images and video, file structure becomes really important. So, the first real task is simple. Create the working folders and the planning files. The skill already knows the structure we need for this Burger Lab website. Claude has now created the

initial workspace for the Burger Lab project. We have the main assets folder and inside that we have separate folders for images, videos, and references. We also have a copy folder where all the planning documents and prompts are stored, plus a scripts folder with the

helper script we'll use later to prepare the background video for scroll scrubbing. Inside the copy folder, Claude created the core planning files, the brand kit, the asset plan, the image prompts, the video prompt, and the website [music] brief. So, before

generating anything, the project already has a clear visual direction, a defined file structure, a list of required assets, and the exact prompts we'll use for the still images and the final video. For the website, we need seven still images. First, we generate the

main hero burger, because that image defines the final look of the lab burger. Then we use that hero burger image as the reference for the exploded burger image, so the exploded version feels like the same product separated into layers, not a different burger.

After those two core images are ready, Claude can generate the ingredient detail image and the four catalog burgers for the product cards. The image generation is finished, so now let's quickly review what Claude created through Higgs Field MCP. We have the

main hero burger, the exploded burger reference, the ingredient detail image, and the four catalog burgers for the menu cards. Overall, this is a very solid result. The images all follow the same dark premium food advertising style, strong cinematic lighting, warm

amber highlights, realistic textures, and a clean product-focused composition. Now we can generate the most important media asset in the whole project, the background video. This is the video that will sit behind the website and respond to the user scroll, so it needs to look

impressive, but it also needs to work technically as a scrubbed video layer. For the final direction, I'm going with a dynamic hypermotion food commercial style. The video should start with the assembled burger lab hero burger, use bold cinematic camera movement around

it. Push-in, orbit, rotation, parallax, light sweeps, and then in the second half, the same burger separates vertically into its existing visible layers. The video generation is finished, so let's quickly check the result before we move into the website

built. [music] This is the main motion asset for the whole page, and overall it came out really strong. The burger keeps the same premium visual identity, the camera movement feels dynamic and cinematic, and the second half separation gives us

the kind of scroll-driven reveal that can make the website feel much more polished than a static landing page. Now we have everything we need for the actual website built. [music] The planning files, the Burger Lab brand direction, the generated product images,

and the final background video. [music] At this point, I'm switching Claude code from Opus 4.8 to the new Fable 5 model because this is the part where the workflow becomes more demanding. The website itself is a single-page cinematic landing page for Burger Lab.

The main experience is the scroll-controlled background video where the burger motion responds to the user scroll. On top of that, we need a polished [music] dark premium UI with a hero section, ingredient story, product cards, ordering style panels, and a

final CTA. [music] Technically, we're building it with Vite React GSAP Lenis and ScrollTrigger. Claude has finished building the website, so now let's open the project in VS Code and see what it created. Now I'll open the terminal and

run the development server with npm run dev. Once Vite gives us the local URL, I'll open it in the browser. And here's the final Burger Lab website.

[music] Honestly, this came out really strong. The whole page has that dark premium product campaign look we were [music] aiming for. The burger visuals feel cinematic, the UI cards fit the brand direction, and the scroll controlled background video gives the site a much

more polished feeling than a normal static landing page. What I like here is that the result does not feel like a generic restaurant template. It feels more like a premium food commerce campaign. Dark surfaces, amber accents, product cards, strong typography, and a

main visual moment that actually reacts to scroll. Another interesting detail is that during the build, Fable 5 did more than just assemble the page. It also generated a few extra supporting images where the layout needed them, and it

removed backgrounds from some assets so they could fit better inside [music] the website UI. So, overall, I'm genuinely happy with this result. If you want to try this workflow yourself, I'll leave the Higgs Field MCP link in the

description. You can connect it to Claude, add the connector, and start generating images and videos directly from your AI workflow. That's it for this video. If you found [music] it useful, leave a like, subscribe to the channel, and let me know in the comments

what kind of AI website or creative workflow you want me to [music] build next. Thanks for watching, and I'll see you in the next one.

[music] [music]