0:01 In this video, you're going to learn how
0:03 you can build website like this web
0:06 scrolling animation with this beautiful
0:08 interactive elements with the background
0:10 that is moving and also this beautiful
0:12 animation the text. So, you're going to
0:14 learn how to create all of this and I'm
0:15 going to share the prompt with you that
0:17 you can build as you can see it right
0:18 here. I've got a document that you can
0:22 copy for the animation. And I'm also
0:23 going to show you how you can create
0:25 this animated video in the background.
0:26 So, we're going to first generate an
0:28 image and then I'm going to show you how
0:30 to create a video and upload it to the
0:32 website and work it make it work
0:35 seamlessly as this. And spoiler alert,
0:37 this is just a simple prompt that I'm
0:39 going to share with you as well. So,
0:41 let's start with generating an image and
0:42 for that you're going to go to the
0:44 website called Freepik. There is a lot
0:46 of images here. So, you're going to just
0:48 find something that you like, type AI
0:50 and whatever you need. So, if you need
0:53 something related cosmos, you can just
0:55 type AI cosmos and you'll have a lot of
0:58 beautiful AI images that look very cool.
1:00 Just spend a little time searching for
1:02 it, then just download it. I already
1:05 found my image, so which is
1:07 uh this one. I think this looks pretty
1:10 cool. Now, let's create an animation for
1:12 it. So, we're going to be using Kling to
1:15 create animations and Kling allows you
1:17 to build beautiful animations just like
1:18 this. So, as you can see all of these
1:20 were built by Kling. Don't look at this
1:23 website. This is uh Hexland uh Hexfield.
1:25 I don't really like this website. So,
1:28 just go directly to Kling 3.0 and you
1:30 can build this cool animations that you
1:32 can see on this website. And by the way,
1:34 all of these animations that I'm
1:36 creating, I'm also uploading to motionsize.ai/backgrounds.
1:38 motionsize.ai/backgrounds.
1:41 You can get them here. Just copy URL and
1:43 paste it into your favorite projects.
1:44 But let's get back into our creative
1:48 process. So, yeah. We're going to first
1:50 uh make a video and for that I'm going
1:52 to click here on
1:54 Kling 3.0
1:56 and I'm just going to create say animate
1:58 this because the prompt doesn't really
2:01 matter. What matters is actual image.
2:04 So, let's just upload our image here
2:09 Uh let's
2:12 We need to decrease the size first. But
2:15 first, let's actually create an end and
2:16 start frame. So, for this I'm going to
2:19 just reference this and I'm going to say
2:21 create an image exactly like this, but
2:27 So, this way we can I'm just going to
2:29 choose another banana too. So, this way
2:31 we can actually create a start frame and
2:33 an end frame. So, then we can animate it
2:36 and make it look really really cool. So,
2:38 this will going to be the end frame. I'm
2:40 going to download this.
2:42 And let's wait and see how is the front
2:44 uh frame would look like.
2:46 So, this is the result that we've got.
2:48 Not the best one. I wanted it to close
2:50 the front door. I could have retry, but
2:51 since we're doing just for the demo, I'm
2:54 going to download this. And I'm also
2:56 going to drag it into Figma so I can
2:57 decrease the size because currently the
2:59 size is too big for Kling. So, I'm going
3:01 to show you how to quickly reduce the
3:04 size of the video of the image to Figma
3:06 and then just decrease the size but move
3:09 it by moving it like this. You can use
3:11 any other editor, but I'm going to use
3:14 Figma. And here I'm just going to
3:16 decrease the size. So, this will going
3:18 to be the first frame and then this will
3:20 going to be the second frame. Let's
3:22 export both of these images. I'm going
3:25 to name it just one and two so I know.
3:28 And now I can go back to Kling AI and
3:31 just upload these two images here. So,
3:35 we have the first frame which is this
3:36 this
3:39 and the second frame which is
3:41 not this.
3:43 This one.
3:45 So, for the prompt we can say something
3:48 like animate this, make it zoom in
3:51 slowly with some depth and also let's
3:54 have the front the door opening once
3:57 it's scrolls through the
4:03 And let's just create it for a few
4:07 seconds. Let's make it around 6 seconds
4:09 and click go. So, let's wait and see
4:11 what it comes back with.
4:13 And here we have our generated video. It
4:14 is not perfect. You would need to
4:17 specify to not add any new design
4:18 elements to it. You would try a few
4:20 different options, but this is one way
4:23 you can generate. So, now the most
4:24 important part, you would need to turn
4:27 this video into a JPEG sequence for it
4:31 to work perfectly as a
4:33 as a animation. This is an optional
4:36 step, but it would make it work a little
4:38 bit better.
4:40 So, what you can do, you can just drag
4:42 the video that you've found or that you
4:45 generated into this website which is
4:48 video to JPEG and then you would upload
4:50 it and wait a little bit for it to
4:52 upload on this end.
4:54 So, here we have our video. Just select
4:56 the start frame which is zero and the
4:57 end frame which is
5:00 the end of your video. For the size,
5:03 keep it original and for the frame rate,
5:06 choose maximum 30 FPS and then just
5:10 click convert it JP uh JPEG.
5:14 And here you have your images which mine
5:15 aren't loading properly cuz the video
5:18 internet connection. But once that done,
5:20 you just click download frames as a zip file.
5:26 Now, we have our zip file with all of
5:28 the images here. Don't worry, we don't
5:29 need to
5:31 the website will name the them
5:33 automatically and AI will figure out.
5:35 Now, let's build a website. So, we're
5:38 going to do it pretty fast with AI
5:39 website. We're going to be using
5:42 Antigravity as well as AI studio. So,
5:45 Google AI studio. This will be our
5:48 beginning point to build our website and
5:49 then we'll move everything to
5:51 Antigravity. So, for this one we're
5:53 going to just going to build a simple
5:55 hero section and for the hero section
5:57 I'm going to go to the website called
6:00 uh motionsize.ai.
6:01 I'm just going to select this one. We
6:03 don't really need the video since we're
6:05 going to be animating our own video with
6:08 the scrolling effect, but I just want to
6:09 paste this here and I'm going to also specify
6:12 specify
6:17 using this prompt build me a hero
6:19 section, but do not include video
6:21 background because we're going to have
6:28 I can actually get rid of video
6:32 background and let's send it.
6:36 Keep the background black pure
6:38 black. And let's just send it and see
6:44 So, all that I want is to have our fonts
6:46 and the liquid glass which is exactly
6:49 what we've got. Now, if you uh you want
6:50 to build the rest of the website, I
6:52 would suggest using AI studio. This is
6:55 much simpler and faster, but I'm just
6:57 going to download the whole code and
6:59 start building it in um
7:00 um
7:01 What is it called? Antigravity because
7:04 I'm going to add the videos and the
7:07 sequences. So, let's do that.
7:09 To download the code, all you have to do
7:11 is just click on the
7:13 code icon here that we have and then
7:16 just click download the zip. Now, we're
7:19 just going to go and unzip it
7:22 and drag it into our Antigravity. So,
7:24 let's just close everything, create a
7:27 new file in Antigravity. So, just open a
7:30 folder and let's just drag it here and
7:35 Yes, I trust everything.
7:37 So, the first thing we have to do is add it
7:38 it
7:42 add this to a local host.
7:45 So, for that for us to be able to
7:48 open it and preview it the website from
7:50 our computer. Let's wait and see what it
7:52 comes back with. So, once that done,
7:53 Antigravity will give you the link and
7:56 you will see your updates here. So, the
7:59 next part is the prompt. This is the
8:01 most important part of this video. So,
8:03 we're just going to copy this prompt and
8:06 we're going to send this to the AI. And
8:09 I'm going also going to say so I created
8:12 a folder called frames and I updated
8:21 And as you remember, we created a
8:25 big list of a lot of frames. Now, we can
8:30 and I'm just going to name this to frames.
8:32 frames.
8:35 And let's just copy this into our
8:38 Antigravity folder. So, we have this
8:48 on our website. So, I assume this is
8:55 And
8:56 let's just send that
9:02 And here we have the result that AI
9:05 provided us. It did everything from that
9:09 single prompt. It created this animated
9:11 section. Of course, there's a lot of
9:13 things to improved. For example, I mean
9:15 I like this button, but otherwise I just
9:17 want to show you on an example. So,
9:20 let's take a screenshot of this and
9:21 let's move it to Figma just so you
9:23 understand it easily. So, now the text
9:25 is not really readable. So, I want to
9:29 just to have like an overlay on top of
9:33 it from the button and paste the text
9:35 on the button here. So, we're going to
9:36 remove that.
9:38 And that's what I'm going to ask the AI
9:39 to do. So, I'm going to go to
9:42 Antigravity. I'm going to click accept
9:50 Let's move it here. Go into gravity.
9:53 In the hero section, I want it I'm going
9:57 to actually see that. Yeah. So,
10:02 So, in the hero section, the headline I
10:04 wanted with the description, I wanted to
10:06 be aligned to the bottom of the page.
10:08 And instead of making the whole design
10:11 darker, remove the overlay from our
10:13 video, just add an overlay from the
10:16 bottom of the page in the hero section.
10:18 The second section should have a liquid
10:21 glass background and the text should be
10:24 positioned on it. So, that's will give
10:34 So, it did a little bit, not the way
10:36 that I wanted, but it's pretty close. We
10:38 have here the section, then we can
10:40 scroll down. I can see that it added
10:42 this liquid glass that we had in our prompt.
10:43 prompt.
10:45 Then we can see the
10:49 phases, the door opening, and we can see
10:50 the end of our website.
10:53 There's two way how we can improve it.
10:54 So, the first one, um
10:56 um
10:59 I'm going to say, "Make all of the text
11:01 white." So, let's do it. Let's go to
11:03 enter gravity. I'm going to say, "Make
11:05 all of the text white." Do not have text
11:07 with the opacity on the page because
11:17 And the next part I'm going to say,
11:19 in the last section, which is CTA, where
11:22 we have the form, the form is barely
11:25 visible. Make the inputs a little bit
11:27 more darker. Also,
11:29 Also,
11:32 after the input, I should not be able to
11:36 scroll more. So, the form should be the
11:39 last section. The the the the frame
11:41 scroll, the animation that we have
11:50 and see what it comes back with. And
11:52 this is what our AI did. So, let's
11:54 scroll through, and as you can see, we have
11:55 have
11:59 beautiful animation, and um yeah.
12:02 To achieve this result with these fonts
12:05 and stuff like that,
12:08 because it's all have to be imported, go
12:10 to Motion Sites and you can get the
12:13 prompt right here that would include all
12:15 of the files, all of the fonts, and this
12:18 video with the background. And thank you
12:19 for watching. I hope you've learned a
12:21 thing or two from this video, and I'll
12:23 see you in the next one.
12:25 I had a lot of fun making this website.
12:29 This was my favorite part of the actual
12:31 AI building is how simple it is to
12:33 actually create something like this. Of
12:35 course, it looks different from what
12:38 what we built today in our video because
12:41 all of the fonts to import would take me
12:43 a little bit of time. But yeah, I
12:46 believe that this anyone can build now
12:48 sites like these with AI, and it is very
12:50 achievable. So, if you spend a little
12:52 bit more time to learn this, and if you
12:54 apply it, you can find a lot of clients
12:57 which will pay you hundred and thousands
12:59 of dollars for creating stuff like this
13:01 with AI. So, if you watched until this
13:03 moment, thank you for your support, and
