§ 01 · The Hook
The bait, then the rug-pull.
The video opens on what looks like an Apple product page -- an Apple Watch rotating through a polished scroll-driven animation with dynamic text and branded feel. Then the reveal: it is a fake. Built with Claude Code in thirty minutes. The gap between what agencies charge and what AI can now produce is the entire premise.
Where the time goes.
00:00 – 00:40
01 · What We Are Building
Hook reveal: fake Apple Watch site built in 30 minutes with Claude Code. Sets the promise.
00:40 – 02:05
02 · Setting Up VS Code
Install Claude Code extension. Requires paid Anthropic Pro or Max subscription.
02:05 – 04:14
03 · Grab the Free Skills
Two markdown skill files available free via Skool community. Explains folder structure.
04:14 – 06:07
04 · Live Build Starts
Nano Banana 2 generates blender start and end frames. Cling 3.0 animates between them. Video dragged into VS Code.
06:07 – 09:35
05 · Claude Code Build Loop
Plan mode prompt. Claude asks clarifying questions about brand and sections. Plan accepted. Bypass permissions enabled. Site builds to localhost.
09:35 – 11:38
06 · First Iteration Review
Obsidian Vortex blender site reviewed on localhost. Feature 2 timing issue identified and fixed in follow-up plan mode prompt.
11:38 – 13:34
07 · What is Localhost?
Diagram explains local computer vs. cloud. Localhost is the test environment; GitHub and Vercel are production.
13:34 – 16:07
08 · Hosting on the Cloud
Claude Code authenticates GitHub via CLI. Creates repo. Pushes code. Frames gitignore gotcha discovered and fixed with second commit.
16:07 – 18:20
09 · Managing Website Versions
Vercel shows two deploys. Rollback demonstrated. Phone demo proves site is live. Mobile noted as next step.
18:20 – 19:20
10 · How to Sell These
Build a niche demo site. Walk in or email prospects. Charge $5-10k. Add monthly hosting for recurring revenue.
19:20 – 20:15
11 · Final Thoughts
Skool community CTA, like request, sign-off.
Visual structure at a glance.
Named ideas worth stealing.
13:00
concept
Video-to-Website Skill
A markdown file in .claude/skills/ that instructs Claude Code on best practices for building scroll-driven animated websites from video files. Improving it after each build compounds future output quality.
Steal for Any productized Claude Code workflow -- the skill file is the IP, not the one-time code output
06:44
model
Plan Mode + Bypass Permissions Loop
- Plan mode: read-only, clarifying questions
- User steers and answers
- Accept plan
- Bypass permissions: auto-execute
- Review localhost output
- Repeat
Two-phase Claude Code workflow that front-loads all decisions before any code is written, dramatically improving first-pass quality.
Steal for Any Claude Code build session -- the plan/build separation is the core productivity pattern
Lines you could clip.
00:54
"This website is not Apple. This is one that I built with Claude Code using this new skill in like thirty minutes."
13:30
"Every single time that you build a website with this skill, the skill gets better and better and better."
18:32
"There are so many businesses out there that have horrible websites because they do not want to prioritize it or they do not want to pay some web design agency tens of thousands of dollars."
Things they pointed at.
05:02toolNano Banana 2
05:09toolCling 3.0
How they asked for the click.
19:45
next-video
"If you guys love nerding out about this kind of stuff, then definitely check out my plus community."
Soft community push at the very end after delivering full value. A skills prerequisite video is also referenced mid-tutorial.
Word for word.
HOOK opening / re-engagementCTA the pitch
00:00HOOKSo 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.
00:14HOOKThis 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.
00:31HOOKSo 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.
00:40HOOKSo 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.
00:48HOOKOnce 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:56And 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.
01:12So 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.
01:21I'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.
01:36And 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.
01:44As 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.
01:55I didn't give it a color scheme. I didn't give it any information about the product. Obviously, you could.
02:01But 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.
02:13So 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.
02:23They're markdown files that I've worked on that tell Claude code the best practices for creating these animated three d websites. 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.
02:34You'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.
02:44Set 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.
02:53And 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.
03:04And 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. But then the other stuff in here is super simple.
03:12Here are all the video files that I've used to make the previous websites. And then for each website, it created its own folder. So for the camera website, it has all this information.
03:20For 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.
03:30And 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.
03:38So 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. 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.
03:55So 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
04:12the 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.
04:18So 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.
04:37It should be against a plain all black background with no shadows, no hands, no reflections. 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.
04:53So 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. So we give it the start frame, we give it the end frame, and here's what I did for my prompt.
05:13I 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.
05:27I put that into cling, and here's the result. I haven't watched this yet, so hopefully it's good.
05:35Okay. Interesting. I mean, obviously, we maybe wanna fix that a little bit, but I'm fine with that for the sake of the demo.
05:41The fruit and juice kind of just magically appear from nowhere, and now they're in the blender. Okay. So I downloaded that video.
05:46I'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.
06:02So just as an example, if I go to the frames from the watch, you can see it created 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.
06:18So 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.
06:31It'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.
06:41Help me create a one page product landing page for this product. It should be modern. It should feel very professional.
06:48It 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.
07:06So 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.
07:22And one thing you'll notice once you read through the way that this works is that you will have to have FFmpeg, 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.
07:33It'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?
07:40And I'm just gonna go ahead and say create fictional branding just like it did for the Vanta one, which was the camera website. 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.
07:53But, 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.
08:05You 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.
08:14So it's really cool. Okay. So now we are at the point where the plan is done.
08:17We've got Obsidian Vortex premium blender landing page. We've got the brand identity here. So Obsidian, Obsidian Vortex.
08:24The tagline is annihilate everything. The accent color is blood red, and we've got fonts. We've got the video details, implementation steps.
08:32So here is the FFmpeg thing I was talking about that will extract the actual frames. Then it will build the HTML, then it will create all these different sections. It will build the CSS.
08:41It'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.
08:49And 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.
08:56There'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.
09:10So 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.
09:18And 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.
09:30Alright. So in just a few minutes that came back and it says, as you can see, the site is live at localhost. Open it up in your browser and check it out.
09:37So 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.
09:42It looks really clean so far. Now let's see what happens when I start to scroll down. So we see the blender starts to appear.
09:48Nice. 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.
09:56As I keep scrolling, we can see that the fruit is starting to appear. So we've got meet the obsidian vortex, machine from aerospace grade stainless steel, blah blah blah.
10:04There's also text in the background as you can see that says I think it says obliterate everything. So that's pretty cool.
10:10We've got brushless motor. We've got titanium blade array.
10:14So 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.
10:23And 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. So let's just actually think about that. I dropped in a prompt that said, here's a video.
10:36Create 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.
10:45Obviously, 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.
11:05And I'm gonna once again go back into plan mode. Alright. So I just tested out the blender
11:10website, and it looks really good. I do have one piece of feedback though. When we're scrolling down and we see the features, feature number two doesn't actually appear until it's basically off the screen.
11:21So we need that to actually come into view a bit earlier. 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.
11:32Feature 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.
11:44Because 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.
11:54So remember when Cloud Code said, hey. Cool. Your website's live.
11:57You can go ahead and test it on localhost port five one zero zero six. If you right now typed this into your browser, you'd probably get nothing.
12:05But I can type it in because it lives on my machine locally. Because what's going on is Claude code is helping us write all of the actual code because that's really what a website is.
12:14It'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.
12:23And 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.
12:39Alright. 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.
12:44Okay. So I did that really fast. I'm gonna click into this website, and we'll see if that fix has actually been changed.
12:50We've got feature one. We've got feature two. There we go.
12:53We'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.
13:03If 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.
13:13I know that this is a pretty beefy skill, 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,
13:22you would just say, awesome. Here's what I told you to fix. Here's what I like.
13:25Here's what I don't like. Make sure that all of this is reflected on the skill.md. So essentially, every single time that you build a website with this skill, the skill gets better and better and better.
13:34Now 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.
13:45So 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.
14:06First 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.
14:15And 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.
14:24So 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.
14:42It's super simple. So here you can see it says you're already authenticated with GitHub as Nate Herkai. Nice.
14:47Now the next step is to say, awesome. Now let's go ahead and create a new GitHub repository for me.
14:53You 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 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.
15:07In this case, we have literally nothing to worry about, but that is something just to keep in mind. Alright.
15:11Nice. So your Blender website is now live on GitHub. Here's everything that it did.
15:15And 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.
15:25We 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.
15:35You 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.
15:44And 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.
15:58And I'll show you guys that this is now accessible on the web. Awesome. So you just deployed a new project to NateHerb projects.
16:05Let'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.
16:11So our project is now here on Vercel. And when I click into the domain, everything seems to load up right. Right?
16:17We've got Obsidian Vortex. We see the animations come through. But as I start to scroll,
16:22where'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.
16:28So 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.
16:46So 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.
16:51Otherwise, the animation just disappears. So I told it to update those changes, make another push. It fixed that, and then basically it came back and said, okay.
16:59I 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.
17:05If I click into the commits, can see nice. The second one added animation frames for Vercel deployment. And then in Vercel, if I go to deployments,
17:13you 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.
17:25And 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.
17:44Now, 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. 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?
18:03We 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.
18:09CTAAnd 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.
18:23CTAAnd, 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, 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.
18:41CTAWhereas 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.
18:47CTAYou 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.
18:54CTAAnd 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, 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.
19:10CTAYou 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. 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.
19:30And 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.
19:44CTAIt 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.
19:52CTABut 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.
19:58CTAGot 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.
20:08CTAIt 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.
— full transcript
§ 05 · For Joe
Scroll animation is just video frames on a timeline.
WHAT TO LEARN
The entire technique demystifies into one mechanical fact: scroll position maps to a frame index, and AI generates the frames.
- Every scroll-driven 3D product animation is video frames extracted to images, each assigned a scroll position -- understanding this makes the whole category of sites buildable, not magical.
- A Claude Code skill file is plain markdown; improving it after each build is how you compound output quality over time without changing the prompt.
- Plan mode front-loads all decisions before any code is written, which is why first-pass output is usable rather than requiring a full rebuild.
- The GitHub gitignore gotcha -- frames excluded from the repo by default -- is the most common single point of failure; explicitly including frames in the push is non-optional.
- A demo site built speculatively for a niche is a faster sales tool than a portfolio because the prospect sees their category, not a generic example.
- Monthly hosting and maintenance fees convert a one-time build into recurring revenue without requiring any additional client acquisition.
- Localhost is a test environment on your machine only; GitHub and Vercel provide the path to a public URL -- keeping the two environments separate lets you test before going live.
