Interaktive Webseiten mit Kimi K3 und Scroll-Video-Animation erstellen

So Kimi K3 can design absolutely gorgeous, beautiful websites just like these for literally just a dollar or two. And in this video, I'm going to show you everything that you need to do in order to create these sorts of cinematic journey experiences and then host them on a website. In addition to showing you guys what to do, I'm also going to give you all of the prompts therein, so you guys have everything that you need to do to just copy and paste this, whether it is to Kimi K3, ChatGPT, Claude, or another frontier model. Let's get into it. So logically, what exactly is going on in websites like this? Well, one thing that you can't really tell is right now I'm scrolling up and down, and so essentially there is some form of progress or forward motion through a video. Well, at its core, what we're doing is we are taking every frame in a video, we're turning them into different scenes, essentially, and then we're binding them to some sort of scroll animation, such that when I scroll up, I go forward, and when I scroll down, I go back. We're also providing down here a sort of tour-based experience, so that people can also progress through the website and sort of autoplay as they will. There are a couple of different things that you need to know in order to make this work for you. I'm just going to give them to you, and then you guys can just copy and paste them in. But obviously, we need to both generate the creative asset, which is that background video. We also need to perform some processing on the background video to make it really high quality, you know, macro sort of this zoom-in journey effect. We also need to interpolate frames and do a couple of other things, so that it's not chanky, and it's smooth, unlike what a lot of other people do. And then, finally, we need Kimi K3 to wrap this in a nice bow and then present it to us. The first thing we need is we need some sort of concept. And so, in this case, what are we doing? We're scrolling through some sort of deep-sea, underwater, I don't know, like plant or site or something like that. And so, this concept is one that you can come up with yourself, but in our AI era, I much prefer to just have AI do the concept generation for me. And so let's start really easily. First thing we're going to do is sign up to Kimi K3, in case you guys didn't know this is the new frontier model intelligence dropped by Moonshot, Kimi's creators, and essentially Kimi K3 is really solid. It is on par with, you know, Fable, GPT 5.6 Soul and other great models. So, I'm just going to say, hey, let's wave over and see what K3 says back to us. This obviously isn't sufficient for us to make a website with. This is just a chatbot, so we're going to have to head over not to Kimi Chat but Kimi Code, which is sort of the code version of what we just saw earlier. Now, Kimi subscriptions are pretty heavily throttled and bottlenecked right now because it's such a cheap way of producing high-quality experience like this. So, you guys may not be able to sign up right this second. But when you are, they have a variety of different plans, like Moderato, Allegro, Allegro and Vivace, and it's just sort of a one-click sign-up situation. You just click subscribe, and it will essentially take you to a Stripe page where you can, you know, do the sign-up. Once you're there, you actually need to get Kimi Code, and the way that you do this in Terminal is pretty easy. You just copy this command and then you open up a Terminal. That's what I'm going to do over here, and then I'm going to drag this terminal into view. Just make it really big and then zoom in, and then, you know, Terminal may look kind of intimidating if you're new to this sort of stuff. But all you really have to do is just paste in whatever that command was, and Kimi will sort of do the rest for you. So, curl-fssL, whatever the heck is going on. What we're doing right here is we're basically just like updating the version right now, because I already have it on my computer. This may take, you know, the same amount of time, a little bit faster, a little bit longer, just depending on your internet connection. And once it's downloaded, all you have to do in order to make this work is just type Kimi. It'll then open up Kimi Code. Now, in case you're not already logged in, you do have to type \login right over here, and then connect to Kimi Code via OAuth. In my case, I am already logged in, but you know as it may open up like the Kimi page. Once we're done with that, all you have to do is type \clear. That'll clear everything else out up top, and now we can actually get to having Kimi do stuff for us. Now you don't have to do this in order to get what I'm about to show you, but I do publish all of my prompts entirely free on Maker Zero, which is my free community that I link at the bottom of every single one of my YouTube videos. So, I'm just going to go down there and copy this prompt here, which says, you're the sole creative director and senior front-end author for a premium interactive portfolio. Give me creative ideas, videos for 10 radically different, scroll-driven commercial landing pages. And this is the really important part: they need to be scroll-driven. The video must involve a single continuous eight-second extreme macro camera journey. This journey is what we'll use the main, captivating feature of our websites, so make these as interesting as possible. And what we want is we want Kimi to come up with just these concepts for us. You know, we don't necessarily need them to be the best concepts in the whole wide world, but we just want some ideas to sort of take advantage of. The cool part about AI is, for humans, coming up with ideas is very computationally difficult. For AI, which views ideas as sort of these plots on a big graph of possible concepts and stuff like that, ideation is actually really easy. The cool thing that humans are great at right now is employing our taste to pick things that we think might actually sound good or make sense to our audience, and so that's what I like doing. I like having AI ideate over a very large space of possible solutions for me, and then all I really do is I pick my favorite. And so, as you could see here we have a bunch of different ideas. This one up top is the Pour, Luxury Whisky. We start buried inside a single bubble in the whisky, the sphere's skin glowing amber around the lens. Then the camera pushes through the membrane into liquid gold, slides past rising carbonation threads, climbs the meniscus of the glass and breaks the surface tension. See that seems pretty interesting, but I don't know, I kind of want to do something more impressive than just a luxury whisky website. Here we have the Capsule, Skin care and Pharma. Begin on the surface of a dissolving capsule, the gelatin wall is melting in front of the lens like slow ice. The camera pushes through the membrane into a cloud of white micro-powder, drifts through the granules, each one catching light like a snow globe, and condenses onto a single droplet that falls and lands on skin. The pore it touches blooming smooth. Okay I like this, this sounds really solid, and I think that's probably one of the many ideas that I'm going to generate. So for now I'm just going to copy this, okay, and then I'm going to head over to just a Google Doc here, and then up here I'll call this Concepts. And just to make it really easy for you, rather than just generate one concept, because it's going to take the same amount of time to generate, um as you know multiple, I'm just going to do multiple simultaneously, and we'll find whichever one we like the best. Okay, once we have the concepts, we're actually already about 50% of the way there to designing a smooth, sort of jaw-dropping experience like this. Because if you pay close attention, you'll notice that despite the fact that this website, in particular, seems like there's a lot of motion going on, that the website itself is what's moving and rotating around, it's actually just the video in the background. And so the creative is really the heavy lifter of this site. You know the interactive experiences and stuff like that, that's important as well, but that's something that Kimi can do far easier. Okay, great. Once we have these concepts, of which I've picked three, all you need to do now is copy over a prompt that looks something like this. What I've done is I've just cleared through all of Kimi. Then I say, use the below concept to generate a high-quality macro video prompt for an advanced video model. For example, then there's a single continuous eight-second cinematic engineering shot moving forward from above a stormy cold North Atlantic Ocean descending smoothly beneath the waves through bubbles and suspended particles, approaching a monumental steel tidal turbine anchored to the rocky seabed, camera passing through the center of its slowly rotating structure with power current waters, visible, continuing forward to inside glowing subsea electrical transmission cables across the seabed, entering a vast concrete seawall, city lights activate, photorealistic documentary cinematography, physically accurate materials, strong foreground parallax, seamless one-take motion, no cuts, restrained natural color. What I'm doing here is I'm giving it an example of the level of detail that I would like. Then what I'll do is I'll go back over to that Google Doc that stores all of the different website concepts, and I'm just going to save one of them. And actually, just paste that in here. So, what I wanted to do is I wanted Kimi to generate a high-quality video prompt in the exact same style that I know performs very well. We're doing is we're just transforming ideas into prompts now, and you know we can use one of these to generate a big list of different high-quality ideas. We can do another one to actually generate the video itself. So now, you can see we're generating a single continuous 10-second cinematic macro shot opening on the hexagonal lattice of a single ice crystal at molecular scale. It's approximately the same length as this other one, and now we're actually good to design the creative or the video itself. After experimenting with a few dozen different video models and types of approaches, this is probably the one that I found that works the best. To make a long story short, we start by generating some sort of macro journey video and the model that I'm going to be using for this today is Cinematic Studio 3.0. I want you to know that you can use a variety of other ones like Seadance 2.0 seems to work pretty well for this sort of thing, but I just wanted the best of the best as of this point in time, and so I thought I'd use Cinematic Studio 3.0 to to generate them. Now, once you generate them, okay, this is going to be coming out at I believe 30fps. The issue with 30fps on one of these, like scroll heavy, you know, cinematic journey sites is you can actually see every individual frame as you scroll through, and so it's really choppy. It's a very bad experience, I would say, for the user. So instead, what we're going to do is we're actually going to take the the core video and then interpolate it, and that just means you know if, if this is a frame here, and this is another frame here, and this is another frame here, and there's some sort of element that's sort of like moving across the screen of this, okay? Since this is frame one, two, three, what it does is it takes frame one and frame two, and then it generates an additional frame, sort of between the two, okay? And then it'll take tape, frame two and frame three, and it'll generate sort of an additional frame between the two. That way, instead of it being kind of choppy, you'll actually get like a smooth movement of elements throughout the thing, and when we scroll through, it'll be a lot prettier. Now again, lots of different models you can do for this sort of interpolation. I'm going to be using Bytedance AIGC, to take us from 30 to 60. And then once we're at double the FPS, the vast majority of all these scrolling issues tend to disappear. Finally, we're just going to tie it frame-by-frame to some sort of smooth browser scroll, just so we can kind of get that out there and then we can actually start, you know, moving through a video on a screen and then we'll add the rest of the website as well. To make this work, I'll be using Cinematic Studio straight out of Higgsfield. It's fairly straightforward. This is just like a big video, audio and prompt library, um that contains more or less, you know, everything you need to copy and paste into, uh one of these models like Kimi K3 to make it work. Obviously using it in Kimi K3 is cool because Kimi is a pretty cheap and also very intelligent model. Um so, all you need to do in order to do that is just head over to sign up. They're doing some promo right now, you can sign up get an additional discount, I already have an account so I'm just going to skip past this. Inside of Higgsfield, once you're signed in, you're going to want to go to explore, up here, video, Cinematic Studio 4K. Okay, once you're done, just head over to Cinematic Studio at the top or you can go down to video and click on Cinematic Studio 4K that'll take you here. Um, you can see there variety of different ones: 3.5, 3.0, 2.5, I'm fine using 3.0, I don't really need all of like the cool scene changes and stuff like that. And then, what I'm going to do is I'm just going to paste in that prompt that, um you know Kimi just generated for us. And then, the resolution that we want, if you think about it, you know, at least for us, if you're doing a desktop experience, needs to be 16x9. If you wanted to do a mobile experience, which I'm seeing a lot more people do these days or maybe, you know, generating some creative for Instagram, you can do that by clicking 9x16. I'm just going to be doing 16x9 uh for simplicity. And then, you can use a variety different resolutions, the one that I'm going to use is 1080p, just because I don't want this to take too long. I also think that the duration slider, it makes the most sense to be eight seconds as opposed to 10 or 16, so I'm just going to set this to eight for now. Um also, I don't want to spend too many credits here since obviously every video generation, uh you know, consumes some amount of credits. In this case, looks like it's about 80. Um, you have custom multishot, smart and so on and so forth, that's fine. I'm just going to click generate, and then it'll actually go through the process of doing said generation. And so, when you click on this, it'll sort of take the whole prompt in here, okay? And it's kind of ugly right now, just because I realize it's on multiple lines, hopefully that doesn't impact the actual gen. And then it'll open up this new little modal where it says new project, processing. All you have to do now is basically just sit around and and wait. There's really nothing else to do. Um, because I want to be, I guess, mindful of my own time, I'm just going to generate multiple of these simultaneously. So I'm just going to go back here, and feed in the other two website prompts. So I'm going to go here, and then I'll go back to Kimi, and I'm just going to do, okay, do these two as well and then paste those in. It's now we actually have, you know, the capsule, we also have the circuit. Okay, and so we have all of this now for the capsule, I'm just going to feed this in, copy, paste, I'm just going to keep to the exact same effects because we want it 16x9. So click generate, and then the last one I want is the circuit, obviously. And it looks like that one is now done, too, so I'm going to copy that. After we're done generating, I'm also going to generate this. So now we have three generating simultaneously. Why am I doing this? I'm just doing this because, if you think about it, logically, like it'll take X amount of time to generate one of these, but you can actually just do them simultaneously, right? The model can work on multiple things at the same time. So rather than me just like waiting for it to finish and then doing another one, why not just batch all three? That way I'll have three times the creative to kind of look through. Obviously, I'm trading off my money here, uh in credits for, you know, time and and efficiency. But I typically do this because I'm never really satisfied 100% of the time with the outputs of AI. I'm satisfied maybe 30 to 50% of the time, which means, typically I need more than one sample or more than one output in my batch, in order to be happy with. And here is what looks to be a capsule dissolving and opening. This is really high-quality, very clean, like mycellar water type stuff there, improves the quality of the skin. So, I mean like we can scrub through this, just using their little editor. But obviously, I want to tie this to my scroll wheel, right? Here is another one, this is the city walk through, and so we are actually going through this like cool 3D city, and that city is actually a circuit as well, on some sexy wafer. All right, just took a break and saw that all three websites were done, so all we have to do is just click on the little download button here and it will automatically download it to your computer. I've already done that a couple of times, so I'm now we actually have the the videos themselves, which is quite nice. That said, doing this stuff manually is starting to get pretty tiring. So what I'm going to do is I'm going to take all this from the interface in Higgsfield, and I'm going to add it to Kimi directly, so that instead of me saying, hey, you know, generate me a prompt that I can copy and paste and put into Higgsfield, instead I just want you to generate the Higgsfield videos directly. Likewise, I'm also going to be able to say, hey, I want you to upscale these videos as well, and then create a pipeline so that every time I generate a video, it's automatically upscaled to begin with. How do you actually do this? It's pretty straightforward, just go to MCP and CLI. MCP is essentially what's going to create a little function for us that'll enable us to connect directly to Higgsfield's backend, which will save us the step I talked about earlier. Then just click this little copy button. Then once you're done, just head back over to Kimi and actually paste this in, and just say to Kimi, install this MCP. This is fairly straightforward. It'll actually go through and create like a connector behind the scenes that allows it to query Higgsfield and all of the models therein, which will save us the step I talked about earlier. Okay, and now it's actually written a file called mcp.json on our computer that's sort of just how, you know, the MCP syntax works. Once we're done with all that, all you have to do is just type \clear. By doing so, it'll initiate a new server, so that's what just happened up here. If it's not already connected for you, because let's say you didn't log in, you know, I've logged in on this computer multiple times, it clearly has some of my authentication credentials, just type \mcp-config like this, and it'll actually walk you through a brief little sign-up wizard where you can go back to Higgsfield and then just sign in. Okay, now that we're done with this, all we have to do is we have to find the files from earlier, which in my case, we're going to be three. We had this one, this one, and also this one. I'm then just going to copy, so Command C, to get all the names, and I'll say, interpolate this with Bytedance AIGC. The whole idea here is we're just going to be increasing the number of frames by two. It'll find the right Higgsfield model, and the that's what it's doing right over here. Now that it has um you know AIGC through Bytedance, it'll then actually perform. Now the unfortunate thing about Kimi is, despite it being quite intelligent, it can also be pretty slow at times. And so often, instead of just running one instance, like I'm currently doing on the left-hand side, where it's sending out those Higgsfield requests and so on, um I will run multiple, and that way, you know, while this is improving the quality of the media, I can also have other steps that are starting to scaffold the website. And so up here, I'm just going to go Kimi--yolo. Uh, this is just sort of like a funny mode that prevents it from ever having to ask me a question. It's on like the you only live once mode, so just let the agent do everything. Okay, so then finally, all I'm going to do is head over here to site prompt, copy all of this in, and you know, it's pretty long, but as mentioned, you guys can get that entirely free if you want to, and then paste this in fully um to Kimi K3. Now the one thing that we need to provide, I should say two things actually, is we need to provide both the video URL, which is on our computer, and we also need to provide that concept prompt that we used to generate it. And so, you know, the way this prompt works is essentially it will go through um, you know, a very in-depth series of steps in order to produce this nice motion graphic design, but it will ask for a video file name or a concept, and you can even say it says EG capsule.mp4. So, I'll just go back over here, open up Finder, and then I'll go to Downloads, and this is the capsule one that I want. So I'll say video is here, and then concept, and then I'll just go back to Higgsfield and if I click on this, it'll actually allow me to copy in whatever prompt I used and fed in there. Then I'll paste that in. Okay, and you're probably already seeing areas that we can optimize the hell out of this, and um the reason for that is because what we've done here is we've manually sort of made all these steps, right? What we can actually just to kind of weave this entire pipeline together to do all of this for us. And so I'll show you how to do that right after this is done with its okay. And here is the finished website. As you guys can see here we are smooth scrolling through what looks to be a pretty complicated universe, um I mean we have obviously circuit boards and so on and so forth and some cool sexy light at the end there. But I also like about this is you can hold to reserve and you know, presumably this is I don't know, us doing some sort of pre-launch or something like that for a product. Um but this is like a a live and working example now. You can also click from one section to the next by using the watch it dissolve feature, and then obviously you guys can go as fast or as slow as you want to uh with the manual scroll, too. And that's end-to-end. If you wanted now to say publish this on the internet, let's say Netlify or something like that, um like you know I did my Kimi K3 designs.netlify.app service, which contains all of these other websites, which you guys can see right here. Um it's actually fairly straightforward. All you have to do is just get some sort of static hosting site service, so maybe Netlify, maybe Vercel, and then just go to the service, log in, you know, go to the user settings, go to user settings, then over here under applications, there'll be OAuth, you can then click new access token. I'll just say example token expiring I don't know can we just say tomorrow or today? Let's do Click generate token, we can just copy that token into Kimi, and we can actually just give it to it. And I don't know if you guys could see but this is currently creating the site, um on my Netlify. So I've just fed it my key, and you can do this with whatever platform you want, you can do this with Vercel, you can do this with whatever. And now it is 100% online, so we've actually published this to netlify.app. Down in the bottom right-hand corner or left-hand corner there's sort of this like flow tour buttons so you can proceed as the whole video if you want to. And yeah you can you guys can actually access this website right now. All right, and I told you this is going to be the motherload. This is a single prompt that contains every one of these steps end-to-end. And so all you need to do in order to essentially produce whatever sort of style of motion journey cinematic website that you want, is you just feed this entire thing in, and then it'll just ask you, hey, do you have any ideas of websites you want to generate, or do you just want me to go nuts? And obviously, I kind of just wanted to go nuts. And so if I just paste in this entire thing into Kimi, okay, which is now showing me the whole prompt, and this is just a slightly different terminal in case you guys are wondering why it looks different, you can see that it is now going to ask me what subjects, products, industries, materials or ideas are you interested in? And I'm just going to say, you go nuts, and two, do you have any creative direction, references or constraints, or should I drive everything? You go nuts, too. And the end result is websites like I showed you guys earlier. I mean this is us going into the sky and eventually the whole horizon. Very sexy experience from the inside, legitimately inside of a hot air balloon. This is us scrolling through some dark dank cave, and then getting to it looks to be like a record player or something where the head is on fire. That one's a little bit more zany. And this one is like a foundry which, um essentially produces what looks to be some form of, I don't know, brass, or yeah, it looks like one of those old-school printing presses, which is also really neat. Um so you can have this generated as many as you want, it really just boils down to how much time you want to spend and how many credits, but hopefully you guys have everything you need to do the same. As mentioned, if you guys want all of the assets and everything that I use to generate all of these websites, it's entirely free inside of Maker Zero. If you guys want to get to the point where you can sell these sorts of interactive visual experiences to other people and get paid for it, definitely check out Maker School, it's the first link in the description. Maker School is my 90-day accountability program that shows you guys not only how to, you know, build really cool interactive experiences like this, but also build AI automations, and then more importantly, sell them to people that are asking uh for systems like this. I have a 90-day full money-back guarantee where if you do not acquire a client number one, I will literally just give you your money back, and it's because I'm super confident in the program of what it does, okay? Anyway, I'll stop showing my own products, have a lovely rest of the day, and thanks so much for watching.