WEBVTT

00:00:00.000 --> 00:00:56.690
So you know how on Apple's site, we've got the product, we've got quotes come in, we've got dynamic elements like this. We can see sort of like the deconstruction of the product itself, and all of these features on the website give it a super professional and branded feel. And I'm sure that some of you guys have realized by now, but this website is not Apple. This is one that I built with Claude code using this new skill in like thirty minutes. So I'm gonna show you guys today the exact process to build sites just like this that are super professional, that have these really nice animations going on, and they just feel awesome. I'm also gonna be giving you away the skill and everything that you need to do this for completely free. So that even if you've never opened up Cloud Code or, you know, built a website before, you will be able to do exactly what you're seeing on screen. So let's not waste any time and get straight into the video. Okay. So we're using Cloud Code in Visual Studio Code. So if you don't have that, just go to the browser, type in Versus Code, and download this for your operating system. It's completely free. Once you're in here, you're gonna go over to the left, which is the extensions button. You're gonna type in Cloud Code and install this one. It will then prompt you to sign in with your Anthropic subscription.

00:00:56.850 --> 00:02:29.570
And by the way, do have to be on the paid plan, so either the pro or the max in order to use Cloud Code. Now once you've got that installed, you're gonna click on this button up here which is the explorer, and you need to open up a folder. So just go to your desktop, go to your documents, open up a brand new folder, just call it, you know, three d website testing, and then open it up right here. So here you can see this is the product that I've been working in. I've just called it animated websites. And what I'm gonna do is give you guys all of the skills in here that you need in order to just replicate what I'm doing. I'm giving you guys all of that for free, of course, so that once you have that, all you have to do is give Cloud Code a video. For example, here we have a video of a camera. You can see what happens is it just basically spins around and then it kind of like goes into x-ray mode and we can see inside the camera. And now that Cloud Code has that, you just say, build me a website for this video. And what you get is something like this, where we have Vanta one. You can see it looks like a product landing page. As we start to scroll down, the camera is revealed. And as we continue to scroll more, we get dynamic text that comes through as well as the actual camera animation starting. And the crazy part is I didn't give it any of the copy. I didn't give it a color scheme. I didn't give it any information about the product. Obviously, you could. But what it will do is it will just basically create this for you and then you can go ahead and make the tweaks that you need. So two skills that you're gonna need to go grab are the front end design skill, which is the one that I grabbed from Anthropic. It was an official skill, but I changed it a little bit. So this is like kinda my version of the front end design skill for this specific use case. And then you're also gonna need to go get the video to website skill. So both of these skills are literally just markdown files. They're markdown files that I've worked on that tell Claude code the best practices for creating these animated three d websites.

00:02:29.650 --> 00:03:10.305
And you can get these skills for completely free by going to my free school community. The link for that is down in the description. You'll go to the classroom. You'll go to skills section, and you'll be able to find all of them right in there. And literally all you'd have to do is take them from your downloads folder, drag them over here to the left hand side, and then just basically tell Claude, hey. Set up this folder so I've got my dot Claude. Within that dot Claude, I've got a skills folder. And then within that skills folder, here are my two skills I need you to use. And it should look something like this on the left hand side. Now before you get too overwhelmed, you've never used Claude code before, it's super simple. Right here, we have our actual agent that we talk to and have conversations with. And over here, we just have folders. So I just showed you where the skills live, which is in a dot cloud folder within a skills folder.

00:03:10.465 --> 00:03:15.665
But then the other stuff in here is super simple. Here are all the video files that I've used to make the previous websites.

00:03:16.065 --> 00:03:44.265
And then for each website, it created its own folder. So for the camera website, it has all this information. For the watch website, it has all this information. And for the YETI website, it has all that information as well. But anyways, if you just follow the steps that I take in this video, it will all make sense and you will get a nice output. And by the way, if that's a bit confusing, then definitely go check out my skills video, which I will tag right up here. And then once you understand that, hop right back over here. Alright. So I'm gonna walk you guys through this process step by step so you can see exactly what I did to create these really cool animations.

00:03:44.345 --> 00:04:12.115
And what you need to understand is that all of these animations that you're seeing on the sites and all the other ones that I've shown, they're just videos. And so all I did here was had Nano Banana generate two different images for me and then turn it into a video. So for example, that first one with the Apple Watch is just the Apple Watch kind of opening up and then exposing all of its layers. And then when I wanted it to close back up, I just prompted it to do the opposite. And now we have the second one where it goes from that end frame and then kind of like folds back in on itself and reveals

00:04:12.195 --> 00:04:42.565
the Apple Watch. So now that you understand how simple this really is, let's go over to Nano Banana and start making some images. Okay. So the way that I like to use Nano Banana, whether I'm doing it in a playground like this or over API, is with key.ai because I found that it's really fast and it's, like, really cheap. So I went to Nano Banana two, the new version of Nano Banana, and I came in here and did a 16 by nine aspect ratio image. And I said I need a professional studio grade image of a blender. It should be against a plain all black background with no shadows, no hands, no reflections.

00:04:42.725 --> 00:05:09.005
And this is essentially going to be our start frame when we make that actual video. So then I saved that output, dropped it in here as an image input, and I just said the exact same prompt, but this time it should be filled with fruit and juice. So now we have our start frame over here and our end frame, and we just need to animate it so that it actually looks like fruit and juice is, you know, being dropped and poured in. So then I found the best results using Cling three point o, which once again you can also access in this key.ai.

00:05:09.005 --> 00:05:31.545
So we give it the start frame, we give it the end frame, and here's what I did for my prompt. I actually went over to Claude and I gave it the start and end frame and said help me make an AI video prompt where I want the lid to float off, I want fruit and juice to be dropped in, and then I want the lid to be put back on. No shadows, no hands, no reflections. It spits out this prompt. I put that into cling, and here's the result. I haven't watched this yet, so hopefully it's good.

00:05:35.465 --> 00:06:07.515
Okay. Interesting. I mean, obviously, we maybe wanna fix that a little bit, but I'm fine with that for the sake of the demo. The fruit and juice kind of just magically appear from nowhere, and now they're in the blender. Okay. So I downloaded that video. I'm just gonna drag it over here to the left hand side, and you can see right now that this video that Cloud Code is looking at is the exact one that we just generated together. So this is what it's gonna use. It's basically going to take that video, pull out like a 120 frames or however many frames make up that video, and then it's gonna have all of those saved. So just as an example, if I go to the frames from the watch, you can see it created

00:06:07.810 --> 00:06:41.540
over a 100 WebP pictures from that actual video. And it's kind of like stop motion animation where each one just changes a little bit, and as you go through, the actual video starts to form. So it basically associates each of these frames with a scroll position. So as you scroll down, it kind of like reveals itself or if you scroll backwards, it goes the other way. So now I'm gonna make sure that my agent is on plan mode, which basically means it won't actually do anything. It'll just read things and it will help create a plan, which is going to result in much better websites on the first try. Alright. So I started off by saying I just dropped in a video called blendercling.mpfour.

00:06:41.540 --> 00:07:27.245
Help me create a one page product landing page for this product. It should be modern. It should feel very professional. It should have smooth animations and design throughout. All of the text should be easy to read, and the background of the website should be completely black. It should be a dark mode, and it should blend into the background of the blender cling image so that it looks like it is one, you know, fluid web page. So if you were really doing this for a product or for a business, you'd probably wanna prompt it with some more information, but I'm just gonna show you guys for now how this works. I'm gonna shoot that off in plan mode, and you will see that it naturally comes back and asks me some questions. Now if you're wondering how I was able to speak right into my Claude code, then check the description for my tool. And one thing you'll notice once you read through the way that this works is that you will have to have FFmpeg,

00:07:27.245 --> 00:07:46.775
which basically just extracts frames from videos. It's a free tool, and if you don't have it installed, a ClaudeCode will help you install it. It'll just do it for you, so don't worry about that. But now you can see it's asking us some questions. So first one is what is the product name and brand for this blender? And I'm just gonna go ahead and say create fictional branding just like it did for the Vanta one, which was the camera website.

00:07:46.855 --> 00:08:26.545
And it says what kind of content sections do you want. I'm just gonna go with the full premium, which is what we've been doing for the other example sites. But, of course, this is where you could customize it a little bit to fit your needs. And if you've never used Cloud Code before, what's happening here is you are basically able to look at everything that Cloud Code is thinking and doing. You can see a task. You can see a glob. You can see what it's reading. And you'll see later when it actually starts implementing things, it'll create itself a task list or a to do list, and you can actually watch it fulfill those to dos. So it's really cool. Okay. So now we are at the point where the plan is done. We've got Obsidian Vortex premium blender landing page. We've got the brand identity here. So Obsidian, Obsidian Vortex. The tagline is annihilate everything.

00:08:26.865 --> 00:08:32.540
The accent color is blood red, and we've got fonts. We've got the video details, implementation steps.

00:08:32.780 --> 00:08:36.860
So here is the FFmpeg thing I was talking about that will extract the actual frames.

00:08:37.500 --> 00:09:35.230
Then it will build the HTML, then it will create all these different sections. It will build the CSS. It'll build the JS, and then it will test locally. So before this actually goes anywhere on the web, we will test it right here. And then if we're good with it, we can push it to the web. And I'll show you guys that at the end of the video. So I'm actually just gonna make one more suggestion, and then we'll let it start building. I wanna say this looks pretty much there. There's one thing that I forgot to mention, is that I want the product video to be kind of right aligned. So I want it to be on the right two thirds of the page and all the text can be left aligned. And this is just to show you that you do have control over the way it looks. So I'm gonna go ahead and shoot this off. It's gonna come back with another plan and I'm gonna accept it. And then I'll check-in with you guys when we have our first iteration of this website done. And by the way, now that I've accepted the plan, I put it in bypass permissions mode so that it can just continue to run without stopping all the time to ask me questions. Here is the to do list that I talked about. It's gonna go through and make sure that all of these are good to go. Alright. So in just a few minutes that came back and it says, as you can see, the site is live at localhost.

00:09:35.230 --> 00:09:46.265
Open it up in your browser and check it out. So let me go ahead and open this up and we will see what we got. You just saw the Obsidian loading. We've got Obsidian vortex. It looks really clean so far. Now let's see what happens when I start to scroll down.

00:09:47.065 --> 00:09:59.590
So we see the blender starts to appear. Nice. And as I continue to scroll, we have we didn't build another blender. We engineered a force of nature that reduces anything to nothing in absolute silence. As I keep scrolling, we can see that the fruit is starting to appear.

00:09:59.910 --> 00:10:01.830
So we've got meet the obsidian vortex,

00:10:01.910 --> 00:10:07.750
machine from aerospace grade stainless steel, blah blah blah. There's also text in the background as you can see that says

00:10:08.150 --> 00:10:12.955
I think it says obliterate everything. So that's pretty cool. We've got brushless motor. We've got

00:10:13.675 --> 00:10:31.400
titanium blade array. So that actually kinda pops in a little bit late as you can see. As I'm scrolling, it pops in a bit late. This one comes through, and then we've got these stats that come up really nice. And then we have the last blender you'll ever own, and then I should have the CTA right here which is own the force, preorder the Obsidian Vortex.

00:10:31.480 --> 00:11:09.965
So let's just actually think about that. I dropped in a prompt that said, here's a video. Create a one page landing page. That was basically it. It used the skill and it created a plan for us, and then we actually had a website where pretty much everything is perfect. Obviously, there's a few things that we need to iterate upon, but this is super super clean and the animation I think looks really good. But the the biggest problem that I'm noticing is right here when we scroll to number two feature, we really don't get to see it unless we scroll back down. So what I'm gonna do now is I'm gonna go ahead and clear this out because we're at 53% context, so I don't wanna mess with context rot. And I'm gonna once again go back into plan mode. Alright. So I just tested out the blender

00:11:10.365 --> 00:11:13.245
website, and it looks really good. I do have one piece of feedback though.

00:11:13.820 --> 00:11:23.980
When we're scrolling down and we see the features, feature number two doesn't actually appear until it's basically off the screen. So we need that to actually come into view a bit earlier.

00:11:24.540 --> 00:11:59.320
But besides that, all the of the other features, features one, three, and four, are working well. So I'll shoot that off, and while it's coming up with a plan, just wanna make sure that that was accurate. Feature three looks good, and we don't even have feature four. So hopefully, can understand, read through the code, and see what's going on. So while this is creating a plan, I thought that I would real quick explain the difference between localhost and actually having something on the web. Because if you've never built a website before in Cloud Code, that part might not click yet. So what happens is we kind of have two different environments. We've got our local computer, and then we've got the actual cloud. So remember when Cloud Code said, hey. Cool. Your website's live. You can go ahead and test it on localhost

00:11:59.375 --> 00:12:01.455
port five one zero zero six.

00:12:01.775 --> 00:12:08.415
If you right now typed this into your browser, you'd probably get nothing. But I can type it in because it lives on my machine locally.

00:12:08.575 --> 00:12:10.095
Because what's going on is

00:12:10.255 --> 00:13:15.990
Claude code is helping us write all of the actual code because that's really what a website is. It's a bunch of code. Whether that's HTML or JS or CSS or whatever it is, it's code. And so what we're doing right now is we're using it to build code and then we're testing it. And then we're going back and forth on our computer until we're good. And then once we actually like the code, we push it to somewhere on the cloud so that it can actually be viewed by other people. So I'll cover this pipeline once we actually get to that stage in the video, but I thought that I would address this kind of like local thing first real quick. Alright. You can see it came back with a plan to fix the blender feature number two late appearance. I'm just gonna go ahead and accept this. Okay. So I did that really fast. I'm gonna click into this website, and we'll see if that fix has actually been changed. We've got feature one. We've got feature two. There we go. We've got feature three, and everything else still looks intact with the site. So all of the magic that's happening here is once again within the skill that I built. So it is the video to website skill. If I open this up, this is basically just a markdown file. And it says, turn a video into a premium scroll driven animated website. So this is where all the secret sauce really lives on how it actually does this. I know that this is a pretty beefy skill,

00:13:16.150 --> 00:13:21.990
but hey, I mean, it seems to be working pretty well. And what you can do now is every time you're using this skill to build websites,

00:13:22.150 --> 00:13:29.215
you would just say, awesome. Here's what I told you to fix. Here's what I like. Here's what I don't like. Make sure that all of this is reflected on the skill.md.

00:13:29.455 --> 00:13:34.415
So essentially, every single time that you build a website with this skill, the skill gets better and better and better.

00:13:34.975 --> 00:14:48.715
Now we have our code that we like, and it's time to push it over here. So what we need to do is we're gonna use a combination of GitHub and Vercel. GitHub basically just lets us store code. So basically the same way you would have maybe like a Word file locally on your computer. If you wanted other people to be able to use that, you would have to put that on OneDrive or, you know, Google Docs so that other people could look at the different versions and collaborate on it. And then what happens is we sync up Vercel to our GitHub so that we can actually deploy that code onto a real URL so that it's no longer just like a local host URL. First thing you wanna do is go over to GitHub and create an account. It's completely free, and it has been around for tons and tons of years. It is a industry standard for code. And then the second thing that you're gonna do is go over to Vercel and create an account over here as well. So what's cool is we can basically have Claude code do this entire pipeline for us. It's super, super simple. So if you haven't yet connected your Claude code to your GitHub, you would just come in here, maybe clear out the conversation, and say, help me connect to GitHub so that I can push this code base to my GitHub repository. And what it can do is it can help you basically use the CLI to authenticate, meaning it will basically just have a pop up for you, and all you have to do is sign in. It's super simple. So here you can see it says you're already authenticated with GitHub as Nate Herkai. Nice. Now the next step is to say,

00:14:49.115 --> 00:15:01.275
awesome. Now let's go ahead and create a new GitHub repository for me. You can just call it blender dash website and push the code base for the Blender website into that repository. Now because we're pushing something to GitHub

00:15:01.650 --> 00:15:09.490
because it's gonna go on the web, this is where you'd wanna be careful if you had, like, API keys or anything sensitive in there. In this case, we have literally nothing to worry about,

00:15:09.890 --> 00:15:35.100
but that is something just to keep in mind. Alright. Nice. So your Blender website is now live on GitHub. Here's everything that it did. And it also says if you wanna connect this to Vercel for auto deploys, you can import the repo from the Vercel dashboard. So first, let's just check-in on this GitHub repo. We can see that this has been set up. We have one commit, is the one that we just did. And that's important because every time we make a change, we can see exactly what happened to the code here. Now what you'll notice is that this is a public repository.

00:15:35.100 --> 00:16:02.080
You could go into the settings and you could make this private, and it would still be able to auto deploy to Vercel. No problem. And now that we're in Vercel, all I have to do is come here to projects and click on add new. And then what you'll notice is right here, because I've signed into Vercel with my GitHub, it says import GitHub repository. And all I can do is choose right here blender dash website, click import, and this is automatically just gonna build up this site for us. So I'll hit deploy, and then we'll let this spin up. And I'll show you guys that this is now accessible on the web.

00:16:02.400 --> 00:16:21.505
Awesome. So you just deployed a new project to NateHerb projects. Let's go ahead and continue into the dashboard here. Alright. So something interesting just happened, and I'm glad it did so I can show you guys how to fix it. So our project is now here on Vercel. And when I click into the domain, everything seems to load up right. Right? We've got Obsidian Vortex. We see the animations come through. But as I start to scroll,

00:16:22.065 --> 00:16:53.660
where's our blender? We still get the text coming through. We still get all these animations that we were looking for, but our blender's not there. So what happened was when it pushed this GitHub repo, it excluded the frames. So if I come over to the left hand side and we go to our blender project and we open up the frames, you can see that all of these were grayed out, which basically means everything got pushed to GitHub in this folder except for the frames, which means when the site tries to render it, there's no frames to actually render. So what I did is I said, okay. That didn't work. You need to have the frames in the code base so that it can actually use it. Otherwise, the animation just disappears.

00:16:53.820 --> 00:17:11.095
So I told it to update those changes, make another push. It fixed that, and then basically it came back and said, okay. I did that now. The frames are in the GitHub repo. If I go to the GitHub repo, you can see that we now have two commits. If I click into the commits, can see nice. The second one added animation frames for Vercel deployment.

00:17:11.255 --> 00:17:13.495
And then in Vercel, if I go to deployments,

00:17:13.575 --> 00:17:25.710
you can see that we had two. We had this current one that I rolled back to so I could show you guys, and then we have this main production one which I could go to and we could actually roll up to this one. So I could click on these three dots and then click on redeploy.

00:17:25.870 --> 00:17:54.540
And now that I have redeployed, if I open up this Blender website one more time and we come down and we start to scroll, we can now see that the frames are being rendered and we still have all of the animations that we had built. And now the site is actually ready to go. And just to prove to you guys that this really is on the cloud, you can see on my phone, we have the Blender website with the animations. Now, obviously, this hasn't been yet optimized for mobile, which would kinda be the next step, but you can see the animations are still here. If And it hasn't quite stuck yet, here's the advantage of doing it like this.

00:17:55.260 --> 00:18:02.780
Now that we have our site on the web, which maybe customers would be looking at and interfacing with, what if we wanted to change something like the colors or maybe even change the animation?

00:18:03.445 --> 00:18:32.230
We don't wanna be changing what's actually out there in production in real time. So we can change the code. We can test on a local host. And then once we're finally good with it, we push it to GitHub and then it automatically syncs to our real domain. So that way we have basically a testing environment, a staging environment, then we have our actual production website. And what you guys saw is that this literally took me, like, thirty minutes. And, obviously, if I spend another thirty minutes, the site could be, like, five times better. And this is crazy because there's so many businesses out there, whether they're local in your area or, you know, you look online,

00:18:32.390 --> 00:19:05.345
that have horrible websites because they don't wanna prioritize it or they don't wanna pay some web design agency tens of thousands of dollars for a new website that could also take potentially months. Whereas what you could do is you could find prospects. You could find some sort of niche. So let's say you wanna design websites for blender companies. You could build a demo site similar to this. Right? Like, you could build something like this in one day if you sat down and you wanted to make it really, really good. And then you email them the link or you walk in and you show them and say, can build this for you with your products, with your copy, and I can get that to you in two days and I can charge, you know, 5 to $10,000,

00:19:05.345 --> 00:19:20.360
which is a lot cheaper than they might get with other vendors. And then, of course, on top of that, you could do monthly hosting. You could have maintenance, which is recurring revenue, but it also ensures for them that if they need any different features, you can fix that code base, and you can push that all up there because you understand how this all works now.

00:19:20.840 --> 00:20:14.425
So maybe you don't like the style of how I'm doing this with the different, you know, text coming through and maybe like this animation overlay thing, then just update the skill so that your Claude code doesn't actually do that. And once you now actually understand how all we're doing is we're turning videos into a bunch of frames and then having it scroll through, you'll be able to do so much more because it doesn't just have to be product spinning or, you know, x-ray vision. It can be words. It can be like walking. It can be whatever you want. You can also you can go to this website, awards with three w's for some inspiration on animations. It is super super cool what people are doing here. But that is gonna do it for today. If you guys love nerding out about this kind of stuff, then definitely check out my plus community. The link for that is down in the description. Got a great community of over 3,000 members who are building with AI every day, building businesses with AI. And if you have similar goals, it's a great spot to be. But, anyways, if you enjoyed the video or you learned something new, please give it a like. It definitely helps me out a ton. And as always, I appreciate you guys making it to the end of the video. I'll see you on the next one. Thanks, everyone.