11:35Code And Create · Tutorial
Claude Fable 5 + Higgsfield MCP Built This Motion Website
An 11-minute build log: one Claude session plans, generates assets via MCP, and ships a scroll-driven cinematic landing page.
June 11thThe argument in one line.
Connecting a coding agent to a media-generation MCP server turns it from a code writer into a full creative-production agent that plans, generates its own visual assets, and builds a working site around them in one pass.
Read if. Skip if.
READ IF YOU ARE…
- You build with Claude Code or a similar coding agent and want to see a concrete example of an MCP connector wired to a generation tool, not just a data/API tool.
- You're evaluating whether AI-generated video/image assets are usable enough to build a real scroll-driven marketing site around.
- You want a template for structuring a long, role-based production prompt that sequences media generation before code generation.
SKIP IF…
- You're looking for a neutral, third-party comparison of AI media tools — this video is built around promoting Higgsfield's own MCP connector.
- You want front-end code walkthroughs — the video shows prompts and results, not line-by-line implementation.
The full version, fast.
The video demonstrates wiring Higgsfield (an AI creative-generation platform) into Claude via MCP, then using Claude Code with Fable 5 to build a cinematic Nike Air Max 90 product website end to end. Instead of manually generating media and handing files to the coding agent, Claude calls Higgsfield directly mid-workflow to generate the hero sneaker video (Seedance 2.0) and all product/card imagery (GPT Image 2), organizes the files into the project, and pauses for human approval on the hero video before continuing. The finished site uses GSAP, ScrollTrigger, Lenis, and Three.js so the background sneaker video is scroll-scrubbed rather than autoplaying — it advances on scroll-down and reverses on scroll-up. The takeaway: giving a coding agent an MCP connector to a generation tool (not just a data tool) collapses the media-then-code workflow into a single agentic pass, with a human-approval checkpoint on the one asset that matters most.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:44
01 · Cold open / the test
States the premise: give Fable 5 a full production workflow, not a simple landing page. Notes the July 7 promotional usage deadline.
00:44 – 02:38
02 · What Higgsfield and Higgsfield MCP are
Explains Higgsfield as a multi-model creative generation platform and MCP as the connector letting agents call it directly.
02:39 – 03:58
03 · Connecting the MCP to Claude
Screen walkthrough: copy MCP URL, add custom connector in Claude desktop, authorize, verify by checking account balance.
03:58 – 05:06
04 · Test generation from chat
Sanity-checks the connection with a throwaway image generation directly inside Claude chat.
05:06 – 07:40
05 · The master prompt
Walks through the production prompt: role definition, local reference image, Higgsfield MCP asset generation, the no-autoplay scroll-driven video requirement, design rules, and the named motion stack.
07:40 – 09:52
06 · Build and review the hero video
Fable 5 generates the hero sneaker video first and the workflow pauses for human approval before continuing.
09:52 – 10:45
07 · Local preview in VS Code
Opens the finished project in VS Code and launches a local preview to review the real result in browser.
10:45 – 11:45
08 · Final site walkthrough
Tours the hero, product story/philosophy sections, colorway cards, editorial section, CTA, and full-screen menu.
11:45 – 12:32
09 · Wrap and CTA
Recaps the Fable 5 + Higgsfield division of labor, repeats the July 7 deadline, points to the Higgsfield link, asks for likes/subscribes/comments.
Lines worth screenshotting.
- Claude Fable 5 was reported unavailable and then restored, running under a promotional usage window until July 7 before reverting to credit-based usage.
- Higgsfield MCP exposes the same generation backend to multiple agents at once — the demo shows connector options for Claude, ChatGPT, Cursor, and others.
- The workflow puts a human-approval checkpoint after the single most expensive/important generated asset (the hero video) before letting the agent continue building.
- The master prompt explicitly forbids an autoplaying background video, instead requiring the video to be tied frame-by-frame to scroll position in both directions.
- The production prompt defines the agent's role first (creative developer, cinematic web designer, AI art director, front-end animation specialist) before any technical instructions.
- The site's motion stack pairs four specific libraries: GSAP for animation control, ScrollTrigger to bind animation to scroll position, Lenis for smooth scrolling feel, and Three.js for background particle/depth effects.
- A local reference product image was placed in a project folder and used as the strict visual anchor for every generated asset, keeping the AI-generated video and images consistent with one real product photo.
An MCP connector to a generation tool turns a coding agent into a media producer.
AGENTIC WORKFLOW
Wiring a coding agent to a media-generation MCP server collapses the usual generate-assets-then-write-code workflow into a single agentic pass, with one human-approval checkpoint on the asset that matters most.
- MCP connectors aren't just for pulling in data — they can hand an agent the ability to generate the exact media it needs mid-task, not just describe what it would need.
- A production prompt that defines the agent's role first (creative developer, art director, animation specialist) before any technical instruction gives it a clearer frame for judging its own output.
- Anchoring every generated asset to one local reference image keeps AI-generated video and stills visually consistent with the real product instead of drifting.
- Putting a human-approval pause after the single highest-stakes generated asset (here, the hero video) avoids building an entire project around a bad generation.
- Naming the exact motion requirement — scroll-position-bound video, not autoplay — turns a vague 'make it cinematic' ask into something a coding agent can implement correctly on the first pass.
- Pairing a small, well-known set of front-end libraries (GSAP, ScrollTrigger, Lenis, Three.js) for motion is a repeatable recipe for a smooth, premium-feeling scroll site.
Terms worth knowing.
- MCP (Model Context Protocol)
- A protocol that lets an AI model connect to external tools in a controlled way, so instead of only describing what to do, the model can actually call those tools during a conversation or coding session.
- Higgsfield
- An AI creative platform for generating images, video, product visuals, and campaign assets, usable directly through chat via its MCP connector.
- Scroll-driven video
- A background video whose playback position is tied to the user's scroll position instead of playing on a timer, so scrolling down advances the video and scrolling up reverses it.
- ScrollTrigger
- A GSAP plugin that binds animations to scroll position, letting page sections pin, fade, or reveal exactly when the user scrolls to them.
- Lenis
- A smooth-scrolling library that makes a webpage's scroll motion feel fluid and controlled rather than the browser's default jumpy scroll.
Things they pointed at.
06:59toolGSAP
07:01toolScrollTrigger
07:02toolLenis
07:29toolThree.js
Lines you could clip.
00:12
“This modern cinematic website was built with Claude Fable five.”
06:15
“I don't want a normal auto play background video. The video has to be fixed behind the page and controlled by scroll progress.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
analogy
00:02This modern cinematic website was built with Claude Fable five. And instead of testing the model with a simple landing page, I wanted to give it a real production style workflow. Generate the sneaker video, create product visuals, build the scroll driven website, and refine the final UI with GSAP, Lenis, Scroll Trigger, and three dot j s.
00:22As you already know, Fable five is back. After being temporarily unavailable, Anthropic restored access. And right now, paid users can test it under a limited promotional usage window until July 7.
00:35After that, Fable five moves into credit based usage. So this is the right moment to see what it can actually do when you give it a serious creative coding task. The website itself was built with Claude Fable five, but the media used inside the site, the sneaker video, the product visuals, the card images, and the final presentation assets were generated with Higgs Field.
00:57So this is not only a coding test, it is a full creative production workflow where the model has to work with generated media, organize it, and then turn it into a finished interactive website.
01:08For anyone who has not used Higgs Field before, it is an AI creative platform for generating images, videos, product visuals, cinematic clips, marketing assets, and full campaign style media. So instead of using one tool for images, another tool for video, and then manually moving everything into the project, Higgs Field gives us a single place where we can create the visual assets needed for this kind of website.
01:33But in this workflow, I did not generate everything manually from the Higgs Field website. I used Higgs Field MCP. MCP stands for model context protocol, and the simple way to think about it is this.
01:46It gives an AI model a controlled way to connect with external tools. Normally, Claude can write instructions, create prompts, plan a project, and explain what you should do next.
01:56But with MCP connected, Claude can actually use certain tools inside the workflow. In this case, it can communicate with Higgs field, request image or video generations, organize the results, save files into the project folders, and then use those assets while building the site.
02:13Inside Higgs field, we open the MCP and CLI section. This is where Higgs field shows the different ways we can connect the platform to external AI workflows. We can see options for Claude, Chat GPT, Cursor, Open Claw, Hermes, and other agent style workflows.
02:29So the idea is not limited to one assistant. Higgs field is basically giving different AI agents a way to access the same creative generation system. For this video, we are using Claude and the setup is pretty simple.
02:42First, Higgs field gives us the m c p URL. We copy that URL and then we open the Claude desktop app. Inside Claude, we click customize then go into connectors.
02:53As you can see, I already have Higgs field connected here, but I'll still show the setup so the process is clear. From there, we click the plus button, choose add custom connector, and enter a name for the connector. I'll just call it Higgs field because that keeps it clear inside the workflow.
03:08After that, we paste the m c p URL from Higgs field into the connector field and click add. This is the step that tells Claude where the Higgs Field MCP server is so Claude knows which external tool it can connect to. After that, Claude asks us to connect and sign in with the Higgs Field account.
03:27Once the authorization is complete, Higgs Field becomes available directly inside Claude. From that point on, Claude can call Higgs Field during the workflow instead of me manually generating every image and video from the web interface. To make sure the connection is actually working, we can do a quick test directly inside Claude chat.
03:45I'll send a very simple message and ask Claude to check my Higgs field balance. If Claude returns the balance information, that means the Higgs field connector is active and Claude can communicate with Higgs field through MCP. Before we start working on the actual website, I want to test the media generation workflow directly from Claude chat.
04:05This is a simple way to see what the Higgs Field MCP connection actually does in practice. For the test, I'll start with an image. This is the fastest way to confirm that Claude can understand the creative direction, call Higgs field through MCP, use the right image model, and return a generated result inside the workflow.
04:25Let's generate some random image with this prompt. Once I send this, Claude should call Higgs Field through MCP and start the image generation process. If everything is connected correctly, I should see the generation run from inside Claude and then I can review the result without manually switching between tools.
04:44And as you can see, the image was generated directly inside Claude chat. So the same basic idea can be used for different types of media. We can generate product images, cinematic videos, campaign visuals, motion assets, and other creative materials directly from the conversation depending on which Higgs field tools are available through the connector.
05:06Now we can move into the actual website build. For this part, I'm going to use Claude code with Fable five, and I already have the main prompt prepared. A lot of people ask how I write prompts for these kinds of projects, and the honest answer is that I usually use AI to help me structure them.
05:24For this project, the prompt starts by defining the role clearly. I'm telling it to act like a creative developer, cinematic web designer, AI art director, and front end animation specialist. This gives the model a clear direction from the beginning.
05:38The task is not only code, and it is not only design. It is a complete visual production workflow. Then the prompt defines the product reference and the asset workflow.
05:49The sneaker image is already inside the project folder, so Fable has to use that local file as the master reference. After that, the prompt explains that the media should be generated through Higgs Field MCP, including the C Dance video and the GPT image two visuals, and then saved into the correct folders so the website can use those files directly.
06:11The most important part of the prompt is the scroll driven motion system. I'm very specific here because I don't want a normal auto play background video. The video has to be fixed behind the page and controlled by scroll progress.
06:25So when I scroll down, the sneaker video moves forward. And when I scroll back up, the video reverses. This is what makes the final result feel more like an interactive product experience.
06:36The prompt also includes the design rules for the rest of the site, where product images are allowed, how the catalog cards should use three d cutout effects, how the full screen menu should behave, how the final CTA should look, and how the non image sections should rely on typography, glassmorphism, particles, and scroll reveals.
06:56For the front end motion, the main technologies are GSAP, scroll trigger, Lenis, and Three JS. GSAP is the animation engine, so it gives us precise control over how text, panels, cards, and interface elements move on the page.
07:11Scroll trigger is what connects those animations to the scroll position so sections can reveal, pin, fade in, and react exactly when the user reaches them. Lenis is used for smooth scrolling which makes the whole website feel more cinematic and controlled instead of jumpy or browser default. And Three.
07:30J s is used for extra visual depth, like subtle particles, atmospheric movement, and background motion layers so the site does not feel completely flat. Now inside Claude code, I already have the project folder open. Before running the main prompt, I prepared a references folder, and inside that folder, I placed the product reference image.
07:51This is the image Claude will use as the visual anchor when it asks Higgs Field to generate the sneaker video. Once I run the prompt, Fable starts with the media workflow first. It will use Higgs Field through MCP to generate the main C Dance video, then save that video into the project folder.
08:09At that point, the workflow stops because I want to review the video before it becomes part of the website. If the video looks good, I approve it, and then Fable can continue with the rest of the process. After that approval, it moves into generating the remaining assets, preparing the cutouts, building the website, adding the scroll driven video system, and refining the final UI.
08:31As you can see, the video has now been generated, so let's open it and review the result.
08:48The result is actually quite good. The motion is smooth, the sneaker keeps its shape, and most importantly, I don't see any major visual glitches or broken details. Since the video is clean and usable, I'm going to approve it.
09:01After this confirmation, Fable can continue with the next phases, generating the remaining visuals, preparing the product cutouts, building the website structure, adding the scroll controlled video system, and refining the final interface.
09:14The website build is now finished. As you can see, Claude code already gives us a preview of the project so we can quickly check the general layout and make sure the site is running. But for the final review, I wanna open it directly in the browser because that gives us a better feeling for the scroll, the motion, the menu, and the full page experience.
09:33For that, I'm going to use Versus Code. For anyone who has not used it before, Versus Code is a code editor where you can open a full project folder, inspect the files, edit the code, and run the project locally. In this case, I already have the website folder open there, so I can launch the local preview and test the final result in the browser.
09:53At first glance, the website already looks very beautiful and impressive. The first thing we see is the hero section with a dark cinematic Nike Air Max 90 composition, large readable typography, and the sneaker video sitting behind the content as the main visual layer.
10:08As I scroll, the important part is that the video is not just playing automatically. The motion is tied to the scroll, so the sneaker movement follows the page progress. Then we move through the product story section, the product philosophy section, the colorway cards.
10:23Next, we have the motion slash editorial section, and finally the CTA area. Besides that, have the full screen menu which also looks really polished. Instead of a basic navigation overlay, it uses large typography, a strong product preview, smooth hover states, and a more cinematic layout.
10:41So even the menu feels like part of the product experience. Overall, this is exactly the type of result I wanted from this test. Fable did not only generate a layout, it connected the generated media, built the scroll driven structure, added interaction, organized the product sections, and turned the whole thing into a cinematic website experience.
11:02Fable five gives us the reasoning and creative direction, but Higgs Field gives it the ability to actually generate the media. So instead of just planning a visual concept, the workflow can produce images, videos, product assets, and then use them inside a real project. Also, remember that Fable five is available under this limited promotional usage window until July 7.
11:25After that, it moves into credit based usage. So this is a good time to test it while access is still more flexible and see how far you can push it in real creative workflows. If you wanna try this setup yourself, check the Higgs Field link in the description.
11:39You can connect Higgs Field MCP to Claude, generate media directly from the chat, and use the same kind of workflow for websites, ads, product visuals, campaign assets, or other creative projects. That's it for this video.
11:53If you found it useful, leave a like, subscribe to the channel, and let me know in the comments what kind of Fable five and Higgs field work flow you want me to test next. Thanks for watching and I'll see you in the next one.
The Hook
The bait, then the rug-pull.
A coding agent is handed a production prompt and an MCP connector to a media-generation platform, and instead of stopping at code, it generates its own hero video and product imagery before building the site around them.
Named ideas worth stealing.
06:59list
The motion stack
- GSAP
- ScrollTrigger
- Lenis
- Three.js
GSAP drives element animation, ScrollTrigger binds those animations to scroll position, Lenis smooths the scroll feel, and Three.js adds background depth/particle effects.
Steal forany scroll-driven marketing or product site that wants a cinematic, non-jumpy feel
How they asked for the click.
VERBAL ASK
11:35link
“If you wanna try this setup yourself, check the Higgsfield link in the description.”
Soft, single CTA delivered in the wrap-up alongside the standard like/subscribe/comment ask; reinforced by an on-screen 3-step recap card (Connect, Generate, Use the same workflow anywhere).
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
