Claude Opus 5 Builds $15,000+ Animated Websites (FOR CHEAP)

Anthropic just dropped Claw Opus 5 and it's phenomenal when it comes to generating animated websites like these. And on top of that, it is much cheaper to use than Fable 5 with basically the same power. So, in this video, I'm going to share with you an animated website skill that you can plug directly into Claude. I'm going to show you how to generate stunning visual animations like these using the Higsfield MCP and then turn them into stunning websites that you could either build for yourself, for your clients, or sell for thousands of dollars. So, first of all, let's talk pricing and then let's begin building. Now, let's quickly talk about pricing because this is the key reason why we might switch to Opus 5 as opposed to Fable 5, even if Fable is a little bit more capable than Opus. And the reason why we would use Opus 5 as opposed to Fable is due to pricing. So, right here, Fable 5 is $10 per million input tokens and 50 per million output tokens. Whereas, Opus 5 is priced at $5 per million input tokens and 25 per million output tokens, which is the exact same as Opus 4.8. And if you're thinking, Brock, that's just gibberish. In simple terms, it is half the price of Fable 5. So, we could still create stunning website designs without having to pay an arm and a leg while using Fable 5 and eating into your token cost with Claude. Now, there are three things we're going to be using in this video to generate these stunning animated websites in just a couple of minutes. So, let me explain them right now so you can understand what you're going to need to get started. First of all, we're going to be using the Claw desktop app. So, make sure to download it. And inside of the desktop app, we're going to be using clawed code. So come over here on the lefth hand side once it's opened up. Instead of clicking on home, we want to click on this code button. And when we click this, we're now going to see this interface right here. And this is exactly what we're going to be using. And on the bottom right, along with our little claw code friend, we get this new button that says Opus 5 along with being able to choose the effort level. Now, the next tool that I'm going to be using is Higsfield. And we're going to be using this via the MCP, which plugs directly into Claude Code. So, we could generate all of the visual, video, and image assets directly inside of Claude without us having to leave the platform. If you don't know what Higsfield is, it's basically an all-in-one AI creative studio with all the top AI image and video models at your disposal. So, we literally never have to leave this platform in order to generate all these crazy, stunning visuals that you're going to see throughout this video. And the third thing we're going to be using is this animated website skill that I crafted for you guys. This is exactly how I'm taking those visuals we generate inside of Higsfield and turn it into a stunning scroll animation website and you could download this resource for free. So, let me show you how to do that. So, first of all, there's going to be a link in the description in order to grab this. Then, what you're going to do is come here and just name a fair price. Just put $0 and click I want this. If you guys want to hypothetically pay me for this resource, just subscribe to the channel for more videos like this. Then, you're just going to put in your email address and click this button that says get. Next up, we're going to see this site and all we need to do is download this animated website skill in this zip file format. From there, take this and let's just drag this onto our desktop. Make sure not to unzip the file because when we upload it to Claude, it needs to be in this specific format. Now, I'm going to show you how to upload this skill into Claude. So, what we're going to do is we're going to come over to the lefth hand side where it shows customize and click on this. From here, we are going to see all the skills that we have already downloaded. And if you've never added one, let me show you exactly how to add one now. So come over on the right where it says add. Simply click on this and then let's click on upload a skill. Now let's take the animated website zip file that I downloaded and simply just upload this right here. I personally already have it downloaded, but right here you're just going to see a button that says upload. And make sure to click that. And then just like that, we now have our animated website skill uploaded. And we can go ahead and search it here just to make sure it's there. And here it is. If we click on this, basically here is the set of instructions breaking down exactly how to perform this task for us. I don't want to dive super deep into what this skill consists of. But basically, it's going to take the video that we create with Hicksfield. It's going to then separate it into multiple different frames in order for it to create the scroll animation that we're going to see on our website. If we were to just upload the video, it wouldn't have this scrolling animation that we want to add. So, it's very important that we have a good animated website skill for us to use in order to replicate this very simply. All right. So, now let's move on to the fun part and that is actually generating these animations using the Higsfield MCP. So, I'm going to quickly show you how to set this up. It's really simple to do. So, that way we could generate these visuals directly inside of Claude without us needing to leave the platform. First of all, what I'm going to do is come over to the lefth hand side where it shows customize. And then from here, we're going to come down to where it says connectors on the left right here. Now, what I want you to do is come over on the top right where it shows add and then we're going to come down to add custom connector. You're not going to find this in the browse connectors. So, make sure to select add custom connector and then I'm just going to call this Higsfield. Next, you're going to go to the link in the description to come to this web page. And from here, we need to select Claude. And then we want to copy this Higsfield connector URL. So, go ahead, click copy. Bring this back into Claude. Simply just paste it in where it says remote MCP URL. And then click add. And what this is going to do is it's going to connect to our account. So, we just need to click this connect button. It's going to bring us into our Higsfield account, which we need to have one in order to test this out. And then I'm just going to click on allow. So that way Claude can now generate images, videos, and then even pull those directly back into Claude. So I click this open Claude button. You can now see that we have Higsfield connected. And I'm personally just going to click on this button right here that says custom. And I'm just going to select always allow. So that way whenever I want to generate an image or a video or use these different tools that Higsfield has inside of Claude doesn't have to ask me every single time if it can go and perform this task. Now, in order to show that this is connected, I came here and I basically gave it this very simple prompt. I said, "Generate an image of a bird at sunset with the best image model." Then I'm just going to click send after I make sure to select Opus 5 right here. And then I'm just going to keep this on high because we don't need it to do super complex task and that's going to be enough for us to do this. Now, what you can see on screen is that the Higsfield MCP is now generating a couple of different images and what it's doing is it's using GPT image 2, which is the best image model from OpenAI. And one of the best parts about using the Higsfield MCP, since you have access to all the different image and video models, both Higsfield and Opus 5 are going to choose whichever model is best for whatever given task that is. And here we go. We now have this image of this bird flying at sunset. I mean, this is pretty good. Now, what we could do is directly inside of Claude with this Higsfield connector, we could animate it. We can edit it or download this photo directly right here. So now that we have Higsfield connected and we generated our first image, let's go ahead and now actually take a concept for an animated website, generate the visuals for that, and then let's turn it into a site. All right, so now let's talk about how to generate the actual animations that go with this website, then we're going to turn it into a physically animated website. Now, here is the prompt that I'm going to give Claude Code, and it's going to then take this and use this inside of the Hicksfield MCP. So, I said, "Generate an animated video of this camera with this reference image." And I uploaded this reference image of this camera right here. Then I said, I want this to be an animated product shot of a camera coming apart, almost as if it's exploding to show all the parts of the product. Use the Higsfield MCP to do this. So, I'm going to send that off. Make sure we have Opus 5 selected. And I'm just going to use high mode. And notice how vague my prompt is. This isn't some super hypersp specific prompt because Higsfield is going to take this prompt and optimize it in order to make the best video possible. All right, so now just a couple of minutes later, we now have this output from the Higsfield MCP. So let's go ahead and take a look at this. It obviously used Cance 2.0 as well as a 16x9 aspect ratio. And on top of that, it's 6 seconds long. But we could go ahead and make changes to this if we do not like the output. All right, so let's watch this. Obviously, the camera is kind of splitting apart, which is pretty cool. I think that looks good. There's some parts here that don't look perfect. Like for example, that little lens right there just kind of goes to the right. That looks slightly odd. But it generated another output as well, which I think this one looks a bit better. Yeah, that's super smooth. I think adding this to our website is going to look absolutely phenomenal. And what I could do is I could either download this directly right here, or I could recreate this if I want and make changes to it. But I think this is a really good starting point. Now, I'm just going to come back here, and this is my prompt. I said take variant B and use the animated website skill to generate a stunning site to show off this camera along with the specifications. So I'm going to click send. Obviously make sure I'm using Opus 5 here so it's able to use that model. It's going to be a lot cheaper. I mean it's going to be half the price of using Fable 5 in order to generate the websites. And after playing around with this quite a bit myself, I've noticed that the outputs are almost identical. And again, it's half the price, which is amazing. Now, while that is generating, I want to show you this other animated website that I created using the exact same process using the animated website skill as well as generating this graphic with Higsfield. So, this is basically just like this bullet that as I scroll is being stopped by this bulletproof like vest or bulletproof product. And the cool part about this is not only this animation that is kind of like visually pulling most of the weight for this website, but also take a look over here on the left. It actually breaks down like these cool little visuals. It shows the velocity of the bullet the first seven microsconds and then breaks down, you know, this cool little diagram showing what the bullet actually looks like as it speed is increasing. It even shows how the velocity is slowing down as it hits the vest in real time. I mean, this is a super cool looking site. And again, we follow the same exact process generating the video with Higsfield and generating the animated website with Opus 5. All right, so here's the output of the animated website. I think this looks pretty solid. Obviously, the animation looks really good. It looks pretty smooth. One key thing here is as I scroll, you can see on the left it kind of breaks down all the specifications of our camera, which is really cool. And then at the end, it kind of has this like little call to action in order to buy the camera. I think that this looks pretty cool. Honestly, I like the typography that it used for the website. And again, we generated this in one single prompt. Took one prompt in order to generate the animation as well using the Hicksfield MCP. We can get really creative from here. Now, let's say there's an app you want to connect to inside of Claude, but you do not find it in the menu. When you come to connectors, click on browse connectors, and you scroll through here, and let's say that the app you want to use isn't in this list of connectors. Well, I'm going to show you a quick hack that will allow you to connect to 9,000 plus different applications. So, odds are the app that you want to use, you'll be able to use with this simple hack that I'm going to show you using something called the Zapier MCP. This allows us to easily connect to any of the different tools that we want to use directly inside of Claude. And in order to show you exactly what I mean, I have this MCP server that I configured inside of Zapier that connects to my YouTube. So, it's able to post and pull information from YouTube for me, which I can't do directly inside of Claude. And then I even have my school community as well as Beehive Connected, which are two tools that I use to run my business every single day. So, while using the Zap Your MCP, I'm able to now perform actions across those different applications. And this is probably the simplest way to connect your different apps if there's no preset connector inside of Claude. And if you guys want to try it out, there will be a link in the description to sign up and it's very simple to use. All right, so I decided to generate a new visual in order to make it kind of the focus point of the website because I thought the other one was cool, but it wasn't super like visually appealing. So, I think this one is super solid. You can see that the camera comes apart and it kind of rotates around the different parts and then it kind of zooms back in and shows the camera put back together. I think this is a super cool looking website. Okay, I did this in about two different prompts and we obviously used the Higsfield MCP to generate this visual. All right, guys, there you have it. Generating animated websites using the Claude Opus 5 model. This gives us some of the power that Fable 5 has when it comes to amazing website designs at half the price. So, I think it's really worth it for you to test this out instead of going straight to Fable and wasting your tokens. If you guys enjoyed this video, make sure to subscribe for more content like this. Leave a like, comment what you thought, and I look forward to seeing you in the next video. Cheers.