Claude Code + Nano Banana 2 + Kling = $15K Animated Sites

Hey, I just built these four websites in about 15 minutes or so, and I wanted to share them with you because they all have really cool 3D sexy scroll effects. So, this is one for headphones. This over here is one for uh restoring our forest with a cool 3D globe in the background. This one here has sort of like an interior design vibe with uh a blowup of a house in the background. These are all assets that I generated with AI. This one over here is sort of like a rotating space station look. And

hopefully you guys see these are all really, really clean. So, the reason I want to make this video is because I want to show you how easy it is to generate websites like this. A few years back, this would probably be5 to $10,000 a pop. And I know that because I used to sell websites for a living. Um, now you can literally do it in less than 10 minutes for somewhere around $2 to $3 in tokens. And it's way simpler than everybody else is making it out to be. You don't have to hop around like 30 different platforms. There's really just three steps and I'm going to show them all to you right now. Okay, let's do it. So, in a nutshell, our flow is going to be as follows. We will write a few bullet points into Cloud Code to tell it what we want. Afterwards, we're going to use a skill created by a really cracked 16-year-old and share it on Twitter, which I'll run you guys through. Then, we generate an exploded view or some sort of animated asset using a model called Clling 3. 0. And then, finally, you just integrate onto the site and push live. So, the taste skill is really straightforward. There's just an open repo here that basically instills a bunch of high-end like website design principles and then design schematics. Um, this is how you get really easy, high-quality oneshot websites from a simple cloud code prompt. So, I actually just built a quick example here um for an interior private jet design business.

I haven't changed anything on this website. I literally just one-shotted it and then, you know, it built this sort of design. So, this skill just standardizes a few things like spacing, high-end luxury looks and so on and so forth. And then for the video generation aspect, I use this model here called Clling 3. 0. Um, I access it using a platform called Higsfield. It takes me literally just like 3 minutes to create a bunch of animations. And you can see what I've done here is I've created tons for things like rotating globes. Um, you know, this is that little spaceship analogy. I've done a bunch more spaceship stuff as well for other design websites and so on and so forth. and then basically I just combine it using cloud code in two seconds. Let me show you how to actually do this. And as mentioned, it's going to be like $5 in tokens. It's not super complicated. What you need first is you need claude code running in some sort of like IDE platform. Okay. Now, I have it uh set up on this tool called anti-gravity, which is super straightforward. If you don't know what anti-gravity is or how to get it, just head to the top right hand corner of this video. I'm going to link a step-by-step guide on how to set it up, as well as what all the freaking icons mean and how to communicate with it. But assuming you have it set up, it's very straightforward. All you

have to do is first you tell the model about Leon's skill. So I'm just going to head back over here, copy this link, and then go straight over to my anti-gravity, and I'll say use this skill to design a high-end website about interior design. From here, Claude Code is going to fetch the skill repository to understand what it provides. And I'm just going to give it a good 2 minutes or so to actually do the full website design. And that's how easy and straightforward it is. Then all I'm going to do is I'm going to head over to Cling. I'm going to say, "Generate me a high-quality 3D render style video of panning through a 3D interior design scene. Make the background white. Make the asset super high quality. This should read like something you'd see on a website or a landing page. My model is going to be Cling 3. 0. I'm going to have it set for 5 seconds. I'll do a 16 by9 which means it's going to be wider than it is tall which kind of makes sense because it's going to be on my landing page. Then the quality is going to be 1080p which is sort of like the max that you can get. Now 7. 5 credits to be clear is pretty affordable. If I just go to Higsfield pricing over here in terms of pricing this is pretty affordable. I mean if I go down to the pro plan it's 30 bucks for 600 credits. Um, if I go 7. 5, which is how many credits I spent on that, divided by $600, then I multiply it by $29, you'll see the actual amount, which ends up being about $36. And so, you know, realistically, I usually recommend doing this two or three times because you can pick the best video output. Um, also, it also depends on like what you're going to be using. I'm going to insert a few more animations on this website to make it like super clear how sexy it could be. But yeah, I mean like that's what, three or four bucks realistically. Um, after that you do are you are going to have some spend in terms of your cloud code usage. That ends up being like another dollar or so. And then the way that I personally like hosting these is totally free, which I'll show you guys how to do in a sec. Obviously play around with um, you know, styles and the prompts and stuff like that. I'll give you guys a good one that works really well for like expanded design and blowup images, but um, yeah, that's honestly enough for this website over here with the rotating globe. I'll show you guys what I use just while that loads. Um, it's pretty straightforward and easy. Um, I think I just said globe rotating in the exact same place. Center of mass should not move, just rotating perfectly on its axis. Uh, what I did is I went on nano banana, generated an image of a globe, and then I just fed it in and then said that. You guys can also just oneshot it like I'm going to do over here with this interior design thing. Okay, so what do we have here? We have some cool like panning interior design. I mean, this looks really clean, right? I like this quite a bit. From here, I could actually just download this whole thing. Okay, and then I could open this up in another folder. What I'm going to do is just verify that this plays back the way that I want it to. And it does. You know, I like that it's in sort of a white room. It's super clean. Uh what I'll do next is just go over to my Finder. And I'm just going to rename this. Let me just sort by date added here to interior design. Then I'm just going to say, "Hey, I want you to take interior_design. mpp4. " And then make it the background image of our hero header. Then um center the hero header so that it like looks really clean and then apply some sort of like inward masking gradient so that the animation background doesn't interfere with the background of the um of the website. Let me just make sure it's interior design mp4. Cool. So now it's going to just look for interior design mp4. Uh it's not going to find that in my main file directory. I think it'll find that in downloads. Let me just say downloads. Once it has that, it will actually go through the whole process of sticking that in my site. Okay. And now we obviously have like kind of a clean looking um view here, right? It's pretty neat. Uh what they did is they actually I think tied this to my mouse position as well, which is why sometimes it kind of like moves around. And I mean for a lot of people this might be enough. I don't know like maybe you guys are cool with this. Um I think this is pretty sweet, but I actually want to add more to it. Um what I want is I want as I scroll down there to be some sort of like blowup interior 3D design animation. So what I'm going to do is first and foremost I'm going to change this we could see the text. So, I'm just going to take a screenshot of this just like follows. Go back to Cloud Code and I'll say, "Hey, this looks fantastic, but I'm having trouble seeing some of the text. Uh, just make it more prominent so that I could actually see what's going on. The subtext is super small as well. Let's say small and hard to read. Okay. And then while all that's going on, I'm going to head back over to here. I'll say, "Generate me a high quality exploding view diagram of a home to showcase the interior design component of a service. " no text, uh, white background. Um, it should explode in all directions, uh, including vertically and horizontally, and none of it should go outside of the bounds of the video itself. I'm then going to maybe diagram isn't, uh, maybe I'll say animation of a home. And then I'm going to save this and then I'm just going to wait for this to finish and then I'm going to do the same thing. And one thing you can do if you have a lot of credits like me is you can actually just generate two or three of these simultaneously. And that just improves the probability that the final

result will be what you want. Okay, so we have our video here and as you see things are sort of blowing up and expanding. I think this is really cool. So what I want now is I basically want to download this. Head to the bottom right hand corner, click download and then I'm going to go over here to where it says the file and then I'll actually just go here and then say interior design exploding view. Then I'll say great, I have interior_esign_exloding_view. mpp4 mp4 in download slash. I want you to take that and then create a scroll animation immediately underneath the hero header. As I scroll through, we should rife through two or three sections of text that expose our design skills. And then it should also um show the exploding view frame by frame as we go. Just going to pump that in. And I think that was the file name. Let me just double check. Yeah, it is just with caps. Uh so what's going to do is a locomotive scroll sequence. It's going to go and copy the video. Now you can see it's now adding some scroll reveal logic. pretty straightforward and easy. And then uh I'm probably going to have to adjust the background color as well. I'm seeing that it's not the exact same as my website, but that's okay.

And you can see the actual website is set up. Now, there is a line here, which I will fix. But now, as we scroll through, looks like it's a little rough. The actual animation itself, but we do have the text that's sort of in the middle. Looks like it applied some sort of shadow to it. As I scroll through here, we're basically like going through one frame at a time. And yeah, this is more or less what I want. I just don't like how choppy it is. So, I'll show you guys how to fix up the choppiness, too. But the other thing that I want is I basically want, you see how the background here is kind of like significantly darker. The reason why that happens is because the mask that it's applying, like the little fuzzy gradient, isn't making it all the way to the top. So, I'm going to go back and I'm going to say, hey, there are two problems. The first is the fuzzy gradient is uh not strong enough. And so, we see a bunch of dividing colors between the top and then the bottom. So, make sure to make the gradient a little bit stronger on the top and the bottom. The second thing is it's really laggy. So, just fix up the lag. Make it load significantly faster. Isn't that wild how you could literally just say make it load significantly faster in 2020. Insert current year here. I was told not to discuss whatever the current year is by YouTube consultant in case people watch my videos in a few years. I think in this case, that's not really going to be a problem. But anyway, look at what it's doing. It's going to extract the frames as optimized JPEGs and uh you know, those are basically like individual image files. And then it's going to tie every individual image file to the scroll position. So, it's going to be way faster. And then we'll also get some pre-loading. As a former web developer, some of the stuff that this thing does blows my mind. It would have taken me like 3 days to do what this just did in 30 seconds. Okay. So, now as I scroll through, you see it occurs significantly faster, which I like. I think um we could still optimize the hell out of it a little more. Still have a little bit of lag. also add some sort of um overlay to the text because right now it's very difficult to see and uh it just kind of collides with the animation. Okay. And then let's just make sure that the top still works. Okay, perfect. You see how there's like basically no difference between these two. This is exactly what we wanted. So yeah, I mean like more or less this is it. Um I think realistically I'm also going to see if maybe we could widen this or if we could just phase in the text itself alongside the actual home exploding view because that sort of thing is pretty cool. And then, you know, after we make it down to the bottom, you could see here that, you know, once we have this section, it then ties to the actual explo exploding view, right? Okay, this is a lot better. Yeah, I really like this. This is much cleaner. And it's also way faster, too. And uh yeah, I think this is more or less it. I mean, like this is what I wanted the whole time, right? So cool. And then obviously we have the rest of the website underneath and stuff like that. So listen, I mean, like, you know, this is uh running two videos, right? Not two videos, but one video up at the top and then we have like the JPEGs down here which are being preloaded. So, this is not going to be like the least computationally intensive website, but do you guys see how easy it was for me to optimize it? I literally just said, "Hey, make it faster. " And then I made it faster. You can do that three or four times um and then assess whatever the quality decreases to get it to that fast point and then eventually have like a really clean look despite it also um you know being pretty heavy assetwise. I think what I'll next do is I'm just going to tie up the uh the top uh hero header image here to make that a little bit faster and then we'll be good to go. Hey, just make the hero header a little bit faster as well. I think it's pretty big right now. Okay. And it looks like it just compressed it from 5. 3 megs down to 252 kilobytes. Cool. So, this is a lot faster. This is so much cleaner. And you see we don't have like weird jankiness either like we did before. Um and then as we make it just to that point where the first frame starts loading, you know, keep in mind most people are going to scroll through it approximately this pace. I would take

it. Um yeah, everything just loads really cohesively and is very pretty. I could adjust the design, make it look however the heck I want, but yeah, we just oneshotted it. Okay. And then the last thing we need is we obviously need to make it live, right? So, what I'm going to do next is go back to my agent and I'll say, "This looks awesome. I want you to make it live on Netlifi. " Netlefi is a service out there that basically allows you to host your websites completely free on their free plan. So, free forever. You can deploy from AI, Git, or an API. Unlimited deploy previews, build with whatever the heck that means. I don't even know. and then 300 credit limit per month with the global CDN. The global CDN just you guys know means that people in all different parts of the world will be able to access your website quickly because they won't have to make a request like you know from uh I don't know somewhere in Indonesia all the way to somewhere in the United States. They cache the websites and its files at these thing called edge nodes which keep your website there um which allow it to load way faster. Okay. And then I'm just going to head back over here. Um literally give this button a click and we now have our website live. I mean, this is actually live on the internet at this link at mararin. netifi. app. So, just for shits and gigs, I'm going to leave this up and you can actually access this at any point um to see sort of what this website looks like and you know how it works. Um, another thing is I haven't mobile optimized this site, but you guys can mobile optimize this really quickly. Obviously, all you really need to do is say, "Hey, mobile optimize the site three or four times. " The model will do it. Okay. So

you know, I made this video because everybody in their mom's just like, "Oh my god, these website design frameworks are the reason why we're capable of doing this these sites so well, and then they show you like 35,000 steps, and it's a massive pain in the butt. " To make a long story short, it is nowhere near that complicated to actually make a nice high-quality, sexy looking site, as you guys see here. So, hopefully you appreciated the video. Uh, if you like this sort of thing, please subscribe. Something like 73% of viewers are not subscribed for whatever reason despite the watching all of my content on repeat. Um, if you are in the 73%, you would be doing me a big solid like. Uh, and you can also get all the prompts and everything like that for this video down below in the description. I'm giving all that stuff away for free. Have a lovely rest of the day.