Fable 5 and GPT 5.6 ONE SHOT a $10,000 Website With This Skill
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00This entire website was one shot by Claude Fable 5 in a single skill.
00:00:05It's not just one scroll animations, it's several scroll animations that have been clipped together
00:00:10to give you a smooth, high quality, coherent experience.
00:00:15This is absolutely wild.
00:00:16This is an extremely premium product and I'm going to show you the skill that lets you do all of this.
00:00:22On top of that, I will be showing you how I not only did this inside of Claude Code,
00:00:25but we'll be demoing the exact same thing inside of the brand new GPT 5.6 Sol
00:00:31because why stop with just one AI tool these days?
00:00:35And this thing is really cool.
00:00:37Like I said, if you try to do this manually without this sort of scroll animation skill I have found and improved,
00:00:42you know how difficult it is.
00:00:43You're making multiple videos, you're getting the starting frames, you're trying to make a matchup,
00:00:47you're taking all the frames out one by one by one, it's a pain in the butt
00:00:50and this makes the entire process extremely easy to execute.
00:00:53Now the real credit for this skill goes to Peter Wang.
00:00:55He's the one who made the original version.
00:00:57I found it on Twitter and he was nice enough to open source this.
00:01:00So his scroll world will be linked down below so you can take a look at it.
00:01:03Now what I did is I forked this thing and I made a few improvements,
00:01:07namely introducing budget tiers so you can do this without having to spend as much.
00:01:10We don't necessarily need six different scenes for our website
00:01:14and I included a lot of improvements on the mobile version of this and sort of SEO related stuff.
00:01:19Now the way these scroll animations work big picture is we start with a single image.
00:01:23That's what you see right here.
00:01:24We then take that image and we turn it into a video.
00:01:27This scroll animation at one point was a video, but we then take all the individual frames out of the video using FFmpeg
00:01:34and then we associate that with a position that you, the user, are at on the website.
00:01:40Now there's a lot more going on behind the scenes to make it a smooth experience and so it isn't completely janky.
00:01:46And on top of that, we're making sure all our scenes sort of reference each other when we build them.
00:01:50That way they all look coherent.
00:01:52Like this all looks like it was from some singular story.
00:01:55As for how we're actually generating the images and videos, we're doing that through the Higgs field MCP.
00:02:00And we can do this both with cloud code and codecs.
00:02:02We never have to leave the terminal.
00:02:04It's calling all those image models, namely GPT image two, and all the video models, namely seed dance, through that MCP or the CLI.
00:02:12Now to connect those tools to your AI agent of choice, you're just going to go to Higgs field, you'll go to MCP and CLI, and you're just going to follow these steps.
00:02:20You're just going to copy the URL for the MCP and then do the authentication process.
00:02:25The only thing you need after that is the skill itself.
00:02:27And I will have my version linked down below as well.
00:02:30You can just copy the URL, give it to Cloud Code or Codex, or you can do it as a plugin.
00:02:35Either way works.
00:02:36Now, as I said in the intro, I'm going to be demoing this inside of Codex with the brand new Sol 5.6, but this is what it looked like inside of Cloud Code.
00:02:44It's the exact same process.
00:02:46You go through an interview, you tell it what sort of website you're trying to build, what you want each scene to be, and it's going to walk you through step by step.
00:02:53And it's going to make sure like, hey, do you like this image before it actually goes and creates all the videos.
00:02:57You don't just run the skill and all the videos just show up and you had no sort of like say in the process.
00:03:01So it really holds your hand throughout the entire thing.
00:03:04So inside of Codex, I have called the scroll world skill.
00:03:07So I just said forward slash scroll world.
00:03:08And I said, I'm trying to create a website for a boutique Japan travel brand.
00:03:14And the general art direction I want is we're going to kind of go with like an origami style.
00:03:18Now, if you don't know what style you want, you can just have a back and forth with AI and it will kind of ask you several questions.
00:03:25I already knew ahead of time kind of what I wanted.
00:03:27So don't worry if you don't have an exact idea when you show up now, after you give it some creative direction, then it's going to ask you, what do you want to do in terms of the budget?
00:03:36And what do you want to do in terms of mobile budget wise?
00:03:38It's saying, how many scenes do you want the reference?
00:03:41This was six scenes.
00:03:43This is a significant amount of video, and it's actually a pretty long journey from beginning to end.
00:03:48This is probably overkill for most people.
00:03:50On top of that, this is going to cost you a lot of Higgs field credit to cost me about 800 at the end of the day.
00:03:56So if you're not on one of the more expensive plans, you probably want to stick with four scenes, I think is like a great sweet spot.
00:04:03The next is what you want to do with mobile.
00:04:04So you can do everything from just sort of like cropping it safely all the way to a full portrait chain, where it's going to create extra videos specifically for mobile.
00:04:12So you have some room to work with, like how deep you want to go on that front.
00:04:15But for this video, we're just going to do lean and crop safe.
00:04:20So sort of the cheapest options and understand you could do less scenes as well.
00:04:24You could get it down to three, this is just what it offers as a default.
00:04:28But then it's going to take you through the journey proposal and say, hey, this is what each scene is going to look like.
00:04:32And it's like, this is how many generations it's going to take.
00:04:35So it's going to take total four image generations, four scene dive videos.
00:04:40There needs to be a connector between some of the videos and some crossfades.
00:04:43So total it's saying nine generations and it gives you an expected generation time, which usually is pretty conservative.
00:04:49It doesn't usually take that long, even though we're talking about AI video.
00:04:52And so once you approve that, the next thing it's going to do is generate the anchor.
00:04:56The anchor is going to be that starting frame.
00:05:00And we talk about that starting frame.
00:05:01We're talking about something similar to this in the background.
00:05:03It's just going to be a still image.
00:05:04And it's on you now to be like, OK, I like this.
00:05:06This is the art direction that's going to dominate throughout.
00:05:09Or no, let's change some pieces.
00:05:11This is the part you really have to nail, because if you don't like it and you say yes, everything's going to be based on it.
00:05:17So here's a look at the image it created.
00:05:19And I like it now.
00:05:20You probably realize this already.
00:05:21If you are doing all this through Codex and through Sol, well, it has image generation.
00:05:26We don't need to send any requests to Higgsfield to create images with GPT Image 2
00:05:31when we natively have that ability inside of Codex.
00:05:34So you're going to have Codex do that natively, but you still are going to have to send it to Higgsfield for the video generation.
00:05:41On the flip side, if you're doing this in Cloud Code, obviously it doesn't have image generation.
00:05:44So Higgsfield has to carry the load the entire length of the way.
00:05:48But here's the image.
00:05:50I like it.
00:05:51So what are we going to do?
00:05:52We're going to say, hey, this is great.
00:05:55Can't type.
00:05:57Move forward.
00:05:59So after 32 minutes, it's completed our website.
00:06:01We got four different scenes.
00:06:02It took 10 generations.
00:06:04And now it's up on our local host ready to go.
00:06:06So let's take a look.
00:06:07So here's our Japanese tour website.
00:06:08What we're going to do is we're just going to scroll through it and kind of just get a once over.
00:06:12So people traveling, got the subway.
00:06:15We move here to the house.
00:06:17It opens up.
00:06:19Then they go to the hotel.
00:06:20It unfolds.
00:06:22Kind of cool.
00:06:23And then we have the bird over here, which starts to fly.
00:06:28So overall, what do I like?
00:06:30What do I don't like?
00:06:31I like the visuals.
00:06:32Like I think this looks super cool.
00:06:34You know, I think individually within each scene, I like how each individual scene progressed.
00:06:38Like this part where the subway comes in.
00:06:41Awesome.
00:06:41My problem here is the transition where we go from scene one to scene two.
00:06:46Pretty hard cut.
00:06:47Maybe you want a hard cut.
00:06:48Kind of, I guess that's, there's some creative direction there.
00:06:51But that's something we could change.
00:06:52Same thing here.
00:06:53As we go from scene two, incredible detail, to be honest.
00:06:57But as we go from scene two to three, again, another hard cut.
00:07:01Versus scene three to four, I think this is an awesome transition.
00:07:04So this opens up.
00:07:06Boom.
00:07:06They're in the hotel.
00:07:07But if you watch in the background, notice the scene number four, like coming into frame.
00:07:12Like at first it's blurred, pops up, gives like very much like this 3D effect.
00:07:17And gives depth to the website.
00:07:19And then it seamlessly transitions to scene four.
00:07:22Like that is great.
00:07:23If it had that going from scene one to two and from two to three, I would be super happy.
00:07:28That's my primary complaint with this.
00:07:31But everything else looks good.
00:07:32And being able to add those sort of scene transitions and smoothing out, I don't think
00:07:35would be too difficult.
00:07:36Because if you compare that generation, which again was sole GPT 5.6, to what we created
00:07:41in Claude Code, the scene transitions are definitely a bit more sleeker here.
00:07:45So this is scene one, right?
00:07:46So like these things push out of the top and it is like a seamless transition to those
00:07:52being like, well, as close to seamless as you get to those being like wires here.
00:07:56Same thing right here.
00:07:57We go in.
00:07:58Oh, boom.
00:07:58It opens up.
00:07:59And then we just go over the top to the next scene.
00:08:01So scene to scene with the Fable 5 transitions, I think we're better.
00:08:06Same thing here.
00:08:06Boom.
00:08:07We're here.
00:08:07Zoom out.
00:08:08Next scene.
00:08:09So that's my chief complaint.
00:08:11I would definitely give Fable 5 the edge versus sole 5.6 here.
00:08:15But like, this is a one shot, right?
00:08:18Like with a single skill.
00:08:19Like I'm very impressed in general with how well the skill's been, you know, created.
00:08:25This is awesome.
00:08:26Now, the next question becomes, okay, this is a visual spectacle.
00:08:29Can we make this into a website that's more functional depending on what you're trying to
00:08:33do?
00:08:33And I don't think that's a problem at all.
00:08:34I think the technical problems of creating an animated scrolling website like this that
00:08:38looks coherent and doesn't look janky and doesn't look low quality is pretty difficult.
00:08:43You know, if I asked you to just do this on your own, I think you'd have a lot of trouble
00:08:46and take a lot of time to get there.
00:08:47With this sort of base, I think it's really easy to then like, okay, like what are we doing
00:08:51with the text?
00:08:52What are we doing with the CTA?
00:08:53How are we actually pulling the user from the hero all the way?
00:08:56It's like filling out some sort of form.
00:08:57I don't think that's too difficult.
00:08:58I don't think we're like, you know, having to reinvent the wheel there.
00:09:01That's what every single website does.
00:09:02And being able to put that on top of what we have here, again, with Fable 5 and with
00:09:065.6 is not a challenge whatsoever.
00:09:09And the fact that this is just one skill in a one shot is kind of mind blowing.
00:09:13Again, if you want to do this on your own, three months ago, six months ago, nine months
00:09:16ago, it's kind of a pain in the butt.
00:09:18So again, shout out to Peter Wang for the original version of the skill.
00:09:21Both versions, both mine and his, will be linked at the bottom of this description.
00:09:24And like you saw, this is like super straightforward.
00:09:26You really don't have to do anything.
00:09:27You just need to show up.
00:09:28You need to invoke the skill.
00:09:29You need to give it some sort of creative direction, and it's just going to go to work.
00:09:32So that is where I'm going to actually leave you guys for today.
00:09:37Let me know, as always, what you thought about this in the comments.
00:09:40Make sure to check out Chase AI Plus if you want to get your hands on my Cloud Code Master
00:09:43Class and sort of more AI lessons just like this one.
00:09:46And besides that, I'll see you around.