Full transcript
0:00What if you could build a website like
0:01this with AI? Complete with cinematic
0:04animations, interactive sections, and
0:06even your own custom 3D model. Well, in
0:09this video, we're going to build exactly
0:11that using Antigravity. And we're not
0:13just going to generate another basic AI
0:15landing page. We're going to create a
0:17fully interactive AI-powered image and
0:20video generation platform with a
0:22cinematic hero section, smooth
0:24scroll-driven animations, an infinite
0:26logo carousel, modern Bento sections,
0:29and a fully interactive 3D model. I'll
0:31even show you how we can take a simple
0:33image, turn it into a 3D model, and then
0:36integrate that model directly into our
0:37website. The interesting part is that
0:40we'll be using AI throughout the entire
0:42process, from creating our visual assets
0:44and animations to designing the sections
0:46and writing the code. I'll also share
0:48all the prompts I use throughout the
0:49video, so you can follow along and
0:51recreate the same workflow. So, let's
0:53jump into Antigravity and start building
0:55this website from scratch.
1:04>> [bell]
1:06>> So, guys, for this tutorial, I'm going
1:08to be using Antigravity, but you can
1:10absolutely follow along using any other
1:12AI tool or IDE you prefer. The overall
1:14workflow is going to be pretty much the
1:16same. So, let's start by creating a new
1:18folder for our project. Now, in this
1:20video, we're going to take things a step
1:22further and build an advanced
1:24interactive website with smooth
1:26animations, engaging interactions, and
1:29even custom 3D models that we can
1:31integrate directly into the website.
1:33When you're building a website for a
1:34product, startup, or personal project,
1:36the design and overall visual direction
1:38can make a huge difference. One of the
1:40easiest ways to find inspiration is by
1:42exploring platforms like Dribbble or
1:44Pinterest. For example, I found this
1:47image that I really like, and I want to
1:48use it as the first frame of an
1:50animation. Then, for the final frame,
1:52I'm going to use this second image. The
1:54idea here is to create a smooth
1:56cinematic transition between these two
1:58visuals and then use that animation to
2:00build the scroll-based experience for
2:02our hero section. So, I'm going to walk
2:04you through the entire process from
2:05preparing and refining these image
2:07assets to generating the video and
2:09finally converting that video into
2:11individual frames that we can use to
2:13create the scroll animation on our
2:15website. All right, now that we have our
2:16initial image assets, the first thing we
2:18need to do is prepare them properly. For
2:20this, I'm going to use RunDiffusion,
2:21which is an all-in-one AI platform that
2:24allows us to work with images, generate
2:26videos, and even extract video frames
2:28within the same workflow. So, I'll start
2:31by uploading the first image and ask the
2:32agent to enhance the image quality and
2:35convert it to a 16:9 aspect ratio. I'll
2:38send that request and as you can see, it
2:40only takes a few seconds. And perfect.
2:42For the second image, I want to make a
2:44few more changes. I'm going to ask the
2:46agent to modify the overall visual style
2:49and adjust the colors so that it matches
2:51the first frame more closely. And of
2:53course, I'll also ask it to convert the
2:55image to 16:9 so both images have
2:57exactly the same dimensions. So, let's
3:00send that request.
3:01And there we go. Now we have our two
3:03finalized images, which we can use as
3:05the starting frame and ending frame for
3:07our video. Let's move on to creating the
3:10actual video. I'll open a new task and
3:13switch the tool from image generation to
3:15image to video. But before uploading the
3:17images, there's one small thing we need
3:19to take care of. I'm going to rename the
3:21files so it's immediately clear which
3:23image is the first frame and which one
3:26is the last frame. Now, I'll upload both
3:29images and give the agent a detailed
3:31prompt describing the animation I want.
3:34The important part here is that we want
3:36a continuous cinematic shot that
3:38naturally transitions from the first
3:40reference frame into the second one. So,
3:42in the prompt, I'll describe the
3:44movement, camera motion, transitions,
3:47lighting, atmosphere, and other visual
3:49details I want the AI to preserve
3:51throughout the animation. Also, I've
3:53shared all of the prompts I'm using in
3:55this video, so you can find them through
3:57the link down below in the description
3:59box. With Runnable, you have different
4:01AI models available for image and video
4:04generation. So, if you're not satisfied
4:06with the results of your video, you can
4:08simply change the model and try again.
4:10Seedance 2.5 worked perfectly for me,
4:12and the results are exactly what I
4:14wanted. Now, if you're using Runnable to
4:16extract the frames from this video, all
4:18you need to do is ask your agent to
4:19extract the frames once the video is
4:21complete. You can also use websites like
4:23EasyGIF, where you can upload the video
4:25and extract the individual frames. Okay,
4:28Runnable has completed the task here, uh
4:30and now I can download a zip file
4:32containing all of the video frames.
4:34Next, let's start creating our website.
4:36First, we're going to install a plain
4:38empty Next.js project. For that, just
4:40head over to nextjs.org. Right in the
4:42center of the page, you can copy the
4:44installation command. Now, I'll navigate
4:46back to Antigravity, open the terminal,
4:49and paste the command right here. Also,
4:51don't forget to add the slash to the end
4:53of the command, so it installs the
4:55Next.js project in the current
4:56directory. I'll hit enter, and it will
4:58start installing all the required
5:00packages for us. All right, now it's
5:01time to create our hero section design.
5:03For that, once again, I'm going to head
5:05over to Pinterest to find a hero design
5:07that I can use as a reference. I really
5:09like this structure, so I'll go ahead
5:11and download this image, and then head
5:13back to Antigravity. I'll upload the
5:14image right here. Now, we want to
5:16recreate this exact design, but optimize
5:19it so it matches our own brand and
5:21project details. For that, I've provided
5:23a complete prompt that you can use as a
5:24reference. I'll copy this prompt, paste
5:27it into my agent, set the AI model to
5:29Gemini 3.6 Flash, and hit send. After a
5:31few minutes, our hero section design is
5:34complete. Okay, the overall design and
5:36look of the hero section looks really
5:37nice, but I want to make a couple of
5:39changes. First, I want to remove this
5:41image from the center, and I also want
5:43to remove any background effects so we
5:45can apply the scroll animation in the
5:48next step. So, I'll paste the prompt
5:49explaining the changes I want and
5:51Antigravity will update the project. And
5:53there we go. It's exactly what I wanted.
5:55Now, it's time to apply the scroll
5:57animation. For that, I've also provided
5:59a complete prompt that you can use to
6:01apply the animation in one go. But
6:03before running the prompt, you need to
6:04make a few changes. Here, for the last
6:07frame number, you need to make sure that
6:08it matches the exact same number in your
6:10zip file. So, open your zip file, check
6:13the last frame number, and then replace
6:15that number here. Also, make sure that
6:17the frame image name matches the actual
6:19image names inside your zip file. And
6:22make sure to update that in the scroll
6:23logic section as well.
6:25Finally, you need to mention the
6:26location of the zip file here. In my
6:28case, the zip file is inside the public
6:32folder of my project. So, I'll
6:35right-click on this file and copy its
6:36relative path.
6:38Then I'll paste it right here in the
6:40prompt. And that's it. Our prompt is
6:42ready.
6:43I'll go ahead and copy the entire
6:44prompt, paste it into Antigravity, and
6:46hit send. That's it. After a few
6:48minutes, our project is updated. And
6:51there we go. And if I scroll down, we
6:53can see this really smooth animation.
6:55The effect looks perfect. But as you can
6:57see here, because of the color of the
6:59background, our text is not fully
7:01visible. So, I'm going to ask my AI
7:03agent to refine the design, make the
7:05headline text bolder, and change some of
7:07the visuals. I'll also ask the agent to
7:10add a shadow effect so our text is fully
7:12visible on top of the animation. I also
7:14asked ChatGPT to refine this hero
7:16section for me, and the results were
7:18great. So, I'm going to attach this
7:19image to the prompt as a reference as
7:21well. Now, I'll copy this prompt,
7:23navigate back to Antigravity, upload the
7:25reference image to the chat, and then
7:27paste the prompt right here. I'll hit
7:29send, and within a few seconds, it will
7:31update the design with a much better
7:33look. And there we go. Our hero section
7:35is now complete, and we're ready to move
7:37on to the next step. For the next step,
7:38we're going to add two more sections to
7:40our project. I've prepared the prompt
7:42for this as well. First, I want to
7:43create an infinite logo carousel section
7:46with two rows. The first row will
7:48continuously move from right to left,
7:51while the second row will move in the
7:52opposite direction. And below this
7:54section, I want to create a bento grid
7:57section. For the bento grid section, I'm
7:59going to explore Pinterest once again
8:01and find a reference design that I like.
8:03So, I really like this bento grid
8:05design. I'll go ahead and download it,
8:07just like that. Now, I'll copy my
8:08prompt, navigate back to Antigravity,
8:10paste the prompt right here, and also
8:12upload the reference image. That's it.
8:14I'll hit send and wait for the results.
8:16Finally, it's done generating, and now
8:17if I scroll down, we have our infinite
8:19logo carousel with two rows moving in
8:22opposite directions. And just below
8:24that, we have our bento grid section
8:27with different cards and visuals
8:28arranged in a clean, modern layout. But
8:30as you can see, we have some design
8:32problems with these three cards that
8:34need to be fixed. So, I'll go ahead and
8:36take a screenshot of them. I also want
8:38to remove the container box around each
8:41logo in the logo carousel, and I want to
8:43set the logo colors to black and white.
8:45So, I'll navigate back to Antigravity
8:48and paste a prompt explaining all the
8:50changes I want to make, and then I'll
8:51upload the screenshot to the chat as a
8:53reference. That's it. Now, I'll hit send
8:55and Antigravity will fix everything for
8:57us in about a minute. And there we go.
9:01It looks awesome now. Okay, now it's
9:04time for the interesting part of this
9:05video, which is creating and integrating
9:08a 3D model into our project. For this,
9:10all you need is an image of your product
9:13or any model that you want to turn into
9:15a 3D model. For example, I really like
9:17this astronaut sitting on the orange
9:19bus, but before we can use this model, I
9:22need to prepare the image by removing
9:23the background, the land, and the text
9:26from it. So, I'm going to use ChatGPT to
9:28make these changes. I also want to
9:30remove the ladder, so I'll mention that
9:31as well send. And there we go. The model
9:34looks nice, but let's actually add the
9:36ladder back and see how that looks.
9:38Okay, I think this version is better, so
9:41I'll I'll download this image. For the
9:433D model generation, I'm going to use a
9:45tool called Trepo, which is a really
9:47powerful AI 3D model builder. So, just
9:50create your account here and then upload
9:51your image. Here, we have two options,
9:54best quality and clean topology. I'm
9:57going to go with best quality and hit
9:58send. And after about a minute, it
10:00generates a clean and professional 3D
10:02model that you can customize, export,
10:05and use in your own projects.
10:06Okay, now let's also test the smart mesh
10:09option. I'll go ahead and upload my
10:10image here once again, and once it's
10:12uploaded, we can also see a generate
10:14multi-views feature here. So, I'm going
10:16to use this option as well.
10:18Perfect. Now, let's hit generate. And
10:21just like that, it starts generating the
10:22mesh from our image. Once you're happy
10:25with the result, simply hit the texture
10:26button, and just like that, it starts
10:28creating our textured 3D model. And
10:31there we go. This actually looks better
10:32than the previous result. So, let's
10:34export this one.
10:36I'll hit the export button, and make
10:38sure to export it in GLB format, since
10:41that's the format we're going to use
10:42later to integrate our 3D model into the
10:44website. Okay, now that we have our 3D
10:47model, it's time to find a design
10:48reference. I'm going to create another
10:50section for our website, a 3D creator
10:52tool section. And I found this design
10:55that I really like. So, I'll go ahead
10:56and download it, then navigate back to
10:58Antigravity. I'll upload the reference
11:00image and paste a prompt asking the
11:01agent to create our new section based on
11:04this reference image. Now, while it's
11:06updating our app, let's move the 3D GLB
11:08file into our project folder. For that,
11:11I'll create a new folder inside the
11:12public folder and name it 3D model, and
11:15then I'll drag and drop the 3D model
11:17right inside this folder.
11:19That's it. Now, let's take a look at the
11:21task results.
11:22Okay, it's done generating, and now we
11:24have a new section here with interactive
11:26elements and a really nice layout. But,
11:28I want to add my own 3D model right here
11:30in the center. So, I'll go ahead and
11:32take a screenshot of this large
11:34container, navigate back to
11:35Anti-Gravity, and here I'll ask the
11:37agent to remove this section and replace
11:39it with my 3D model. And at the end of
11:41the prompt, I also need to provide the
11:43path to my 3D model GLB file, just like
11:46that. Now, I'll upload my screenshot
11:48here and hit send.
11:50After about a minute, our project will
11:52be updated. And as you can see, it
11:54applied all of the changes we asked for,
11:56and this looks perfect. Actually, all
11:58the elements here are not just simple
12:00mock-up designs. Everything is working
12:02just like a real 3D platform, which is
12:04quite impressive. As the final step, I
12:06just want to ask my agent to change the
12:08overall design and colors of this
12:10section, and also add a background image
12:12here.
12:13I'll also replace the images inside the
12:15Bento cards with some better visuals.
12:18And finally, I'll ask it to add a footer
12:20to our project as well. And just like
12:22that, you can add, remove, edit, and
12:24customize almost anything in your
12:26project simply by giving your AI agent
12:29the right instructions. And the best
12:31part is that we were able to build this
12:32entire experience step-by-step, from
12:35creating the initial image assets,
12:37generating the cinematic animation, and
12:38turning it into a scroll-driven hero
12:40section, all the way to creating
12:42interactive sections, and integrating
12:44our own custom 3D model. I've included
12:46all of the prompts and resources I used
12:48throughout this tutorial in the
12:49description below. And if you enjoyed
12:51this tutorial, make sure to like the
12:53video, subscribe to the channel, and let
12:55me know in the comments what you want me
12:57to build next. Thanks for watching, and
12:59I'll see you in the next one.