Full transcript
0:00Hello guys, welcome back to the channel.
0:01Today we're going to build something
0:03absolutely insane with Google
0:05anti-gravity. We're starting with a
0:07completely empty Next.js project and by
0:09the end of this video, we're going to
0:10turn it into this immersive interactive
0:12world called Floria. We're talking
0:15cinematic typography, stunning hover
0:17effects, 3D elements, scroll-driven
0:19animations, image transitions, a custom
0:22discovery section, and a fully animated
0:24footer. I'll show you exactly how I'm
0:26using anti-gravity to build each
0:27section, generate and integrate assets,
0:30add interactive effects, work with 3D
0:32models, and bring the entire website to
0:34life with advanced animations. And of
0:37course, I'll show you the exact prompts
0:38I'm using, the results we get, and even
0:41what happens when things don't go
0:42exactly as planned. So, if you're ready
0:44to see just how far we can push AI to
0:46create a truly modern and interactive
0:48website, let's get started.
0:59So guys, for this video, I'm going to
1:01use Google anti-gravity, but you can use
1:03any other AI agent or IDE out there. The
1:06overall process will be pretty much the
1:08same. First, I'll open a new folder for
1:09my project. Before starting the creation
1:11process, I want this project to be built
1:13with Next.js, so let's navigate to the
1:16Next.js website and copy the
1:18installation command. Then, I'll go back
1:20to anti-gravity, open the terminal,
1:23paste the command right here, and don't
1:25forget to add dot slash at the end so
1:27the project gets installed in the
1:28current directory. Hit enter and wait
1:30for it to install all the project
1:31dependencies. Now, as always, I'll start
1:34by looking for some design inspiration
1:36for our new project. For that, you can
1:38explore websites like Dribbble or
1:40Pinterest. For example, I found this
1:42hero section design on Pinterest, so I
1:45want to download it and use it as a
1:47reference for my own project. I'll ask
1:49the agent to recreate the design and
1:51replace the concept and details so it
1:53matches my own idea and brand. I've
1:55provided all the prompts that I'm going
1:57to use throughout this video, so you can
1:58access all of them from the link down
2:00below in the description. Now, I'll copy
2:02the prompt, head back to Antigravity,
2:04upload the reference image, and paste
2:06the prompt right here. I'll also mention
2:07that I've already created a blank
2:09Next.js project inside this folder.
2:12And that's it.
2:13Let's hit send. Just like that,
2:14Antigravity gets to work, analyzes our
2:16request, and starts building the hero
2:18section. While it's working, let's
2:20explore Pinterest for some other design
2:22inspiration. For example, I found this
2:24cartoon character that I really like,
2:26and I'm going to convert it to a 3D
2:28model and use it on our website. I'll
2:29show you how to do that step-by-step,
2:31and it's actually super simple, so no
2:33worries. For the background image, I'm
2:35planning to create a hover reveal
2:37effect, and for that, I need two images.
2:40So, once again, I'll explore Pinterest,
2:42and I really like this one here. Let me
2:44go ahead and download these images. For
2:46the next step, I need to refine these
2:47images and expand them to a 16:9 aspect
2:50ratio, so they match desktop screen
2:52sizes. For that, let's use ChatGPT. I'll
2:55upload the character image and ask it to
2:57remove the background, make it
2:58transparent, expand the image to 16:9,
3:02and include more of the character's
3:03upper body. That's it. I'll hit send,
3:06and within a minute, it generates the
3:07image I asked for. This looks really
3:09good, so I'll download it. For the
3:11background image, I'll upload it here
3:13and ask it to expand the image to 16:9.
3:15Hit send, and there we go. This result
3:18looks perfect. Now, to create the reveal
3:20effect, I need a similar version of this
3:22image. This time, I want to create a
3:25nighttime atmosphere with moonlight and
3:26fireflies. This should create a perfect
3:29visual match for the reveal effect I'm
3:31going to apply to our hero section.
3:32There we go. That looks perfect. I'll
3:35download these two images as well, and
3:36now we have all three image assets we
3:39need for our website. Okay, let's head
3:41back to Antigravity. As you can see, it
3:43has finished creating our hero section.
3:45Let me open the terminal and run npm run
3:49dev. Then, I'll open the localhost, and
3:51there we go. We have the hero section we
3:53needed as the starting point for our
3:54website. The only thing I want to change
3:56is the position of the headline. I want
3:59it to be centered horizontally and moved
4:01slightly higher on the page. So, I'll
4:03ask Antigravity to make those changes.
4:07Now, for the next step, let's apply the
4:09hover reveal effect to our hero section.
4:12As I mentioned earlier, I've prepared
4:13all the prompts you need and the link is
4:15available down below in the description.
4:17Before running the prompt for the hover
4:18reveal effect, you first need to rename
4:21the two images and upload them to
4:23Antigravity. Name the base image BG
4:26image one and the reveal image BG image
4:29two. Once you've renamed and uploaded
4:31the images, simply paste the prompt
4:33right here and hit send.
4:35While Antigravity is working on our
4:36prompt, let's create our 3D element. For
4:39that, I'm going to use a tool called
4:41T્રીpo. T્રીpo isn't sponsoring this
4:43video and I don't use any affiliate
4:45links. I'm sharing it because it's a
4:46really powerful 3D creation platform and
4:49the best part is that you can create a
4:50few 3D characters for free. So, go ahead
4:53and create an account on T્રીpo and
4:55upload the image you want to use as the
4:57reference for your 3D model. And here we
4:59have two options, best quality and clean
5:01topology. I'm going to select clean
5:03topology and hit generate. After a few
5:06minutes, it generates the core
5:07foundation of our 3D model. If you're
5:09happy with the result, simply click the
5:11texture button down here. This will
5:13finalize the model and make it ready to
5:15use. And there we go. This is the final
5:17version and I'm really happy with the
5:20result. You can also make additional
5:22changes to your 3D model such as
5:23upscaling it to 8K for better quality or
5:27even applying animations to the
5:28character.
5:29Now, I just realized that Antigravity
5:31has completed its task and there we go.
5:33The hover reveal effect is now working
5:35perfectly. Now, it's time to bring our
5:373D element into the website. First,
5:39let's export the 3D model. Simply hit
5:41the export button and make sure to
5:43export it in GLB format. Once you've
5:45exported the model, head back to your
5:47project folder. Inside the public
5:48folder, let's create a new folder called
5:503D model and then drag and drop the GLB
5:53file into it. That's it. Now, I'll use a
5:55prompt like this. Go ahead and use this
5:573D model and integrate it into the
5:59center of our hero section. I want the
6:01model to look at and follow the user's
6:03cursor with its eyes and head following
6:05the cursor. Here, you can find the GLB
6:07file. Next, I need to provide the path
6:09to the GLB file. To do that, simply
6:12right-click on the file and copy its
6:14relative path.
6:16Now, I'll hit send and let's see what we
6:18get. All right, it's done generating and
6:20here we have the final result. As you
6:22can see, the 3D model has been
6:24successfully integrated into our
6:25website. However, the cursor following
6:27animation isn't working exactly as I
6:29expected. Still, uh the result isn't
6:32bad, so I'm going to keep it for now and
6:34simply reposition the model. I want it
6:35positioned at the bottom center of our
6:37hero section and I also want it to
6:39appear above all the other elements. So,
6:41I'll head back to Antigravity and use a
6:43prompt like this. Reposition the 3D
6:45model so it sits at the bottom center of
6:48the hero section. Set the Z index to
6:501,000 so it appears above all other
6:53elements.
6:54Also, make it 10% bigger and move it 10%
6:57further toward the bottom.
6:59That's it.
7:00I'll hit send and Antigravity gets to
7:03work. Now, while Antigravity is fixing
7:05our hero section, let's go ahead and
7:07plan the next section. For the next
7:09section, I want to create a
7:09scroll-driven storytelling experience. I
7:12prepared a prompt like this. Create the
7:14next section directly after the existing
7:16Floria hero section. Place the attached
7:19image exactly in the center at a
7:21vertical 9:16 portrait ratio with a
7:24relatively small initial size and
7:26generous negative space around it. As
7:28the user scrolls down, smoothly scale
7:30the image from its initial portrait size
7:32until it progressively expands beyond
7:34its container and finally becomes a
7:36full-screen image, automatically
7:38adapting to desktop, tablet, and mobile
7:40viewports. I've also mentioned that some
7:43text elements should appear around the
7:44image and as the image starts scaling up
7:46while the user scrolls, those text
7:48elements should smoothly disappear. So,
7:51for this section, all we need is the
7:52prompt and a reference image. For the
7:54background image, I once again explored
7:56Pinterest and found this image that I
7:58really like. I'll download it and use
8:00ChatGPT to expand it to the required
8:02aspect ratio. And that's it. Now that we
8:04have our image, I'll download it. Once
8:06Anagravity has completed the previous
8:08task, I'll head back to our prompts file
8:11and copy the prompt. Paste the prompt
8:13into the chat, upload the reference
8:15image, that's everything we need. Now
8:17I'll hit send and wait for the result.
8:19After a few minutes, we have our new
8:21section. And as you can see, we now have
8:23a really interesting interactive
8:24experience. The text elements react to
8:26the user's cursor movement, creating a
8:28dynamic feeling as you move around the
8:30page. And as we scroll down, the image
8:33gradually starts expanding while the
8:35surrounding text elements smoothly
8:37disappear. The image continues growing
8:40until it takes over the entire viewport,
8:42creating a cinematic full-screen
8:44transition. This gives us a really nice
8:46storytelling moment and makes the
8:47transition between sections feel much
8:49more immersive. Next, I have an even
8:51more challenging task for the agent. I'm
8:53going to ask it to create a full
8:55discovery section as the next section of
8:58my project. So, I've provided it with a
9:00complete prompt and this time, I'm not
9:03going to attach any reference images or
9:05files. Anagravity should go ahead and
9:08create all the assets it needs for the
9:10different cards in this section. And at
9:12the end, I've also asked it to create a
9:14footer for our project as the final
9:17section of the website. And just like
9:19that, it goes ahead and creates the next
9:21section for us, which looks pretty much
9:23perfect. It also fits really well with
9:25the rest of the website and we have a
9:27nice footer at the end to complete the
9:28page.
9:29Now that I have all of the sections and
9:32elements that I wanted on my website, as
9:34the final prompt, I'm going to ask my
9:36agent to enhance the different sections
9:38of my website. For example, for the
9:40discovery section, I want my agent to
9:43replace these mock-up images with some
9:45images that I'm going to upload and ask
9:47it to change the images so the cards
9:50fully match the overall design of my
9:52website. And for the hero section, I
9:54want to make the text, logo, and labels
9:56more visible. So, I'm going to ask my
9:58agent to enhance the overall look and
10:00visibility of the text in my hero
10:02section. I also want to set the opacity
10:05of the 3D model to 80%. And finally, I'm
10:08going to ask my agent to analyze all of
10:11the different sections and elements on
10:13my website and apply the most advanced
10:16scroll animations and effects to the
10:18entire website. So, you don't need to
10:20fully explain the animations in detail.
10:22Just ask the agent to apply best
10:24animations possible, and that should be
10:25enough. And here's the final result. As
10:28you can see, the website now feels much
10:29more complete, interactive, and
10:31immersive. We started with a simple
10:33idea, and step-by-step, we've turned it
10:35into a full experience with custom
10:37sections, interactive elements,
10:39animations, and a complete footer. I
10:41hope you enjoyed watching the entire
10:43process and got some useful ideas for
10:45building your own interactive websites
10:47with AI. If you enjoyed the video, make
10:50sure to leave a like, subscribe to the
10:51channel, and let me know in the comments
10:53what you would like to see me build
10:54next. Thanks for watching, and I'll see
10:56you in the next one.