A walkthrough of building a polished product landing page in 30 minutes using AI-generated images and video with Claude Code. The creator generates studio-grade images of a blender with Nanobanana 2, uses Claude to write a video prompt for an animated lid-opening sequence, then imports the result into Cloud Code to auto-generate a scroll-triggered, Apple-style website.
Here's how I build 3D animated websites with Cloud Code. So you know how on Apple's site we've got the product, we've got quotes come in, we've got dynamic elements like this. We can see sort of like the deconstruction of the product itself, and all of these features on the website give it a super professional and branded feel. And I'm sure that some of you guys have realized by now, but this website is not Apple. This is one that I built with Cloud Code using this new skill in like 30 minutes. All right, so I'm going to walk you guys through this process step by step so you can see exactly what I did to create these really cool animations. And so all I did here was had Nanobanana generate two different images for me and then turn it into a video. So for example, that first one with the Apple Watch is just the Apple Watch kind of opening up and then exposing all of its layers. And then when I wanted it to close back up, I just prompted it to do the opposite. And now we have the second one where it goes from that end frame and then kind of like folds back in on itself and reveals the Apple Watch. So I went to Nanobanana 2 and I came in here and did a 16:9 aspect ratio image and I said, I need a professional studio-grade image of a blender. It should be against a plain all-black background with no shadows, no hands, no reflections. 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. I actually went over to Claude and I gave it the start and end frame and said, help me make an AI video prompt where I want the lid to float off, I want fruit and juice to be dropped in, and then I want the lid to be put back on. I put that into Kllng and here's the result. I haven't watched this yet, so hopefully it's good. Okay, interesting. I mean, obviously we maybe want to fix that a little bit, but I'm fine with that for the sake of the demo. Okay, so I downloaded that video. I'm just going to drag it over here to the left-hand side. And you can see right now that this video that Cloudcode is looking at is the exact one that we just generated together. Help me create a one-page product landing page for this product. But now you can see it's asking us some questions. So the first one is, The first one is, what is the product name and brand for this blender? Then it says, what kind of content sections do you want? I'm just going to go with the full premium, which is what we've been doing for the other example sites. All right. 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. So let me go ahead and open this up and we will see what we got. So you just saw the Obsidian loading. We've got Obsidian Vortex. It looks really clean so far. Now let's see what happens when I start to scroll down. So we see the blender starts to appear. Nice. And as I continue to scroll, we have, we didn't build another blender. We engineered a force of nature that reduces anything to nothing in absolute silence. As I keep scrolling, we can see that the fruit is starting to appear. There's also text in the background, as you can see, that says, I think it says obliterate everything. So that's pretty cool. If you wanna watch the full breakdown, then click on that play button right here and I'll see you guys over there.
