Transcription
Anti-gravity just changed everything about building websites. And if you use it correctly, you can build beautiful, stunning websites that turn viewers into buyers with no coding experience. I've sold websites to clients for thousands of dollars. And in this video, I'm going to show you my exact system for building gorgeous websites with scroll animations and integrated AI systems to help you get more clients, save time, and make more money. And if you don't know who I am, my name is Jack Roberts. I sold my last tech startup with over 60,000 customers and now I run a 7-figure AI automation business. So if you haven't already, grab that coffee and let's dive straight in.
So anti-gravity is powered by the brand new Gemini 3, which makes it all possible to build these beautiful websites and what used to take hours, in minutes. Now, a website with no purpose is like a blank shop. You can walk in there, but it doesn't really have anything to sell. It doesn't really do anything for you. Which is why we want an incredible website that does five things. First of all, it needs to have a gorgeous design. It needs to have a hero animation. It needs to be able to convert the viewers of that website into customers. We want amazing copy. And we want it to be easy to deploy with a custom domain, edit, manage, and do anything that we want to.
And so we're going to build these beautiful AI systems with those scroll-stopping animations using a very simple five-step framework called the pages framework. Now, imagine that you and I get in a car together, but we don't have a specific destination. How do we get there? Well, if we don't have a destination, any turn in any road will get us there. And that leads us very nicely onto the first foundation of the pages framework, which stands for purpose. And the idea is that we need a destination. We need a specific job for the website to accomplish as our foundation. Otherwise, it doesn't matter what car we're in or how fast we're driving, we're never going to actually get to our particular destination.
Now, this depends massively on the type of thing that you're selling. If you're selling an online service, you're an accountant, you're a dentist, you are maybe an online coach, consultant, this framework is very proven. For example, which is the landing page with a hook, we have a value proposition, we have testimonials, we have a CTA, and then from that, we add some kind of value. We capture information. We send out an email sequence and then we have an offer to book a call. But if you're selling, say, a product, and let's say in this video, because I've got this here, we want to, we're working with a client and we want to create a beautiful AI system website. It's gorgeous for iced coffee. What would we actually do? Well, one of the best places to start is to do competitor research, and we can use this in anti-gravity, which is very cool.
So, what I want you to do is head over to anti-gravity. And I did one earlier, for example, on UFC gloves, like you saw on the sample website, which is the entire product that I built here. And actually, what anti-gravity will go ahead and do is complete research on that. So on the playground section, anti-gravity, if you don't know how to get there, just click down here on you'll see editor and then you'll see agent manager. Just open up that agent manager and on the left-hand side in playground, you can give it a really simple prompt that sounds a little bit something like this, like, "Hey dude, I want you to do some competitive research for me on coffee beans, specifically iced coffee. I want you to find the top five brands that people buy to make coffee. And what I want you to do is break down exactly everything on their website in terms of their positioning, their CTAs, anything in terms of vibes, colors, logos, the color palette, the kind of like feel, anything that would be useful in me constructing my own brand. Beautiful. Okay."
So, we start with some information like that and we send Gemini off into plan mode. And then what this is going to do is use the Firecrawl MCP. If you don't have that installed, very quickly, all you do is you come down to open editor. Okay, you click on these dots here and you can come down to MCP servers. And MCP is just a fancy thing that lets us connect things to other things. It's a universal language. Think of it like an Iron Man suit for anti-gravity that will let it go out and do anything you want to. And Firecrawl specifically, what that lets you do is search the internet and chat with websites. So, for example, you won't see Firecrawl on this, but you can add it in as a custom MCP. I'll put a link down below on screen if you're not familiar how to add that in. But once you do it effectively, you'll see all your MCP servers here and you can add it by basically within this view raw config and essentially you can kind of get like equipment for your Iron Man suit. It's incredible. And as you can see, I've got the Firecrawl MCP right there. I'll put the code down below as well. So you can just add it in and you can grab your own unique URL from Firecrawl itself. When you come to firecrol.dev, you can see you can get the API key here under API keys on the left-hand side. Copy that, add that in, and literally you'll be able to do this entire internet research yourself.
So I'm going to come back over to the agent manager and we're going to have a look. We are allowing it to go into the browser if we want to, which is cool. And again, we can now leverage anti-gravity's visual capabilities, which is awesome. So, we can allow that to happen. It's now going to open up things, do various different research, get a sense of it, so we can actually build our proper brand identity. And again, these are the foundations of the pyramid upon which we can build a very high-converting website for any kind of particular purpose. And again, with Firecrawl, all you're doing is literally copying this here, entering in authorization, and it's bearer space that API key and just paste all of this information, your MCP config here over to Gemini. And so add this into the config file and when it refreshes, you'll have full access to Firecrawl. What's amazing here, and you can use anti-gravity as a research agent for anything. It's literally going down, searching these places, adding it to our CT. I think it's so freaking cool and it can open up Chrome now. You can see everything that it's doing. It's clicking on things. It's investigating the websites and you can just leave anti-gravity to go ahead and do this while you sit back and actually drink some of the iced coffee.
And then we come back to anti-gravity. It's completed its competitive research, which we're going to click on there and then we have a full, beautiful breakdown of these different coffee shops. Side note, by the way, Blue Bottle Coffee is gorgeous. Actually, one of the best coffees I've ever had. So, now we've got this competitive research locked down. We're going to save this file and move on to the next step. Now, we know exactly our purpose, our destination, and we've got all of the competitive research that we need to. The next thing we've really got to think about in our framework is the following, and it's called the empty shop on Bond Street. We decide when we see any shop anywhere we go on any walk we do, whether or not we want to go in within seconds. We look at it and decide, is this something that I want? In our website terms, we call this the hero section, which stands for the second part of our framework, which is A for anchor. Now, the idea of the anchor is we want to capture, enchant, and drop our core message with something that is literally scroll-stopping and gorgeous and beautiful and communicates the key value of what our website actually does. And there's actually two ways that we can realistically do this. We can do it with something like this, which is my agency website, where we have this beautiful intergalactic animation and this fantastic thing here you can interact with and things. We've got more of a text-led one and obviously you can go and I'll just show you this in the community for examples of what you can come and grab. Right? If I show you in this vault section here, come down to this website, you can see we've got this beautiful list of basically things you can get for inspiration. And the idea of this is that we can browse around and look at different brand identities to decide what are the kind of feels and vibes that we want to personally integrate into our website. Looking at these world-class designs, we can create a mood board and actually feed that to Gemini in anti-gravity to say, "Hey, I want you to take these things and craft me a hero."
What we're going to do though, actually, as an example in this video, since I covered a lot of this in depth in the previous website video, is we're going to build a gorgeous animation that as you scroll, actually reveals more and more of it to make it look as epic as humanly possible. Kind of like this one here, where you scroll down, you can see the gloves actually animate, and then you get this great, beautiful website effect. And this only takes a couple of steps. So, I'll show you exactly how you do it. And once you've done it for this, you can basically build any animated website, whether it's someone walking through a door, whether it's a product exploding, you literally name it.
Now, for this example, we're going to do iced coffee. And what I would like us to have is an iced coffee website where the coffee explodes and there's lots of gorgeous things. So, you're going to head over to Google Whisk. Now, the first thing you can do with Google Whisk is you can give it a prompt and also an image. So, I'm going to give you all these prompts down below so you can still have a look at them. And what we're going to do is a scroll-stopping start frame. So, literally this is designed in a way that you can literally give it this template, okay, which we're going to give to Gemini. And we're going to replace it with our own particular image. Okay, now here's the thing. We are going to have a we need a start image and we need an end image and we want to give it a specific feel and vibe to it. Okay, so what I want you to do with this information is we're going to head over to Gemini. You're going to paste in this prompt and what you're literally going to do is come down and say, "Using the below as a placeholder, I'd like you to amend this prompt to be for a gorgeous cup of iced coffee. It's very important that the background is dark gray. Okay, beautiful. Fact is black. And I'll show you why in a second. Okay, cool."
So now what Gemini is going to do for us here is take this prompt and basically just it has all the stuff in there like it's really high quality, it's 8K resolution, it's got a dark background, it's kind of got this professional feel to it, etc., etc. And then what we also want to do if we can is head over to midjourney.com and we want to find a cool reference image. So if I said iced coffee, for example, let's have a look. You know, this is gorgeous. I Oh, I really love the vibe and feel of this. This is a really nice image. Okay, so let's just say we like the look of this as our iced coffee, which is I mean I want to drink that right now. I don't know about you guys. You're going to come over to work and you're going to paste that in there. Sometimes it doesn't let you paste. So what you actually need to do is come down and just save the image to your desktop. Come back here. You can just add the images. Click on here for the subjects by upload image. And just like that, we've got our iced coffee rocking and rolling. And then when we come back over to Gemini, we can get this prompt here. Okay, now this is pretty much the magic cuz the animation is going to have a start image, an end image, and then it's going to animate. And again, that could be a guy walking from left to right as you scroll down. It could be anything that you you physically want to. Okay, so actually, you know what we could also do is probably just add in the coffee image if we want to, but it doesn't really matter. So here we come down. We're going to scroll this one and we are going to copy this. And then I'm going to come over and add that prompt in and then click on go. And then Google Whisk is going to generate two images for us, which is awesome. I'm give that a hot second. And since it's come back with a tumbler, I'm not massively a fan of that personally. So I'm going to come back over and say, "Hey, amend the prompt based on the reference image." And we can pretty much shop if you like for images and inspiration on Midjourney rather than Google where you know who knows what copyright magoo might potentially happen. That is also gorgeous by the way. That's like a g that's absolutely fantastic. Wow. And we can also add a brand logo on it if if we want to as well, which is really really cool. So we'll give this a hot second. Okay, great. So we've got new prompt. We can read this stuff here and then add this prompt in right here and then set Whisk off on its journey. Give that a second. And just like that guys, we've now got this gorgeous thing. I even asked it to add a logo in. And look at that. That is freaking amazing. So, we've got the Java join. Obviously, you could just upload your own logo for any brand that we're doing, which is really cool. So, we've got the start image, which is awesome. The next thing we need then is to get the end image for this. And to do that, let's come back over to our prompt and let's come down and grab our end frame. So, this is a cinematic end frame image that reveals the inner world of blah blah blah. So, for example, we're basically going to show it deconstructed. So, we want all the ice everywhere else. And as we come down, you can see it explode and do various different things. Okay. So, let's come down here and copy this. Let's head back over to Gemini. "Hey there, I'd like you to use the below prompt to create something that would be a unique end frame. Just for your context, I'm doing an animated video of a beautiful cup of iced coffee. And what I want to do is as I scroll, show that it explodes. And I want it in a kind of like cool, creative, interesting, chaotic way that shows all the beautiful ingredients and the ice and the coffee and lots of different stuff. So, use it below template and just replace that with information based on my desired outcome. I've also included an image for your reference. Cool."
Come down and of course for the tech for speech to text I'm using Glad because it needs to be very quick and very, very safe and private. So I'm going to come down and grab the image that we've got, which is this guy right here. So let's come down and copy the image. Come back over and we'll drop this off and then send Gemini on its way and let it do that for us. And then just like that we get the prompt. So we grab this and then we head back over to our wonderful Whisk. And so this part of the process is important that you spend as much time as possible because the start frame and the end frame is basically going to be the hero images. So I've actually just come back and what you basically do is you click on it and then you enter in the end frame prompt, which means it takes the core image and then will do it. And when you click generate on this, for example, if I just enter in the prompt and hit generate, it will now generate two further images. So feel free to do a few different iterations. So we've got this one here, which I think is really freaking cool. You can see and you can even see the logos. It's the exact same thing. And so you want to pick what you think the best end frame is because remember, this is going to be our hero image. Now, once you've done that, you're going to download both of them. So, say for example, I like the look of this one and I like the look of this. I literally click on it like so. I click on right click and let's just save image as and we'll call this one coffee one. I've already downloaded it, but you can see it is cool. And then you can do the second one that you think is really cool, which I think would be this one here. Just save this image as well as coffee two. Beautiful.
And so, the next step then is to head over to Google Flow. And I want to shout out someone called Andy who did a beautiful breakdown on this system. And I think when you combine this animation system with some core principles for conversions, you can literally take over the game with this stuff. It's so freaking sick. So, we're going to be on labs.google.com/flow and click on generate with Flow. This is the bit where we take both frames of the video, the start frame and the end frame, and turn it into, you might have guessed it, a really cool video. So, what we're going to do is come down to new project, like so. And it's so crazy to me that all this is done with the Google ecosystem of products. It's crazy. So, come down to text to video and click on frames to video, like so. And then you'll see two different things to add in here. Okay. So, what we're going to do is come down, click on this, and we're going to upload our first image, which is coffee one. And we crop and save. And the reason why it's black, by the way, is because the rest of the website is also going to be black. So, it looks like it blends in beautifully. So, crop and save. Beautiful. And then we click on another one here. Uh, and we'll add a second image. And then this is our coffee two, which is cool. And that's uploading very nicely. And then we can give it a prompt. So, let's head over to our wonderful phenomenal document here, which is Google Flow. So, we're going to come down here and then we are going to come down and grab this. Now, the prompt itself, you can sort of say, "Hey, make it a transition." I kind of like giving a little bit more detail so it's more consistent and again, we can create as many iterations as we want to. So, going to come over here now to Gemini. I'm going to say, "Hey, I want you to fill out the below template based on the transition of the below images. The output that I want from you is a beautiful text output using the below template, uh, that would transition both images that would show the beauty and the wonder and all the beautiful ingredients within the product. Needs to be visually stunning." Okay, cool. And then we're going to paste in the template like so. And then let's just put, "Use this template." And then I'm also just going to give both images over to Google Gemini here as well. I've attached the images just for your reference. Cool. And then we'll send that one off. Great. And then we've got the prompt back from Gemini. So we're just going to copy all of this prompt right here. And then we're going to head over back to Google Flow. And then we're just going to give it the prompt, which is cool. Now, quality. Just make sure that you've got the VO3.1 quality, which is going to be the fast one. We want the best model and we want it to look as good as humanly possible. Come down and click on submit and that'll create two different versions for us. Don't be afraid to create a couple here until you find the one that you like the best. Do you know what I mean? If you have like six to eight images and then six different videos, that's completely cool. We're just trying to create something that's gorgeous, showstopping, and will look amazing on our website.
And just like that guys, it is ready to rock and roll. I've got my iced coffee on hand now, ready to experience this. So, let's just see what it looks like. So, we click on play. Okay, that's cool. And we even got the sound effects, which is decent. I don't think we need the sound effects, but we've got them in case we wanted them. That's cool. So, that almost has like a double edge one. You know what? I think we do one more iteration of this. Let's just play back one more time. And I think, guys, what I'll actually do with this one is give it just a generic one. "Hey, I'd like to create a visual, beautiful, and very consistent animation from one frame to the other. Just showcase all the beautiful ingredients and deliciousness of the brand, making it a visually engaging and explosive transition, smooth and professional." Why don't we add in there something like, "professional level studio," something like that? And you know, just have a play around with this sort of stuff. Like the prompt I gave you will give you a really great baseline, but you can flirt around with different prompts to see the kind of visual style that works best for you. And then when you fire it off a couple of times, we've got some interesting ones. So this one was a very simple one that we got. You can see I thought was very cool. Opens up ice. We even got the sound effects. This one I think is a winner though. So we'll go with which actually was the big prompt that I gave it. So let's check this one out. Lots of stuff happening. All right. All right. Cool. And then we got this one here. This is cool. You can just have a little play around with it. Find one that you like. And then once we've got that, what we're going to do is download the video. So, let's say we like this one, for example, and we're going to come down and download that. Just come down and click on download and download original size, which is awesome. And let's say I also want to come down and download this one as well. So, I've got a second option. And let's do original size. In fact, actually, what I recommend we do is we go for the upscaled version here, just so we get higher quality. Cool. Sweet. So, we'll download that. It's all playing in the background, having a great time. So once we've done that, we can move on.
So once we've downloaded it, you can see we've now got it on our laptop, which is very cool and it's having a great time and popping around and lots of cool animations. So what we need to do now is actually compress this in. First of all, we need to compress it and we need to turn it into images so as we scroll, we can see because all the video is, as we know, is just a series of frames. So what we're going to do is come over to easygif.com, which is a very cool website. You're going to click on choose the file. to just click the file that you just downloaded, which is awesome, and then click on upload video. You'll see lots of default settings. I found these to work just fine for me. So, click on convert to webp, and then this should turn it into lots of images for us, which would be fantastic. And then we're going to download all of them as a zip together. So, give that a hot second. Okay, great. And actually, what we then need to do is come down here and under this, click on convert to JPEG basically. And when that's done, we are then going to come down and just convert that to JPG. So give that a hot second and that will then convert it into a gazillion images with everything that's going on, which is great. Just come all the way down to the bottom like so. And then what we want to do is just download all of them as a zip, which is fine. Call it coffee zip. Fantastic. Sweet. And then what I want you to do is click on that file that you just downloaded. And then we're going to unzip them together. And as you can see now in coffee zip, we've got all of the frames for our project file.
So next I'm going to do is open up a new anti-gravity instance. So we actually built the beautiful website. We've got all our competitive research. But let's click on file. Let's click on open folder and what's called a new folder. And we'll call this one coffee website. Okay, beautiful. Create this one here and click on open. And then what I want you to do is actually grab from your desktop that file and bring them into the anti-gravity scenario. So we're just going to grab it and then drop it into coffee website and click on add folder to workspace like so. And we trust that to be cool. And then these are all the frames from the video. Awesome.
So, the next thing we need to do then is actually go back over to our wonderful prompt system here, which is right here, and give it the below anti-gravity system prompt. So, let's grab all of this information, and once again, come back over to Gemini, create a new window, and just say, "Hey, I would like you to amend the below prompt based on a website that is going to be about coffee. In addition to that, I'd also like you to add in some information about the branding and the section." So, the way I'd like this website to work is top is going to be the animated coffee. And then as you scroll down, I would like there to be three core features about the coffee brand. Then I'd like it to be testimonials. And at the bottom, I'd like there to be a CTA to order some of the delicious coffee. And I'd like to use some of the competitive intelligence to improve the prompt below. Okay, sweet. Come down. I'm going to put sample prompt. Beautiful. And then we can add in all the insights, the color, the color profiles, and everything that we gleaned from our competitive intelligence thing. Little hack, by the way, if you're ever wondering about how do I actually create brand palettes and stuff like that, coolors.co is a great one. I did this with my first tech startup. It was awesome. You can basically create a generator. You hit random generate and it does stuff until you find a color that you like. You can say, "Cool, I'll lock that one down." And then you can move around and then you basically end up with a really nice complimentary set of colors. But obviously, it's good to find an existing palette that is complimentary, just like we did with Glido. And what's cool about that is that like your brand really comes to a new level when it's reflected and looks the same on everything. So our brand here, for example, feels exactly the same in the app as it does online and various different things. And here I am shouting about things and having a great time. All right, cool.
So now we're going to get Gemini to fill out that prompt for us, which is cool. And we just need to give it the competitive research. And once again, you can also on Firecrawl, if you want to go on their website, you can come to playground on the left-hand side. You can do what we call brand extraction by entering in any business name you want to come down here and make sure that branding is enabled and click on start scraping. This is for brands that I never copy anything. You can take inspiration and it's more about the why behind it. Remember, positioning is the why you question. So if you can find something you really like again, like, you know, this is an amazing website now and it can pull down all this cool information about colors and profiles and stuff that we want. And now we've got fontage, we've got color profiles, we can look at the things that we're interested in and just kick some butt with that, which I think is amazing. Great. And then we've got this from Gemini, which is cool. So we've got the revised prompt set. I'm going to come down and copy all of this beautiful stuff right here, which is ace. And then when we've got all this cool stuff here, what we can do is swing back over then to Gemini. So let's come off this and pull back up in our agent manager and chat with our new agent. And then we're going to give it this prompt here. And bam. And make sure you got planning mode enabled. That just means it's going to think a lot more about what it does. And then we click on send. Then anti-gravity will begin its beautiful coding and development.
Now if you find yourself constantly putting accept, accept, accept, accept, remember in anti-gravity settings, you click on anti-gravity in the top left. You click on settings, anti-gravity settings. You can actually determine how often you want the review policy to be for the agent and for the browser at the same time. Okay, which is really cool. So bear in mind, all we're doing at this point is the hero section. It's that first initial wow moment. And we're doing something that's really cool with the scrolling animation that you you would see on Apple, for example. And again, we can do multiple things. We could, if we really wanted to with this stuff, you can have multi-frame videos. So, you can have a start frame, a second frame, a third frame, and a fourth frame. And we can really control how that works. So, for example, a beautiful example of this I'll show you as this is working off in the background is I think it was Opal. Opal was a good example of this. I thought was a really gorgeous thing. But if you check this out for example, this well it did used to move as you go down. Okay, there you go. You can see it. You see how that's like moving from left to right. You can do that. All that is by the way is just frames. It's frame frame frame frame frame frame and it just connects them together in the exact same processing skills that you've seen on this. And this is a really beautiful example of this. You build up the prototype thing and then you just change a couple of things and you connect it together using the exact same tools that I've shown you in this video. It's really, really, really freaking cool.
So we come back over and anti-gravity is working on building it for us. And then the magic will happen with anti-gravity within Gemini. And one of the interesting things I also recommend that you do by the way is a little side to make sure that we can one-shot it. In other words, that we just works in one go is on the left-hand side guys to create a folder and call it, for example, images. And then actually just drag the images into the into the folder because when you give it the prompt, you can for example come over here and just do the at sign and say images and then basically it will work. But this has designed it for us. So let's check it out right now. If I swing over here, you can see we now have our beautiful website. So let's just see how it works. As you can see, "Crafted slowly, brewed with obsession, coffee perfected" with the logo, the system of purity, lots of interesting information. And then we've got the actual CTA to come and crush it, which I think is absolutely gorgeous. And I added this kind of like anti-contrast style where I have the text in the middle and you can see how it all just loads up and it can do anything we want to with this gorgeous, gorgeous website, which I think is crazy.
And now we have this beautiful scroll-stopping animation on the web page. And we're in a car. We've got our beautiful destination. The next thing that we need to think about then is actually how do we get to that destination? Now say that you and I are in this car together, okay? And our satnav is telling us where to go, but it's saying like 15 different instructions at the same time. It's telling us to turn left and accelerate and do left and do this. The truth is, if you tell someone to do more than one thing at a time, they end up doing zero. And just in the same with our website, we can't be having 15 different things happening at the same time. We need copy that has one frame, one message that leads the user to take the desired action. Which is why the third step in our five-step framework stands for guide. And so the idea with guide here is that we take the user on a journey with the copy that gets them to the point at the bottom where they can actually go ahead and purchase exactly what it is that we want to do that.
And to do that in Gemini, we can give it a really cool specific prompt focusing actually on the copy. So, "Gemini, what I would like you to do is to go through the entire website and I want you to set the concept of selling Maui, not the flight to Maui. I want you to go through the website and make sure it has the following structure. After we've got the core features, I want to make sure that we have some room for testimonials and then a CTA at the bottom. I want you to write the copy selling the grass, not the grass seeds." And then what we can also do with this guys is take a look at different language and different different websites. Find out the copy that resonates with our target audience based on that competitive research document that you did. Now, Gemini is going to do a really big, interesting deep dive and planning thought on that because we're in planning mode and then we're going to make sure that we refine the copy. And if you remember on our competitive analysis document, one of the things that we noticed is that the CTAs are always in a specific type of way. So, instead of saying, for example, "buy now," you might say "unlock your first X." So we really want to take and make sure that the copy is cohesive and that the actual journey itself on the website has one core message at one particular point through the entire copy and it's actually driving conversions in the right way. My last business, we had 50,000 unique visitors per month which turned into 3,000 monthly customers and little small tweaks in the copy and the layout and the design had a huge impact on the number of conversions that we've got. So why this point is so important to hone in and refine.
And now we've created this beautiful copy. We've got an incredible scroll-stopping animation. What we need to do now is actually polish it and take it from an 8 out of 10 to a 10 out of 10, which takes us onto the fourth step of our five-step framework, which stands for elevate. Now, in elevate, I want you to think of elevate like a sniper, where you kind of look at it like a canvas, and we're going to pick particular things to improve it. And to do this, we're going to do what I call UI sniping. So what we want to do is get a list of UI component libraries, which effectively represent really cool code that we see around, and we want to take that code and shift it and implement it into our beautiful website. Right? So say for example, this button looks cool, but what if there was a better button for us to use somewhere like so? What we do is we find these beautiful libraries and there's many of them and essentially all we're going to do is come down and grab them. So for example, this one here is really cool. So this is codepen.io layer. And as you can see, when you click this, it floats around and we get a big nice, beautiful tick. And there's so many really interesting ones that you can use like this. It's so cool. But the one I find really, really cool is Magic UI. So, for example, I've got this rainbow button here. There's a shimmer button. There's a ripple button. And effectively, you can look down on the left-hand side and they've got everything here. They've got like text animations. They've got line, basically aura text. Like I don't know what aura text is, but it looks really freaking cool. I guess it's this kind of like aura type of look kind of thing. But basically, you find the code that you want and all we do is we click on code like so. And then we just literally copy this right here. And the cool thing about Magic UI is it's got an MCP. So all we do is going to come back over and we're going to say, "Hey there, dude. What I would like you to do is install this Magic UI onto the terminal. And then I want you to input this button at the bottom of the page instead of one that we've already gotten." Okay. Bam. We enter in the code and effectively we're just going to come and grab the URL for the website and we're going to throw that one in there. Now, I could I could install it manually, but I just want to show you exactly how that physically works so you get a good idea of it and how effective this can actually be. And then at the bottom, I'm just going to come back and clarify the specific button that we're replacing, which is going to be the "claim your moment." To be clear, we are replacing the "claim your moment" with this beautiful rainbow UI. Fantastic. Cool. We send that all off to Claude. We're going to install that onto the laptop and then essentially we're going to pull that in and then use this beautiful, gorgeous design. And I should say with this particular one, we're installing packages on the desktop, but there are other things that we could use. For example, this one here that doesn't require you to do this where you actually just get the code. And in this case, all we would do is copy this, copy this, and copy this and then paste that into our scenario and then it would actually use that code to correct the assets for us. It just depends on the actual library that we're using.
Now, anti-gravity has done that. Let's take a look at the website. We're going to scroll down and do we see a beautiful button? "Claim your moment." How freaking cool does that look? But the point isn't the button. The point is the fact that we can grab anything that we want to from Magic UI by just looking at the stuff on the left to be like, "Dude, what looks really freaking cool? I like the tweet card. I like these circles that are orbiting each other. I like these avatar circles." You can just grab literally whatever you want to with this code, throw it in and do whatever you want to. It just gives you customizability on a level that we haven't seen before and it takes the guesswork from the models and puts you in charge and taking it to a completely new level. So you can build pretty much any website you want to with the best UI components on the planet.
And now we've created this beautiful page and we've elevated it. The last thing that we need to do is actually get it live so we can get a custom domain and get it in front of customers. Which is where the fifth and most important step stands for ship in our pages framework. Now to do this, we're going to put it on GitHub where our code is going to live and then we're going to deploy it on Vercel and at any point we want to make any changes, we can do that directly within anti-gravity and that will reflect in our website. So cool.
Now to post this into GitHub, we're just going to head over now to GitHub itself. And what we're going to do is click on new for new repository. We're going to call this one coffee website, which is cool. And the description will be "the best coffee website on planet earth." All right, we like that. Choose visibility is public. Everything else is fine. And click on create repo. And then we're going to get the code. And we can actually give that then to the terminal to post it. So what we're looking for is this code right here. So we just copy that like so. Come back over and we're going to say something like, "Hey dude, I'd like you to publish all of this in the below repo for me. Thank you." All right. Bam. We come down. We give it the repo, which is a public repo, which basically means it can now go ahead and do the access. We can connect GitHub as well and essentially which means that even if it's private, we can still update and do everything from anti-gravity if we want to. So look, perfect. I'll push our coffee website to that repo right now. That's doing it in the background. But the question is, how do we get from this repo to something that's live? So you can see things like our website here, right? Without for our agency does loads of cool stuff. So how do we do this? And if I make any changes on this, by the way, in anti-gravity, it reflects on the website, which is really, really, really freaking cool. The way that we do this is we're going to head over to Vercel.com. Now, Vercel takes everything from GitHub and lets us publish it. So, what we're looking for now is we're going to refresh the page. And you're going to click on add new and click on add project. And then we should see this coffee website that's just magically mystically appeared. So, click on import for this one, which is cool. The framework is Next.js. It will find that for you automatically. And then all you're going to do is come down and click on deploy, which is cool. And all that's doing is taking all the code from GitHub. So, if I refresh this, we should see the code right now appear for us magically. And it does, which is cool. So anti-gravity has done its job and now this is going to deploy for us in the background and then it'll have a unique domain that anybody on the planet can access and then we can give that a custom domain for our brand, which is cool coffee company, whatever we want to do. And the other thing we want to do when we're deploying it is starting to do tests. This is where we can do things like mobile optimizing it. So checking like, great, it looks awesome on desktop. What does it look like on mobile and how do we change that? And you can do all these specifics and manage all of that with anti-gravity. And then we get a big congratulations that the website is now deployed. So we can then click on this guy right here and open it up in a new window, which is awesome. And then when we open up a new website, you can see we've got our fantastic website here, coffee website for Vercel, the daily escape, all the way down. And as you can see, it's all there, rocking and rolling, and we've got a beautiful animation, fantastic thing, and then we can "claim our moment" and get started right there.
Now, building websites is an incredible functionality, but it's only one part of a multifaceted skill set. Now, what we need to learn here is the other parts of building AI systems that can take your business from this to this.