Build a Scrolling Website with Claude

Claude Code can now build incredible scrolling websites without the AI slop, without breaking the bank, and still rank on Google. And the best part is that [music] you don't even need to know how to code to make one of these. So, if you're sick of making AI slop sites [music] that don't scroll on mobile and are slow as hell, keep watching. I'm going to give you everything you need to make [music] one of these with Claude Code today. Hey guys, my name is Sean and welcome to AI Builds. Today we're going to make a scrolling website. It's one of my favorite builds. It's going to be for a hot sauce company that I'm doing for a demo site. What makes these great is they're good for local sites, they're good for product sites, or good for service sites. No matter what you will have, scrolling sites just take it to a complete new level and they're absolutely incredible. So guys, for this build we're going to do it in four phases. [clears throat] We got the planning phase, building phase, the iteration phase, and then the optimization phase. What's going to happen at the end is we're going to have a beautiful site that's going to be super fast so it ranks on Google, and it's going to be a great user experience on desktop as well as mobile, which is awesome whenever you have a hero being a video. The biggest concern is that it's going to be slow and it's not going to work on mobile. Ours will. Okay, let's talk about what you need for this build guys. You're going to need a Claude Pro account. We need to use the Claude Code desktop app to do this build. It's $20 a month if you pay monthly. If you want to do the yearly plan, that's $17 a month. I highly recommend it. I'm on the $200 a month plan and I almost maxed that out. I use Claude about 8 to 10 hours a day. You could build a bunch of sites like this that are super incredible and uh it's definitely worth the 20 bucks in my opinion. Next, what you're going to need is a Higgs Build account. I have the link below in my description. Higgs Build's going to allow us to do the image and the video generation. For this particular build, we're going to use the Higgs Build interface which I feel like is super easy to use. I know a lot of you like using the MCP, which I do as well, but for this build we're going to stay inside Higgs Build. And then the last thing you're going to need are the skills to actually turn this video into a website. I have them for free below in my free Skool community. There's two skills, the anti-slop skill, which makes your site not look like AI garbage, and then the scroll hero skill, which is what turns your video into a hero scrolling effect for the user. It's fantastic. It'll save you a ton of time. All right, guys, phase one is the planning phase. For me, this is the most important phase. It's going to save us a ton of time and a ton of money on generations if we do this properly. Uh one thing to know about AI, it basically only gives you what you give it. So, if you give it crappy input, you're going to get a crappy output. So, this is why we take the time in the in the in the planning phase to do things right and make sure that we have everything done um ahead of time. All right, so step one, we're going to pick our story. Basically, what I'm doing for this is I'm creating a brand called Scorch. It's called Scorch with a K, and it's a hot sauce brand. And what I'm going to do is I'm going to turn a hot pepper into liquid and then turn that liquid into a bottled sauce product, a finished bottled product. So, for me, I'm going to have to do three images. I'm going to have a starting image, which is going to be the pepper that I'm going to start with. The middle image is going to be the pepper turned into liquid. Third image is going to be that liquid bottled into a finished bottled product. So, I've done this a few different times, and I've tried to go from image A to image C, and it doesn't work. You got to have a middle ground, otherwise AI will kind of do what it wants to do. Sometimes it'll work. >> [music] >> Next time you hit regenerate, it won't. So, I like giving it three different images for something like this. It's not too complex, but it's a complex enough to where it justifies for me giving it three images to make sure to go down these phases correctly. All right, now that we have that story planned, we're going to map this out. And if you have a business, a manufacturing business, or you sell a product, or whatever it is, you can go from A to Z with whatever your manufacturing process is. The pepper manufacturing process is disgusting. It's not something you want to show a consumer. There's a lot going on there, so I I took a different route than that. But if you're running this for a client or for your business, you want to make sure and map your business out A to Z. You can do this as a hero or you can do this on the story page, whatever you want to do. You can make a scrolling effect to tell a story anywhere you want on the website. If you have a process that you like to explain and it shows you different shows that you're different or your client's different than their competitors, I highly recommend doing this. You might have three images, you might have 14 images to create this, but it's all the same steps. You basically you want to put you want to go from A to B as seamless as possible, go from B to C as seamless as possible. All right. Step three is you're going to lock the frames. Again, I already did that. All right, now that we got these three images, let's figure out the length of the video. Depending on what you're doing, I'm always between 6 and 8 seconds for each video. I like to just if it's definitely too long, you can shorten it, but I don't like going more than eight either unless I'm telling a really long story. But for something like this, I'm going to be about 8 seconds. If it's off, I might trim it down to seven. But we're going to go ahead and do 8 seconds for both of these videos and then my scrolling effect skill is going to mash it together and make it look seamless. All right, guys, here we are on phase two, the building phase. What we're going to do is generate the images and videos through Higgsfield. Then we're going to put my skills into Claude Code and actually generate a site. But for this build, we're going to do it inside of the Higgsfield interface. All right, once you're inside Higgsfield, we're going to make the images. I thought it looked pretty cool and we're going to use this as the reference to create the first image of our video generation. So again, inside Higgsfield, here's our prompt and I use Nano Banana Pro with a 16.9. And then you I I try to do four image Well, actually images aren't that expensive. I think Nano Banana Pro, they're like two credits each. You don't have to do four, but I I would do four to at least get your first one. Once you have your first one dialed in, and you want to fine-tune it, then only do one or two after that. So this is the first This is the first image that came out. I thought it looks pretty awesome. It looks really close to what I I put in as a reference and I like the background. I think it's going to look pretty cool. All right, now we're going to use this image as a reference and put a prompt in to get that second image, uh is going to be this pepper turned into liquid. So, here's a prompt. So, I try to be as specific as possible for what I'm looking for. And again, take your time, have Claude help you, and just make sure that this is super concise. And then, uh use the same camera height and distance as image one. That's super important. A lot of times, you will get, especially if you use different uh models, they have Leonardo Pro does a pretty good job with this. You want to make sure and and have the same camera angle when you're doing a project like this because you when you're scrolling picture that user, everything's kind of scrolling around and you have that center focal point that you want to keep in the user's face. So, if if it's off-center, it's going to look weird. Keeps the same light and the same camera. I looks pretty good. You know, I think it looks pretty realistic. It looks just like my reference image. It's centered. It's got the same color. I I think it looks really good. This is going to be image three. I will take an image two as a reference, and these are finished bottles that I also got GPT image two. I did a whole brand for this. Um I have another skill for my my paid Skool that where um you can create a brand pretty easily with just a logo and I have all the fonts and all that dialed in, and I want to make sure that it's all consistent cuz this is going to be even though it's a demo site, I am going to be showing it off uh for clients on Upwork and whatever else. So, these bottles are already created. I just did three flavors, and then um you're going to see what uh take a look at this prompt and see what I do to turn this middle image uh into a finished uh these finished three bottles. So, image two and image three and image four are the products. Reproduce each bottle exactly. Use only the bottles, not their backgrounds or their lighting. Again, make sure that all these tags are attached to images. Make sure they're all green before you send off a prompt, especially when it comes to video. When it comes to video, like, it's a big problem if these aren't all uh referenced, allowing AI to make the decision of whether to reference that or not, and that's a big deal. So, make sure you make sure that they're all green before you actually hit generate. Okay, I think these came out pretty freaking awesome. Uh not bad at all. It looks really good compared to uh to other models I've used in the past. I think this looks really sticking good. There are a couple errors we need to fix. The text is wrong. Now, anytime you do AI image or video generation, you always going to trip check the text. The text is off here. You can see that the heat level is supposed to be six out of 10, not five out of 10. Not a huge deal, but you do want to get these specifics right. You have to double-check all that little stuff. And then the sauce next to the green jalapeno is red. So, it doesn't match. So, that's an issue. We got to fix that. And again, it's not that hard. You just take that image, use that as a reference, and just tell Higgsfield, "Hey, you know, change the sauce." And then make sure that all the text is correct for each generation, right? So, all right. So, here's the prompt. So, edit image one, change only these three things, and keep everything else exactly as it is. Make it bright green jalapeno sauce, and then it must read heat level six out of 10. Again, it had five out of 10 before. Small batch, five fluid ounces, 148 mil. Do not change anything else. I loved everything else, so I want to keep everything else the exact same. We just got to make those two changes, send it off, and we'll see what we get. All right, that's it. The kid back perfect. I love it. I think it's perfect for video generation. We got our three images. Let's do the fun part. It's time to make some videos. All right, guys. Step three, [clears throat] we're about to make some videos. We're going to use SeaDance 2.5. So, we have our starting frame, which is our our first image, which is that pepper. And then our end frame, which is the second image, which is the pepper turn into liquid. So, let's take a look. Here's the prompt. Inside Higgsfield, go to video, go to SeaDance 2.5. We're going to go 8 seconds, 16 by 9, and then make sure the audio's off. And then we're going to paste our prompt. So, starting frame image one, end frame image two, one continuous shot, the camera pushes slowly straight in the whole time, and never cuts. [music] Gathers into one single thick drop that hangs in the air exactly as in image two. Nothing pops in or out of the frame. Draft for 480p is only 24 credits. It's pretty good. All right, it's awesome. I I think it's totally awesome. I'm super happy with it. Let's go. Video one's done. Let's do video two. Again, we're going to take the middle image, which is the liquid, and then we're going to the bottles, uh which is the third image. So, start from image one and from image two, the camera keeps the same slow push straight in and never cuts. The three Scorch bottles rise and settle upright in a row exactly as in image two. Nothing pops in or out of the frame. Let's go. I mean, it's awesome. Even though the jalapeno green sauce came out green, I don't know if you necessarily want like I wasn't necessarily looking for that, but I'm I'm happy that it turned out that way. I think it's pretty cool. Uh I'm going to upscale that to 1080p and I We got our two videos. I think we're good to go. Here's the videos again. Now, I'm happy with that, for sure. All right, guys, here's step four of the build. Here's the skills. We're going to take these skills that we got from our free Skool community. We're going to put them inside Claude Code and then also attach the two videos that we just made and we're going to create this website. So, again, you have to have a Claude Pro account in order to use Claude Code. We're going to attach our two skills, the anti-slop skill and the scroll hero skill, and then attach the two videos, video one and video two, and then I'm going to put in this prompt, basically telling Claude, "Take these skills, take this video, generate me a website. So, use scroll hero to build a scrolling website. Don't generate any video. Real text, not text baked into the video. Make a tall 9 by 16 version of the film that scrubs to. Run the anti-slop check and show me the plan first then build it." asks us a few questions first. Just answer them the best you can. If you don't know, just use whatever Claude's recommended answer is, but it's only a handful of questions and it's just trying to dial in your build to make sure it's perfect. Again, I already made a brand kit for Scorch. I do this with all my builds. I'm just need to tell Claude, "Hey, like make sure that all the fonts and everything you use are within my brand guidelines." Now we're running the anti-slop check, and this has like 35 or 40 different checks I have in that custom skill. So, all the common slop that you get with AI, it just cuts right through it. Takes 90 plus percent of it out, and just enough to where it's not that much work to fine-tune it after. But you start pairing that with a brand kit, and start pairing that with my Scroll Hero skill, like your website's going to look pretty stinkin' good right out the gate. You're about 95% done right out the gate. So, all right guys, that's it. It's built. We're on phase three, the iteration phase. We're going to take a look at our website, see what needs to get fixed, and tell Claude how to fix it. All right, step one is check what broke. Now, I had an issue with the pepper, right? So, this this start of the video, you can see there's a little black line here on the left-hand side, and you can just see it at the beginning of the video, and that's a problem. So, had to tell Claude, "Hey, this needs to get fixed." It happens sometimes when you do when you chop up a bunch of frames like this. So, you just it's something to look for when you do future builds. Easy fix, tell Claude to fix it, he'll fix it right away. And all all I do is I just take a screenshot, I hand it to Claude and say, "Make this fixed." [music] Give it a small prompt, and that that's it. All right, I think it looks good. I mean, I don't I don't see it there. And it looks really smooth. It's just like it was when it came out of Higgsfield. Super happy with it. One thing I've noticed though is the logo. I definitely have an issue with the logo. We need to fix that. For the logo, I'm just looking for a thicker white border. When I created the brand, it wasn't up against a dark background like it is now. Can't see the yellow, so I I need a thicker white border in order for it to look right. that's all this is. Just tell Claude, "Hey, I need it thicker. I need this to look like that." The skills will cut through the bulk of the work, and all you have to do is just fine-tune it from here, and you're going to have a great product when you're done. All right, step two guys, we need to have a clear call to action. There's no point building a website if you're not converting customers. I don't care how great it looks. If you don't have a way for a customer to opt in to whatever product or service you're selling them, like there's no point in even building a website. So, a lot of guys do build these scrolling sites, these nice beautiful video sites, but they're not converting customers. So, you need to make sure that whatever whatever call to action that you need to convert your traffic, whoever that avatar, whoever that customer is, you need to make sure to have and have a clean CTA for them, even though you're doing a video scroll. So, pick your burn, shop the sauce. Let's go. It looks really good. It's time to optimize this thing. Get ready to rank on Google. Let's go. All right, guys. Phase four, last phase. This is it. We're optimizing the site to make sure number one that it's fast on Google, and then number two that you can actually look at it on mobile and still convert the same way you would if it was on desktop. So, we're going to first check mobile video, then we're going to check the page speed. I think it looks pretty good. It's not choppy. It might even be smoother than on desktop. I like it. I'm super happy with that. The phone test passed. First shot, man. This thing's good to go. I It's It is a smaller video, but man, this thing's good to go. It might even look better on mobile than it does on desktop. I'm super happy with it. Oh, and we're Now, we're going to check the page speed through Google PageSpeed Insights. And again, guys, in order to do this, you can't do this if it's on localhost. In order to do this, you need to actually upload your website through Netlify or Vercel or one of those one of those software companies. I have a video if you guys go to my Skool community, I can show you how to launch a website for free on Netlify. I launch most of my sites on Netlify. And in order for you to actually check the page speed, you're going to have to make the the site live. It's not going to work if you got localhost, okay? Here's the website. Let's take a look and see how it does on Google PageSpeed Insights. Okay, paste the link and and let's analyze this. 99 on mobile. Let's go. 99 out of 100. I'm really happy with that. So, SEO's at 69. I This site's not indexed. It's a demo site, so I'm not indexing on my site. 0.2 on the speed index. I think it's pretty damn good. 99 out of 100. A lot of people would be really happy with that. I'm pretty happy with it. I might be able to get 100 out of 100, but I'm not going to get too greedy. Again, this is a demo site. All you have to do is go back and forth with Claude and say, "Hey, fix the speed index, whatever it is." We got 100 on desktop. That's fantastic. 0.3 speed index. You can't really get better than this, guys. This is the best results you can get. This is a a high-out like This is a high-quality video that we put. It looks good on mobile, and it's super fast. I mean, you can't beat it. I've also done this, guys, with a WordPress site. I built a site with Claude Code with a scrolling effect. It's a local coffee business site, and I rate 97 out of 100 on mobile on that. But, I built a five- or six-page site. It's got tons of animation. It has a lot going on, and I still got 97 plus on WordPress, which is very difficult to do. For all of you designers and business owners that have put a website on WordPress, you know exactly how difficult that is. But, uh yeah, this is This is quick. It looks good. I'm really happy with it. Let's take a look at the final product here. Here it is, guys. Let's scroll. It looks pretty good. There it is. 260 or 10. Let's go. I know, guys, this is a simple build. It was a lot of fun. I appreciate you watching. Uh again, all the links are in my description. Go check out my free Skool community where I do a ton of website builds. Thanks for watching. I'll see you guys on the next one.