How I Build Animated 3D Websites with Google AntiGravity

Watch this. When I scroll down, the keyboard doesn't just move. The key caps lift off. The switches separate and the internal layers break apart in 3D. You can literally see how the keyboard is put together as you scroll. This looks like one of those high-end product launch websites that companies like Apple and Nothing usually spend thousands of dollars on. But here's the part that actually matters. I built this entire website in under 10 minutes completely for free using a simple workflow with Google Anti-gravity. I'm not using any drag and drop website builder here or coding the entire thing from scratch. This is anti-gravity at its best generating real production level code. And in this video, I'm going to break down exactly how to build this website from scratch. You can do this with any kind of product, not just keyboards. And at the end, I'll even leave all the prompts I'm going to use in the description below. Let's get started. The first thing that you need to understand is that a lot of people just jump straight into code and try to build the scroll animations first. So before we even touch anti-gravity and start building the 3D keyboard website, we need to prep the assets. Now to do all of that, we'll be using two different Google AI tools, whisk and flow. Whisk is what we'll be using to generate our keyboard images and flow is what we'll use to animate those images in a short video. So let's start by opening Google labs and inside labs open whisk. When whisk loads look over on the left side of the screen and you'll see a tiny arrow icon there. Click on that to expand the panel. Once it opens up you'll notice that W gives you three different prompt boxes. For this step, we're only going to use the one called subject. So, you can just ignore the other two for now. In the subject field, start with a very simple prompt. This isn't meant to generate the final image yet. It's only there to clearly define what we're about to build. Think of it as setting the direction before doing any serious visual work. And then click on generate.