The argument in one line.
Pairing Claude Fable 5 with a video/image-generation MCP like Higgsfield turns a single descriptive prompt into a fully art-directed, cinematic 3D-scroll website, collapsing what used to be a multi-tool production process into one conversational build.
Read if. Skip if.
READ IF YOU ARE…
- You already use Claude Code and want a concrete workflow for generating polished, animated marketing or portfolio sites without touching a design tool.
- You're a freelancer or AI-agency owner looking for a sellable service package (client portfolio or product sites) built almost entirely by AI.
- You want to see what one-shot prompting can produce when it's given access to a video/image generation model instead of just text and code.
SKIP IF…
- You need production-ready, deployed sites — everything shown here runs on localhost and isn't pushed to a live domain.
- You're not willing to pay for a Higgsfield account and per-generation credits on top of your Claude plan.
The full version, fast.
The video demonstrates Claude Code's Fable 5 model connected to the Higgsfield MCP, which gives Claude access to video model Seedance 2.0 and image models like Nano Banana Pro/GPT Image. With a single detailed prompt describing the brand, visual style, and instruction to generate assets via Higgsfield, Fable 5 builds a complete cinematic 3D-scroll website: hero shot, scroll-driven video sequences, copy, and layout. The creator shows three builds — a fictional luxury watch brand, a fictional deep-sea submarine tour company (Abyssal), and a personal portfolio using an uploaded selfie — plus a tip to browse an awards site for design inspiration before prompting. He notes Fable 5 is free on paid Claude plans only until July 7, after which it moves to usage-based pricing, and offers a free prompt pack to replicate the builds.
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:23
01 · Mind-blowing 3D website demo
Cold open reacting to a finished cinematic scroll site before explaining how it was made.
00:23 – 01:51
02 · Fable 5 setup + free prompt pack
Explains Fable 5 is available free on paid Claude Code plans until July 7, sets effort level to Extra/Max, and offers a free one-prompt website pack.
01:51 – 03:12
03 · Why 3D scroll websites work
Explains that the scroll effect is a generated video split into sequential frames, and that a high-quality video model like Seedance 2.0 is required for it to look convincing.
03:12 – 05:36
04 · Connect Higgsfield MCP
Step-by-step: add a custom connector in Claude Code, paste the Higgsfield MCP URL, authenticate, and confirm the connector is toggled on.
05:36 – 06:53
05 · Find website design inspiration
Browses an awards-style site gallery for reference designs and shows how to hand a reference URL to Claude as style guidance.
06:53 – 08:01
06 · One-prompt luxury watch website
Shows an already-built fictional Swiss watch brand ('Aurum & Noir') site created from a single descriptive prompt referencing the Higgsfield MCP.
07:23 – 08:51
07 · Building Abyssal live
Writes and submits a single detailed prompt describing a fictional deep-sea expedition company and submarine, instructing Claude to generate all visuals via Seedance 2.0 on Higgsfield MCP.
08:51 – 10:22
08 · Fable 5 reminder + Jarvis demo
While the site builds, reminds viewers of the July 7 deadline and demos switching his personal AI assistant 'Jarvis' to run on the Fable 5 model.
10:22 – 13:15
09 · Full Abyssal website tour
Scrolls through the completed Abyssal site: submarine hero shots, depth-based facts, bioluminescent sea life, and a product spec/pricing section for the fictional expedition.
13:15 – 14:51
10 · Portfolio website prompt + editing tips
Shows a personal cinematic portfolio site built from one uploaded selfie, walks through the prompt template, and notes Claude can revise the site conversationally afterward.
14:51 – 15:17
11 · Wrap up + next steps
Closing pitch for the free prompt pack and the creator's Claude Code community.
Lines worth screenshotting.
- A single prompt that names a fictional brand, describes the visual style, and instructs Claude to generate assets via a connected MCP can produce a full animated website in one pass.
- Higgsfield MCP gives Claude Code access to video-generation models like Seedance 2.0, letting it create the scroll-triggered cinematic sequences itself rather than relying on stock footage or manual editing.
- The 'cinematic 3D scroll' effect seen on award-winning sites is actually a video split into sequential frames that advance as the user scrolls, not a true 3D render.
- Feeding Claude a reference site (e.g. copied from an awards gallery) is a faster way to steer visual direction than describing a style from scratch.
- A personal portfolio site built from one uploaded selfie and one prompt used the same asset-generation pipeline as a fictional product brand, showing the workflow generalizes to personal branding.
- Fable 5 was offered at no extra usage cost on paid Claude plans only through July 7, after which it shifts to metered/usage-based pricing — a deliberate limited-time evaluation window.
- Iterating on a generated site is conversational: asking Claude to change specific elements after the initial build works without restarting the process.
One well-built prompt can now direct an entire visual production pipeline.
AI WORKFLOWS
Connecting a coding AI to a generation MCP means the same conversational prompt that used to only produce code can now also direct art, video, and layout in a single pass.
- A prompt that names the subject, describes the visual mood, and explicitly tells the AI which generation model to call produces far more consistent results than a vague creative brief.
- Scroll-driven 'cinematic' web effects are usually a generated video sliced into frames tied to scroll position — understanding the mechanism makes it easier to prompt for it deliberately.
- Giving an AI a reference URL or gallery example is a faster way to align on visual style than trying to describe an aesthetic in words alone.
- Personal-brand assets (a single uploaded photo) can be fed into the same asset-generation pipeline used for fictional commercial brands, meaning the same workflow scales from client work to a personal portfolio.
- Free access windows on new AI model tiers are often time-boxed before shifting to usage-based billing, so testing early costs nothing but time.
- Once a build exists, refining it is conversational — asking for specific changes works without re-running the whole generation process from scratch.
Terms worth knowing.
- Fable 5
- A Claude Code model tier the creator uses for this build, positioned as unusually capable at generating full websites from a single prompt, offered free on paid plans for a limited window.
- Higgsfield MCP
- A Model Context Protocol connector that gives Claude Code tool access to Higgsfield's video and image generation models (e.g. Seedance 2.0, Nano Banana Pro) so it can create visual assets during a build rather than only writing code.
- Seedance 2.0
- A video-generation model accessible through Higgsfield, used here to produce the short cinematic clips that get sliced into frames for scroll-driven website animation.
- 3D scroll website
- A site design pattern where a pre-rendered video sequence is split into frames and advanced in sync with the user's scroll position, creating the illusion of a continuous cinematic camera move.
Things they pointed at.
05:38toolAwwwards-style design gallery
Lines you could clip.
00:24
“Claude Fable five is back and it is absolutely incredible at building websites.”
10:34
“This is technically a video that's separated in multiple frames and then also images as well.”
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.
00:00Kinda cool already but oh, wow. I like that. That is beautiful.
00:05Look at this. Honestly, I'm shocked that this is made with one prompt. This is incredible.
00:12Okay. Now let's look at a portfolio website. Okay.
00:15Nice. That is cool. Man, this is very nice.
00:22Wow. So Claude Fable five is back and it is absolutely incredible at building websites. I've been testing this nonstop since yesterday.
00:31So in this video, I'm gonna show you step by step how to do this but on top of that, I'm gonna give you this one prompt website pack that you can basically just copy paste depending on whatever niche or whatever you wanna build there. You can build portfolio websites, you can build like e commerce website, whatever you need.
00:45I'm gonna give you guys this completely for free in the description of video so that way you can just follow me along. We're going to be using this all inside our clot code and we're gonna connect this to a model like c dance two point o and nano banana or g p two image so that way we can create everything within clot code.
01:03I'm gonna use the hicks feed m c p but if you guys wanna use something else, feel free to do whatever you want. But I'm gonna show you all of this step by step so all you have to do is just follow me along. So obviously, Fable five is back, uh, until July 7 and then after it's gonna be kind of on a usage based limit.
01:18So go ahead and explore this as much as possible. So I'm inside my ClotCode. If you don't have ClotCode, just go ahead and install, uh, the ClotCode app, desktop app.
01:26That's what I'm using. And then come to your ClotCode brand new session. Make sure you're at Fable five right there.
01:32It says included until July 7. So once you select that, I'm using, uh, the effort level at extra. So keep it between extra and max.
01:41Obviously, the more you go on the smarter side, the more it's gonna use your token. So kind of play around with different ones. But I think Max, uh, Extra is the one that works pretty well.
01:51So in order to create these website that has these three d scrolling effects, so like right here as you can see, I mean, this is mind blowing. Right? Like how it's able to do this.
02:00It's the accuracy is amazing. And by the way, is just like a fictition fictitious, um, watch brand.
02:06It just created from scratch. So as you can see, this is basically scrolling through the different, um, aspects of the video, the different frames.
02:14Therefore, it's very important for you to use a model that has a, uh, four k image quality. Right? And Cdance two point o that we're gonna use inside Hicksfield does that.
02:23Right? So but but like I said, you can use cling or some other model in there as well. That's completely up to you.
02:30But this scrolling effect that you're seeing here, this is technically a video that's separated in multiple frames and then also images as well. So same thing with the portfolio website here.
02:41Right? I uploaded my image and it's able to create all of this on its own. I didn't do anything else.
02:47I just gave it one prompt and was able to do that. So that's why if you're lazy like me, you wanna be able to attach an MCP so that way it takes care of all of that itself. Of course, it's gonna cost you a bit of money but, you know, that's kind of the, um, the difference between kind of creating it with one shot prompt or doing things multiple in in multiple different tools.
03:06Uh, but I'm gonna show you obviously through just creating this with one single prompt from ClotCode. So, the first thing we need to do is we need to add an MCP, our Higgs field MCP so that way we can use, uh, models like cling or c dance two point o or v o 3.1.
03:23So, as you can see, I've already added it but it's pretty simple to add. So, again, once you're in your cloud code, you're gonna press this or click on this plus button. You're gonna click on the connectors.
03:32You're gonna head over to manage connectors and this is gonna open up all of your, uh, uh, connectors in MCP. So the way to add this, you're gonna click on the plus button and instead of if you click on browse connectors, it's gonna show you all of the native ones that are here, but we're going to add a custom one. So you're gonna click on the plus button and click on add a custom connector.
03:50And here, you're gonna name this. You can just name it something like Higgs field or whatever.
03:55And then for the remote MCP server URL, you're gonna get this from the following link. Go ahead.
04:00I'm gonna put this link in the description. You can click on this. It's gonna bring you right here.
04:03So this is basically a way to connect Hicksfield, uh, to your clot code. So make sure you are in the MCP tab here and then you are also clicking on the clot.
04:14Obviously, if you click on the link in the description, it's gonna bring you directly here so you should be fine. So after you do that, you're just gonna come to the bottom right here. Right?
04:20It says copy the Hicksfield URL. You're gonna click on copy. This is gonna copy it.
04:25And make sure you're logged in. Obviously, you have to create a Hicksfield account because otherwise, you won't be authenticate. So once you create your Hicksfield account and since it's gonna be using like these models, it's you have to put a a couple of dollars in there.
04:38Once you do that, then afterwards, we're gonna go back to our clot code here and just paste this and then click on add. Obviously, it's not gonna let me add because this is a server with this URL already exists.
04:48But at this point, you're going to be redirected to your hicks field to authenticate to make sure that you're allowing Claude to have access to your Higgs Higgs field there. And once you do that, once you give it confirmation and give it access, it's gonna look something like this.
05:03Higgs field is gonna show up here and all of this is going to be, uh, or, uh, enabled for you. So right here, it says disconnect because I've already disconnected it. So, in order to confirm this before you do anything, you wanna make sure you come back to the plus button, click on connectors, and make sure your Higgs field is toggled on.
05:21You see right here, it's toggled on because we're going to be referencing this inside our clot codes. We wanna make sure that we're, uh, creating that or that that connection is already established.
05:33Right? So once you do that now, you're ready to go. Right?
05:36So as far as website that you're planning to bid, so you can actually go to a website like awards.com and see actually award winning websites.
05:45And once you find something that you like, again, this depends on what you're trying to build. So let's say you're building some kind of a portfolio website. You're building some kind of a product website.
05:52Right? Or something completely original out of your imagination. You can actually get some inspiration from here.
05:58So let's say you wanna build some kind of a I don't know what this is. Let's just click on it. Serotonin.
06:03Right? I don't know what this is, but let's just check it. Click on visit site.
06:07This is gonna bring you to his actual website. So serotonin.com. I guess this is some kind of a fashion company or something.
06:16There you go. Where your glam meets grunge.
06:19Okay? Yeah. Yeah.
06:20So it's like an ecommerce website. Right? So same thing, like, you create an ecommerce website, you can just copy this and then you can take it to clot code and say, hey.
06:28Create something similar to this website. So that's kinda one way to kind of clone a website.
06:33Right? So you can just give it a reference. So this is a good site to check out for or you can just Google, you know, award winning site that also works as well.
06:42But anyway, so let's go ahead and create something original of our own. I'm not gonna copy any of these, uh, award winning websites or whatever. Because this was something as you can see it says local host.
06:51I actually created this directly inside my cloud. So if I open this up, you can see right here, this is this is all called, uh, Aurum and Noor Eclipse website. Right?
06:59So I just gave it this one prompt and it said build me a one where a cinematic three d scroll website for Aurum and Noor, a fictional Swiss luxury watch brand And I said to use the Hicksfield MCP to generate all of the diff the different images and videos. And as you can see right here, it went ahead and created it and it says it's live on local host 4888.
07:19Right? So that's exactly how simple that is. And again, we're gonna work on this step by step.
07:23So let's go ahead and open a new cloud code again. So make sure again your Higgs field is connected. Right?
07:29Higgs field is connected. So now, uh, I'm gonna go ahead and grab a prompt from this prompt pack that you guys have access to.
07:36So let me go ahead and paste this big prompt. So I'm just gonna build something completely new. So I said, build me an award winning cinematic three d scroll website for abyssal, a fictional deep sea expedition company that takes civilians eight civilians per year to the ocean floor aboard a submarine called the Erebus.
07:53Right? Something completely fictional and, uh, from the imagination.
07:57And by the way, uh, so let me go ahead and actually enter this, and then we're gonna talk about the rest. And right here, as you can see, I said visuals generate everything with Sea Dance two point o model on the Hicksfield MCP. Right?
08:08And I'm giving it all of the instructions here. So, I'm gonna go ahead and enter. So, now, it's going to realize that the Higgs field MCP is attached and it's gonna go ahead and build this thing out.
08:17So, as you can see right here, visuals describe the surface. I'm giving it the sunlight zones. All of these different instructions are giving I'm giving this to Fable five to make sure that it follows everything along.
08:29But like I said, all of this instruction is inside the prompt pack so you guys can just based on whatever niche you're selecting, you can just copy this prompt and make some changes to it.
08:38And as you can see, right now it's starting to build everything. So it's FFmpeg is ready. Send the bottom that you go.
08:43Use Higgs field to check balance, cinematic hero shots, and now it's generating image and everything else. So let's just go ahead and give this a couple of minutes.
08:51Now a quick reminder on Fable, just like I mentioned in the beginning, this is only available till July 7 on your plans, on your cloud plans. So go ahead and take advantage of that because after that, it's gonna get pretty expensive and move to usage. I've been building nonstop, so I recently built my personal assistant and my second brain.
09:07I updated with Claude Fable five, and it's absolutely incredible. Let me show you guys a quick demo here. Hey, Jarvis.
09:13How you doing?
09:16Working on it, sir. Operational and quietly magnificent, sir. Yourself?
09:21Good. Thanks. Uh, by the way, so a new model came out.
09:26I'm about to switch your brain. What do you think?
09:32Arrival brain, sir. I shall try not to take it personally as you rummage for my replacement.
09:38No. As a matter of fact, right now, you're using Opus 4.8 for your brain. Go ahead and switch to Fable five.
09:46One moment, sir.
09:51Good evening, sir. The new brain is installed, calibrated, and already mildly concerned about your calendar.
09:57So there you go. Uh, this is obviously my second brain, my operating system and I recently added Jarvis with it and I upgraded it with Fable five and it's been nonstop fun. If you're interested in checking this out, if you want your own operation system or, uh, if you want your own personal system Jarvis, check out the community link is gonna be description where you can create your own.
10:18I'll show you exactly what to do step by step. But anyways, let's go back to our build here. Okay.
10:22So looks like it got done. Alright. So it says abyssal is live at local host forty eight ninety.
10:27So let's go ahead and open this up. Alright. Cool.
10:30How deep will you go? So that's the there you go. Abyssal.
10:34It's that, uh, based on so I'm just scrolling right now. Right? Look at this.
10:37Oh, wow. That is cool. That is nice.
10:41So like we mentioned, this underwater vehicle. Right? So very nice.
10:45At 200 meters 99% of sunlight is gone. Nice. And then on the right hand side, I I like that it has this little, uh, kind of scroll animation there as I scroll down.
10:54Nice. The jellyfish is a very nice touch right there. A thousand meters pressure is 100 times the surface.
11:00Okay. Cool. Oh, nice.
11:02Look at this. The light turns on. So these are different frames, obviously, but it's all the same, uh, video that's generated by our Sea Dance through MCP to our Hicksfield MCP.
11:12So Aribus, that was the name of the vehicle, right, based on the prompt. No sun has ever reached this water life makes its own light. Nice.
11:19Look at this beautiful oh, and it does showcase the different animals that, uh, have their own light. Right?
11:26Because it says the sun doesn't reach here, but very cool. Fewer people have stood here than have walked on the moon. Very nice.
11:34That is really cool. So you can see how incredible this is. Ariba's two pilot and and it gives you, like, a product demo ninety six hour life support, 4,000 meter depth rating, souls on board eight because we said that the product should have or this vehicle should have eight people capacity.
11:54Right? And it says eight seats $250,000 departing March 2027.
11:59That's quite a bit of, uh, the expensive ticket. But, anyway, so you can see how amazing this thing is, uh, as far as developing these three d scrolling websites.
12:10Right? Through animation. And like I said, the reason why it's doing this is because it's capable of understanding, um, that it has access to a video generation model like Cdance two point o and image models like nano banana pro or g p two two image.
12:24Right? All of that is inside our MCP and therefore, Fable five is able to generate the knowledge, is is able to generate the expertise and then it it reaches out to Hicksfield to generate those clips and then kind of renders everything together and puts it on a a cinematic website.
12:43Right? This as you can see, says local host forty eight ninety. So now you can imagine this is something that could be on a custom domain.
12:50Right? So if you're, uh, creating a portfolio website for instance like this one, you can certainly put this and have Claude Fables say, hey, go ahead and now post this or, uh, publish this into a particular custom domain. So this is something that you can either do it for yourself and like I mentioned, if you are an AI agency owner or somebody who's offering this as a service, this is an incredible opportunity for you to take advantage of this and sell these as services.
13:15Right? So, I I mean, portfolio upside is something that everybody needs. Right?
13:18And now you can just upload one image of yourself. So if I go to my closet, let me show you. So this one's the cinematic website that I created.
13:26So I said, build me in a more winning cinematic three d scroll personal portfolio upside for me. I put my name, studied the style of awards site of the year. Right?
13:34So I give it a couple of references, huge bold topography, cinematic scroll, visuals. I said generate everything with Cdance two point o model on the Hixfield MCP and then, uh, you know, basically similar to what we mentioned in the other one as well.
13:48And then I went ahead again, same thing, use Higgs field to generate my images. All I did was just upload an image of myself, and then I went ahead and created all of the videos and images that you're seeing right here.
13:59Right? And, again, all of this is AI made. I didn't do anything manually.
14:04It was just one prompt and it was able to generate all of this. So, like I mentioned, go ahead and play around with the prompt back here. Right?
14:12Take a look at this. If you want to create your own, um, portfolio personal portfolio website, can just copy this.
14:18Oops. I didn't zoom in too much. You can just basically copy the portfolio one right here.
14:23There you go. It's right here. Right?
14:25So all I do is build me an award winning cinematic three d x I. And then this all you have to do is just replace this with your name. Right?
14:32And it will create something similar to that. And, obviously, you can always go back and forth with Claude and ask Fable to change something if you don't like anything. It's really good at editing, uh, an existing website or whatever it builds for you.
14:44So if you're building anything related to, like, a product or something like this for fun, right, you can, uh, certainly just kinda go back and forth and change everything. Anyways, well, hopefully, you guys found it helpful. Again, if you have any questions, put them in the, uh, comments below.
14:57I'll try to get back to you guys. If not, again, uh, you have access to the prompts. And if you're interested in learning how to monetize these or if you're new to Claude and Claude code, check out the community.
15:08Link is gonna be description. Again, hopefully, I'll see you guys there. If not, thanks for watching, and I'll see you on the next one.
The Hook
The bait, then the rug-pull.
The creator opens mid-reaction to an already-built site, then reveals the trick: Claude's Fable 5, wired to a video-generation MCP, can one-shot an entire cinematic 3D-scroll website — and he's about to rebuild one live.
Named ideas worth stealing.
07:40concept
One-shot cinematic site prompt structure
- Name the fictional brand/subject
- Describe the visual world in cinematic terms (zones, lighting, mood)
- Specify the generation model to use via MCP (e.g. Seedance 2.0)
- State the scroll/animation behavior wanted
The prompt pattern used for every build in the video: brand concept, visual direction, explicit model/MCP instruction, and animation behavior, all in one message.
Steal forany AI-built landing page or portfolio site prompt
How they asked for the click.
VERBAL ASK
15:02link
“if you're interested in learning how to monetize these or if you're new to Claude and Claude code, check out the community. Link is gonna be description.”
Soft CTA delivered at the very end after full value delivery; also cross-promotes his Skool community and a free prompt pack referenced earlier.
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.
