Scrollbare 3D-Websites erstellen mit scroll-world und Claude

So, there's these really cool interactive, like scroll-style websites, like these, that have been going a bit viral on places like Twitter and Instagram. And I've got to admit, I always wondered, like, what exactly would it take to build something like this because I think there's a lot that you can do with this type of site that kind of like modifies itself as you are scrolling through. I think it's pretty cool. So, it turns out it's actually simpler than you'd think, especially if you have a skill that can help you do it. And that's exactly what we're going to go through in this video. So, I'm going to walk you through the exact process step-by-step and show you what you can get with, like, 5 to 10 minutes of messing around with one of these tools. So, the skill here is called scroll-world and you can find it. It is open source, it's on GitHub. We're going to come through, we're just going to install it. So, we're going to copy this plugin command for the marketplace. We're going to pop down into our terminal, we're going to paste it in. And then, once this is done installing, we're going to pop back into GitHub, and now we're just going to copy the install command, pop over, actually install the skill. And then, once this is done in, installing, we can just open up Claude and all we need to do to kick this thing off is run a command that says, scroll-world. So, we're going to run the scroll-world command, and then it's going to move through, and it's going to start asking us a series of questions. And so, the way that this thing actually works under the hood is that these things are going to be, like, images that get chained together, end-to-end, they get kind of stitched together. And so, we do need an image generation API in order to make this work, and in this case, it uses Higgsfield. So, now, before we can come through and start answering these questions that it has for us, we need to make sure that Higgsfield itself is actually configured on our machine. So, we can hop over to higgsfield.ai/cli and then just copy this command to download the CLI. If we pop back over into our project, we can just download this tool. And then, once it's finished, all we need to do is run this auth command and log in to our Higgsfield account. And then, once that is all configured, we can move through and start answering the questions. And so, the first question it's going to ask us here is about the art direction. So, they have some default, like directions that you can choose to go with, like, you know, glossy toy or neon night. You can type in something specific if you have a specific vibe. In this case, we can choose something like neon night. And then, where are we going to give it, like, our brand information? So, we can import it from a URL, we can have it just pick a palette for us, we can give it the palette. In this case, I'll just let it do whatever it wants. And then, do we want to be mobile responsive or just desktop only? I'll choose desktop only just for this demo. And then, we can let this thing move through, and it's going to start asking us again, more questions. So, we're just going to paste in some brand information next. So, for example, TechSnack AI, maybe I want to redo where I host my newsletter, and I want to include, like, updates on the different businesses and apps that I have, and then links to other cool stuff that I'm checking out. And so, it's going to move through, and then based on those answers that we gave for, like, our art direction and things like that, it's going to move through, and try to generate a, like, style guide, and then what are all of the different scenes going to be? So, if we were to think of, like, how this works, it's kind of like there are different scenes that we're going to need to generate images for. And so, the general, like, journey here is going to be a camera flying through the world, and then ending on some sort of call to action. And then, below that, we have the six different screens that it is considering. So, the first screen here is going to be the signal tower, which is going to be, like, kind of like the hero section, like, the the welcome section of this site. Then we have the the newsletter desk, which is going to be this, like, press room style, kind of, futuristic, outbound mail center. Then we have the workshop, which is seemingly going to be something like an actual, I don't know, like, a garage or a workshop where, like, the business is being run from. We have the tool vault, which is going to be a bunch of different, like, glowing icons and wall switches, kind of, like this, toolbox vibe. The repo archive, where I could maybe link out to all the different GitHub repos that I like to follow. And then, the launch pad, which this is going to be, like, the actual, call to action to subscribe to the newsletter. So, we can choose to, like, tweak any of this. I'm just going to kind of run through and let it go with the defaults. So, we're just going to let it build. So, if we want to make any modifications, we can. I'll just let the brand kit go as is. For the journey, I think I'll merge tools and repos together, actually. And then the main call to action is going to be subscribing to the newsletter. So, we can submit all of those answers, and then this is going to lock in the plan. And then it's going to go off, and it is going to do its thing, and it's really going to just start building this autonomously. Again, you need to make sure you have Higgsfield configured for this thing to work, unless of course you want to customize it. It is open source, so you can customize it and use any other sort of library that you want. So, while this thing is off and running, let's actually go look at the skill library, so we can get an understanding of what exactly is happening. So, we can pop back to the repo, and then let's actually just click in and read through these skills. This is a, like, really good habit to get into, by the way, just understanding what's actually happening inside of these libraries so that we can make sure that we're not, you know, giving somebody complete access to our, uh, computer for absolutely no reason. So, let's go in now and actually read the skill. So, if we were to pop through here, so, step zero, it's going to bootstrap and make sure it has access to all of the things. So, number one is the Higgsfield, uh, CLI, which we talked about, ffmpeg, so that it can actually, like, encode the videos and make sure the videos are good to go. It has a Python image tool, and then just some different caveats for, like, how long this process actually takes so that the model, like, knows what to expect in terms of, like, timeouts and blocking jobs and all that type of stuff. It can take three to eight minutes for each of these things to actually process. So, again, step one, which we saw, is interviewing the user. So, it's going to move through, and it's going to try to understand, like, what are we even talking about here? What is the brand identity that we want to to use? Again, I just chose defaults, but if you were going to do this for real, you would want it to be, like, things that are specific to your brand. The art direction, the different sections of the page they call the journey, because this is kind of like a scrolling thing where you're, kind of, navigating through this experience. And so, what are the different page sections basically? And then, again, as we saw, do we want it to be mobile, capable, or not? So, under the hood, there are different, like, models that are being coded in here. If you want anything different to be used, again, it's open source, you can customize it to how ever you want it to be customized. You can maybe use pieces of this to make, like, portions of your site that are, like, scrolling interactive where others aren't. But it's going to be really cool, just so that we can see, like, how does the technology actually work under the hood. So, now we get into, like, what is actually happening right now in the background, as like, we're talking about this, like, what is it off doing? The first thing it's going to do is it's going to generate still frames. So, it is going to go through and generate images for each of those sections. So, for, like, the five different sections, I think that we went with, it is going to generate an actual image for each of those things. And so, it has some references here in terms of, like, how that should be done. And again, these are things that are going to be getting passed to Higgsfield. Now, if you want to have, like, some of these more, like, floating, kind of, abstract feeling, type of sites, and I'm sure you've seen this before, like, things are kind of, like, floating around and kind of, starting to move as you scroll. Um, you can do that. That's, like, an optional step, and this is what that knockout.py script was for that we were looking at, like, a minute or two ago. And so, you have this extra option if that is the type of experience that you want. And so, the camera architecture, they call it, because this is kind of, like, a scrolling thing where you're, kind of, navigating through this experience. And so, the big thing that we saw with a lot of those, like, demos in the beginning of this video, and what, with what we're probably going to see out the other side of this, and we'll check that once it's done, is that the way that the cameras actually move around and, kind of, like, zoom in, that gives it a very specific aesthetic feel. And so, what this skill is now doing is it's prompting it to use specific, like, camera views for how it is going to move through all of the different scenes. And so, there's really, like, two different ways that this can go. Number one is, like, the continuous forward take. And so, in that example that we saw in the beginning, with, like, the tour of the home, this is, like, a continuous forward take, where we're, like, constantly moving forward through the scene. And then, the second option is going to be, like, this dive-in, dive-out, kind of, like, aerial thing, where, if you want to have, like, a 1,000 foot view of something, like, you're zooming up and down in between mountainscapes and things like that. That's going to be, like, an entirely different approach to, like, the quote, unquote, camera work, or camera architecture, as they call it. So, again, these are all different things that it's going to be prompting for under the hood, but you can, of course, like, pass any of this in as context. And this is a thing that I'm really big on. Obviously, this is more of, like, a laid-back example of something that we can do with, like, vibe-coding, agentic engineering, AI coding, whatever terminology he'll die on. This is, like, a little bit more of a laid-back example. But the big thing is, if you want to be able to push this, or anything, in any specific direction, whether you're trying to, like, use AI to code, like, a production app, or sell services to businesses, or whatever it is, having the actual language to use is an incredibly valuable thing. And so, that's one of the things I like about this skill, is we can come through here, we can read how it works, and then we can use this to actually prompt things in. So, for example, when we were giving, like, our art direction and our concepts, we could prompt in specific, like, concepts or tones, based on how they've defined it here. And that is going to push the landing page toward a specific, style, that we might want to have. And so, this is the same thing you would do if you were using a tool like Claude Design, for example, and wanted to, like, have a specific, aesthetic, feel to, like, your landing pages, or your app design, or whatever. Knowing the, language, to prompt the model with, has a huge impact on what is going to go out and actually, choose to do. And so, that is something that I'm really big on. Loading yourself up with, vocabulary, and understanding what it means so that you can prompt the system the way, you want it, to. And so, if you're trying to, like, upskill, your, capability, from someone that just collects random tools and never actually does anything, to, somebody that actually, like, builds, things, and can sell them, or deploy them in their own, business, getting better and better and better with your, vocabulary, to prompt the model with, is one of the most powerful things you can do. And so, if you want to see a few different skill, libraries, that I use, regularly, to help me do that, you can check out the link in the, description, below. So, now we move into step five depending on, like, the type of, camera, angles, that you're using. There are going to be, like, differences, in how it's going to process the, images, and how it chooses to connect things, together. And so, that's what's being outlined here. But by the end of this entire process, now, we should have a, fully, functional, scrolable, website. That is the promise, at least. Let, us, see, how well, it actually does it. All right. So, now this thing is, finished, running, and so, we're going to run this command, just to boot, up, the, server, and then we're just going to copy the URL, in this case, for our, server, and we are going to go, paste it into our browser, and look, at what we've, got. So, we can see, this is pretty cool, now, right? So, all, these are all the different, like, images, that we were looking at, before, with, like, the workspace, and everything, and as we're, scrolling, through, it, has, this, like, very interactive, like, kind of, zooming, in, and then, zooming, out, and the perspective, is, entirely, changing. So, this was, like, that, part, B, or, like, option, B, for the camera, architecture, we're, not, like, going, through, something, we're, kind of, like, popping, around, and, all, of, that. But, overall, I think this looks pretty cool, like, I didn't put, much, effort, at, all, into, this, obviously. I just let it go with all the, defaults. You could drive, this, in, a, very, different, direction, if you took, a, lot, of, time, to talk, about, the, different, like, steps, but I think, like, these, scroll, animations, are really, smooth, and, look, really, cool. So, overall, I would say, for, again, just, messing, around, for, like, 5 to 10 minutes, this is, um, this, is, pretty, sweet. So, that, being, said, now, that, this, thing, is, done, let's, actually, talk, about, how much, this, cost, us. So, to run, that, entire, process, that, we, just, saw, that, cost, about, 500 credits, on, Higgsfield. The, image, generation, itself, isn't, that, bad, but, generating, the, videos, that, actually, chain, things, together, um, that, is, what, cost, quite, a, bit. And so, 500 credits, based, on, like, my, account, tier, it, costs, roughly, 4 cents, per, credit, so, that, site, that, we, just, looked, at, that, costed, $20 to, make, which, is, kind of, expensive, but, at, the, end, of, the, day, like, I didn't, dial, it, in, at, all, at, all, and, if, I, was, going, to, actually, use, something, like, that, I would, probably, be, a, little, bit, more, intentional, about, like, specifically, what, I, wanted, to, build, and, why, and what, pieces, of, the, site, I, actually, wanted, to, kind of, utilize, this, zooming, around, flying, around, type, of, like, scrolling, mechanism, for. But, that, being, said, still, pretty, cool, that, with, just, a, skill, and, vanilla, Claude, code, or, Codex, or, whatever, that, you, can, create, something, like, that, I, do, think, that's, a, that's, pretty, awesome. So, if, you're, like, this, video, make, sure, to, check, out, those, links, in, the, description, below. Number, one, for, that, list, of, like, vocabulary, for, AI, coding, especially, if, you're, beginner, and, number, two, if, you're, actually, want, help, implementing, these, types, of, things, and, like, turning, all, of, these, tools, that, you're, collecting, into, like, an, actionable, system, that, can, actually, make, stuff, I, have, a, paid, group, in, the, description, below, that, you, can, also, check, out. But, that, is, it, for, this, video, I, will, see, you, in, the, next, one.