Gemini 3 can animate web designs like a senior designer

So with Gemini 3, you can create amazing polished landing pages with just a few prompts. Something like this is totally

prompts. Something like this is totally possible. Now we're talking about, you

possible. Now we're talking about, you know, clip animation, beam animation, we're talking about intro animation, and then, you know, we

have really beautiful effects, transitions, cards that are switching. And you can look at this one. This is so awesome. We

have clip animation. It's extremely

premium. We have the beam here. We have

the flashlight.

And we even have the border gradient that follows the mouse, which is so cool. This is great for testimonials.

cool. This is great for testimonials.

And then you can even tell Gemini to create beautiful animated Instagram slides just like that. I mean, how cool

is it to consume content? And this is turning my tweet into Instagram slide, which typically takes so much time, but in this case, it's animated. And we have

the prompt because, you know, I talk a lot about prompts. It's really, really important for Gemini 3. And we all also

have this one, which allows you to to do it vertically. So you can scroll

it vertically. So you can scroll vertically page by page. You can use a button here which is really cool. See

this gorgeous button using Gemini 3 prompt typography loop all the things that I'm going to

show you today. And all of that stuff is adaptive which is amazing. Again I'm

using Aura here but uh you can use these prompts for AI studio or cursor or lovable. It's entirely up to you. Now

lovable. It's entirely up to you. Now

you can see it's turning something on the iPad that is focusing on the Instagram slide format which is 3x3 uh 3x4 turning into a full screen for

iPhone which is really awesome.

Now there's the community. These are

creations by our users and we just started to share them. As you can see, some of them use our templates like this one, which is really easy. Like I said,

you can just remix, change the content, ask AI to do all the work for you. And

of course, there's the crazy one, the creative one. So, you can use a 3D uh

creative one. So, you can use a 3D uh model to do this. And one of my favorite ones is by a user. And I love this one because it's so simple. It even has a

preloader. And you can see it has a

preloader. And you can see it has a mouse follow animation. It has, you know, this header here that adapts to the colors and the dark mode and light

mode. Uh, it has really cool scroll uh

mode. Uh, it has really cool scroll uh velocity. So, what are we going to learn

velocity. So, what are we going to learn today? Well, I'm going to let the slides

today? Well, I'm going to let the slides do the work for me because it's it does such a great job, right? We're going to learn about Gemini 3 motion. We're going

to learn about prompting. And we're

going to learn all of these techniques.

So, for example, here I'm just going to refresh because we, you know, we need to see the animation when you scroll. And

you can see here, uh, we're going to learn about these beam animations. We're

going to learn how to create this Instagram layout, which by the way works really, really well for a portfolio. You

can imagine, you know, you this is a landing page. This is, you know, it's

landing page. This is, you know, it's not just Instagram slide is a essentially a landing page. And you can totally use this to showcase your

portfolio, to showcase a feature or a year end sort of like recap of what you did last month or last year. So,

and then a lot of people ask me, what software do I use to share these beautiful animations of my designs that I create on Aura? Well, it's Screen Studio. And in fact, you can do a lot of

Studio. And in fact, you can do a lot of the zooming. So when you have a UI like

the zooming. So when you have a UI like this where you can just scroll and demo the interactions, you can use a screen recorder and create a beautiful format and then you share on social media. This

really really ups and it creates so much engagement. So much so that I'm not

engagement. So much so that I'm not supposed to share this but I'm so happy to see the growth of Aura that I want to show you that people are really really

excited about Jim I3 is our top model right now. 84.4% 4% and we're spending

right now. 84.4% 4% and we're spending $777 US in the past 24 hours alone. So just

to give you an idea, this is like a quarter million dollars that we're going to be spending if we do this every single day. So of course this is

single day. So of course this is exciting for one single reason is that we can be sustainable as a tool and we

can help our customers or users or community create amazing landing pages.

that gets a lot of visibility because animation to me is incredibly important and there's a reason why companies spend

millions of dollars on ads on videos and I believe that letting Gemini do a lot of the work for you especially when it is interactive like this one this by the

way is by uh you know one of our customers one of our users and you can click on each element each uh you know planet and it goes and it follows the uh

you know the path which is really awesome. Now please note that I'm going

awesome. Now please note that I'm going to be using Aura for this tutorial and uh the reason why I'm saying this is because some people feel that I'm promoting Aura. Uh but at the same time

promoting Aura. Uh but at the same time this is where I create all of these demos. This is where I put all of my

demos. This is where I put all of my energy into creating these prompts, coming up with all of these amazing uh sites that I can show you how to create

it. Also, keeping in mind that

it. Also, keeping in mind that everything that I'm showing you today can be done anywhere else as well. You

don't have to use Aura, but I use Aura because obviously it's something that I'm really passionate about. And also,

it's much faster to show you guys. It

has all of these assets, the images, the components, the templates, the references, and also these beautiful Unicorn Studio backgrounds that are animated. I'm going to share that for

animated. I'm going to share that for free, and you can use them. You can

remix them. And I think that kind of worked. Uh, so I'm going to do more of

worked. Uh, so I'm going to do more of that.

Okay, let's dive in a little bit about inspiration, but also about business this time because I think a lot of people they want, you know, to become successful. Of course, everyone wants to

successful. Of course, everyone wants to be successful. Everyone wants to be

be successful. Everyone wants to be sustainable. Uh, and there's inspiration

sustainable. Uh, and there's inspiration everywhere. We've talked about Mobin,

everywhere. We've talked about Mobin, we've talked about dribble for design inspiration. Put that HTML image to HTML

inspiration. Put that HTML image to HTML and create your beautiful landing page.

In this case, we're going to be using uh an inspiration that I feel very passionate about, which is Instagram slide. This is working really really

slide. This is working really really well for a lot of designers. And

essentially uh you have to study the formula. So for example, an Instagram

formula. So for example, an Instagram slide, it's not very different from website except that it's just images that are static. So it's kind of like a pitch deck or something like that, but it's not interactive. So in this case

you have a cover and then you have the steps what I call you know so in the case of for many of us for example prompting or designing in Figma or

designing in framer then you would have these steps and that's kind of like the tutorial is very engaging and then at the end you have the CTA. So this

kind of spark an idea that I wanted to to use. So for example uh you know I've

to use. So for example uh you know I've been tweeting a lot about the techniques that I use for prompting and creating

these beautiful designs uh using Aura and then oftent times I share these prompts and this was the perfect format.

So I have all of these prompts for animation. Again this is what I use for

animation. Again this is what I use for the slides. So, I'm just going to copy

the slides. So, I'm just going to copy this and then I'm going to go to Aura or AI Studio of course, but in this case I'm

going to use Aura and then I'm going to use this very specific prompt that I wanted to try. So, basically turn this into eight section for Instagram slide.

Each section is full width. So, this is the layout part. It's going to be centered. It has it's going to be like a

centered. It has it's going to be like a side section so that you can sort of scroll. So kind of need to know a little

scroll. So kind of need to know a little bit about how websites work in term of pageionation and then you kind of talk about the content. So you have one cover six section explaining the steps and

then one CTA which is call to action and then you know I want the numbers and I want me as the author. Usually there's

like by this person and that makes it a little bit more memorable to a lot of people. And again you can go into the

people. And again you can go into the prompt builder. I update this very

prompt builder. I update this very often, especially for these preset prompts that I use all the time and it has all of these prompts. So, uh, you know, one thing that I like to use is is

this one. So, animate, fade in, slide

this one. So, animate, fade in, slide in, blurring and so on. Uh, you know, this is through countless testing,

right? And you know it's really useful

right? And you know it's really useful for anyone to learn about layout, animation configuration theming uh all of these terms that if you're new to

designing, which I suspect that many are because we are in the vibing sort of era where you know not everyone has coded before but they build amazingly

successful SAS products or services. And

so understanding all of these technical terms and this is kind of like a cheat sheet uh because instead of like spending so much time through trials and errors and making a ton of mistakes, I'm

kind of showing you the blueprint for what I'm doing. So we're going to use uh Gemini 3 Pro and we're going to generate the page.

There you go. And we have the slides.

It's gorgeous. It's beautiful. It's

working. Uh, you know, every slide has sort of like the focus on each of the techniques and the prompts. It's doing

its best to replicate what the prompt is about, which is great because it reads the prompt, it creates the, you know, the prompt and then use it uh to to to sort of demo the things that the prom is

about. Uh, and this is really cool. Of

about. Uh, and this is really cool. Of

course, it's not perfect. So, you might want to go to design mode and then for each of them, you might want to reprompt for each of them. Uh, and I I usually do

this when the AI makes mistakes because the more that you ask AI to do things, the less the quality of each of those things will be. And this happens a lot.

And that's why, you know, you should never uh give up on the first try.

All right, so let's do something special. We're going to take this a

special. We're going to take this a little bit further and I want to do something that I haven't shared before.

Uh, this is a really cool technique that I'm working on, which is that I want the exact same style as another template and I I'm trying to perfect this one. So,

for example, let's say I look at this layout and I really really like that style, but I don't necessarily want to reference the template because then it

it also holds all the information that maybe I don't want to apply to. So, for

example, the content, the buttons, and all that stuff. I just want the styles, you know, I just want to apply exactly the style to an existing template.

Wouldn't that be awesome? And that's

kind of like what I'm working on right now. So, what we're going to do here is

now. So, what we're going to do here is we're going to copy the code and we are going to go to Gemini AI Studio and

specifically we're going to go to the uh Gemini 3 chat. So, we're going to try Gemini 3. Here you need to set up your

Gemini 3. Here you need to set up your API key and then I'm going to paste this. And then this is the code, right?

this. And then this is the code, right?

This is HTML, which is why I love so much to use HTML because I don't need to copy the code for like, you know, 50 files or even 10 files is too much work.

So, I'm going to use this prompt right here and I'm going to read it to you.

So, give me the JSON format of the styles of this design. So, think design system, right? And I'm going to I want

system, right? And I'm going to I want the fonts, the colors, the spacing, the shadows, the animation, the layout, the main button styles, the animation script, the animation key frame,

instruction, adaptive layout, icon, and so on. So I'm going to run this

so on. So I'm going to run this and then boom, look at that. We have the full JSON blueprint of that design. How

cool is that? I'm going to copy this to clipboard and I'm going to go back to my design here and I'm going to say adapt

to this style. So if you read the JSON format essentially it has all of this sort of like design system uh tokens if

you will, right? like it has the fonts, the you know uh the coloring, the palette in this case and the layout and so on, the spacing uh transition

animation assets and so on. So let's see how well it's going to do.

And there you go. So I tried twice because the first time it did not capture the light mode and so you know it's I'm still perfecting this technique

but it's really awesome. You can see the difference between the styles. So this

one was the first one kind of a little bit more generic especially with the sort of you know uh purple blur here which you know we all know it's very AI.

It smells like it. Uh, and then this one, you know, it adapts a little bit, but uh, it used orange instead. And, uh,

you know, it's a little bit better. Uh,

and then this one, I believe that it's it's even better. Uh, by the way, it also capture, uh, you know, the button, which is really cool. So, this this

button here that I wanted and in light mode, it looks even better. So again, a lot of trials and errors, but the more

that you try, the more that your design becomes unique. And so that's what we

becomes unique. And so that's what we have right here. So this is really cool.

Even capture the clip animation and uh of course we have the you know the the marquee animation, the card animation

and so on. So now I can sort of go to design mode and quickly just change a few things. So for example, you can you

few things. So for example, you can you know if AI doesn't do everything that you want, maybe you can just change the font uh you know to be a little bit more

futuristic. So space grotesque is very

futuristic. So space grotesque is very good one. And then we have uh you know

good one. And then we have uh you know the font weight. So I'm not going to spend a ton of time here, but I definitely want the uh the background.

So I'm just going to go to the background for uh for the body. And then

I'm gonna set do something a little bit more contrasty. So for example, this uh

more contrasty. So for example, this uh here is a little bit better. It gives a little bit more contrast. And these are tailwind colors, by the way. So this is kind of cool. And then I'm just going to

select this uh this container here. And

we have a a few beautiful shadows that you can use. So for example, I can use beautiful uh 2x XL. And also we have the angle shadow which is very very popular

on social media. And so uh you can go with large or you can go with extra large or super uh super strong uh you know whatever you fancy and whatever

works with your background. Keeping in

mind that the darker the background the more you can get away with stronger shadows. So, for example, uh you know,

shadows. So, for example, uh you know, here it's quite strong and uh you know, I'm going to go with a little bit less strong just because the

background is light. So, this works pretty well.

And then I'm also going to change the body text to be uh to be so space grotesque and

space grotesque. So, both of them. So,

space grotesque. So, both of them. So,

we have a bit more futuristic. and then

uh a little bit tighter.

All right, so let's go and let's iterate on this. Uh I'm going to go to the

on this. Uh I'm going to go to the prompt builder uh because it's very easy to get some of these styles that I want.

So for example, I want this icon set, the solar duoone bold. I want also this for the logos uh you know I SVG logos

it's called. And I want the animation in

it's called. And I want the animation in sequence. Uh, and this is going to

sequence. Uh, and this is going to animate. Right now it's not really

animate. Right now it's not really animated.

And then there's another one that I've been experimenting which is uh add vertical lines container size.

So I like this. It gives a bit more futuristic style.

And there we go. This is really cool.

I'm just going to show you the animation here. You can see we have the beautiful

here. You can see we have the beautiful animation. So, uh, the other thing that

animation. So, uh, the other thing that is kind of like not happening is that we don't have animation on scroll, which is kind of what I want. But we have the

beautiful super subtle lines, which I absolutely love because it adds that sort of like extra depth to your design.

And that is so so cool. It adds like like this small round like outline with very subtle drop shadow. Um, the only

thing that I forgot to do is just to apply the same drop shadow uh everywhere and I forgot to mention that. So, I'm

going to redo it again and I'm going to say something like apply the same drop shadows as the first card.

Now, for the animation, uh, this is where I'm going to bring the big guns because, you know, as much as I love prompting, there's a ton of stuff that it's going to miss, which is why we're

going to start using references. So, for

example, animation on scroll, uh, usually doesn't work so well with just prompting. So, I'm going to do animate,

prompting. So, I'm going to do animate, and then I'm going to reference the code snippet, and specifically, we're going to use animation on scroll and animation key frame.

All right. So it did exactly what I asked it. So for example, it animates.

asked it. So for example, it animates.

It's uh applying the drop shadow to every card now. And when I scroll, it starts the animation. So that makes for a more engaging uh you know slide. Now

one thing I'm noticing here and this is where you will probably going to be struggling as you reference uh whether an image, whether reference code,

component, etc. Unless you specify it might change the content. So in this case, I just realized that it did change the content. The content was supposed to

the content. The content was supposed to be about Gemini 3 prompts, but when you know I added the style, which is something that I wanted to avoid, it

changed into sort of like the theme of the style. Um, but it kept some stuff.

the style. Um, but it kept some stuff.

So for example, it is still okay that this is funny. It is about CSS techniques now which again it's actually pretty cool because I can use this I can

actually use this for Instagram.

All right. So this is why prompting is really important to be specific. Uh

because when you start changing stuff like content for example, it might not keep everything. So, what I'm going to

keep everything. So, what I'm going to do is uh bring back this and I'm going to put back my original prompt for the

Instagram slides. And I'm going to say

Instagram slides. And I'm going to say keep everything, right? Keep everything.

You can also say something like import.

And then finally, uh we're going to put uh the content of the tweet.

And we're back. So now you can see that I'm using uh this this very specific prompt keep all the style shadows layout animations only take the content from

you know a previous iteration. So for example I can copy

iteration. So for example I can copy this which is the HTML code and then I put that code and I'm just going to take the content from that specific code. So

what is left at this point is images which I think you know AI has trouble with. So we might as well uh take the

with. So we might as well uh take the human aspect here. So we want to use your talent and your taste on this. So

for example uh I'm going to click on the uh container and I'm going to go to the images. And this is where I'm just going

images. And this is where I'm just going to vibe, right? like I I want to go with whatever image that might work here.

All right. So, let's say we have this image that we can work with. Now, one

thing you can do is select a blending mode. Um, so for example, I'm going to

mode. Um, so for example, I'm going to select the text and I'm going to use So, I have a few options here. one is I can quickly just change the uh color of

the text for each one. So for example here and then maybe I want something uh light or dark whatever works. You want

to make sure that the text is always readable. Uh the other thing I can do is

readable. Uh the other thing I can do is to use the new Nano Banana Pro which is really cool. This is a new feature in

really cool. This is a new feature in Aura. And here you can go to uh generate

Aura. And here you can go to uh generate image and you can sort of describe. Now

what is interesting about Nano Banana Pro is that the resolution is 2x and you can go up to 4K but not in this case.

You have to do upscale after. Uh but I might add that option later. It's just a bit more costly. Um but 2K is fine right for what we're trying to do here. 2K is

amazing. Uh it's it's a very very high resolution by the way. And uh you can also change the sort of format the aspect ratio. So let's say you like the

aspect ratio. So let's say you like the image you want to make into a landscape for your hero. That's possible now. And

you know Nano Banana is going to try to do as best as it can it can. So in this case we want the 3x4 aspect ratio which is very popular on Instagram. And then

we want to describe something. For

example, make the bottom half uh use progressive blur and work as a

light background with a dark text possible on top. So, we're going to try this.

And there we go. So, this is pretty awesome. I was able to modify and I'm

awesome. I was able to modify and I'm going to apply it. And then boom. So the

reason why I'm doing this is so that my text here can be a lot more readable.

And in this case, because it has a sort of light blur uh at the bottom, now I

can set the text to be dark, so to contrast and to be much more readable.

And likewise for the icons, I can just click on the icons and you know we support a bunch of icons and logos and stuff like that. Uh you know in this

case for example uh you know we can use something like a a wand or a star and it works quite well. Uh the text color

quite easy to change uh to light mode and these are using Tailwind colors.

So let's do the same for the last one. I

can definitely do all of them. Uh so

make sure that you remove the gradient if you want an image. And yeah, you know, like some images will work a little bit better. You're going to have

to, you know, vibe it. This is where it really counts uh to, you know, to use your taste as uh as someone who has a lot of experience or who has used

products for many many years.

But I do want to offer some advice. For

example, uh for backgrounds, especially for web design, motion works quite well.

So, we're going to search for motion. Uh

and something like this can work really, really well with text on top of it. Uh

with blur, with you know, yeah, with motion blur and all that stuff. You can

also have landscape, which usually is more minimal. So those

also works quite well and you can also use and you can also use uh the color. So

for example I'm going to select color and you know I'm going to go with a more light and then you can sort of like change the size of the text to make it

more readable.

And then now we're kind of ready to to test this. Um, so you want to go to the

test this. Um, so you want to go to the iPad mode. Um, you can definitely change

iPad mode. Um, you can definitely change the canvas to be light or dark, whether you know you prefer. And then you can customize uh the canvas. So I'm going to

do that. I'm going to look at here. And

do that. I'm going to look at here. And

from here I can just say something like, you know, I want full screen. Um,

so let's do that.

So here we want to do a few things. one

uh we want to make the cards full full screen in uh mobile. The second one is we want to make to remove the rounded corners because in Instagram you don't want like if you're taking a screenshot

you don't want to show the rounded corners. Um and then remove the card

corners. Um and then remove the card border so we don't need the border and uh we want a navbar. You know it looks a little bit better for our website. So

I'm going to add some navigation up down and the dots in the middle. So, I'm

going to press enter.

And there we go. We have the full screen beautiful layout on mobile. And what is cool about this is that this totally works on a normal website, right? Yes,

I'm doing for Instagram slide, but you can totally do this for a portfolio uh for, you know, a a a company website.

It's really really usable. So, at this point, uh, I'm just going to, you know, fix the the small issues for the navigation. And at the same time, I

navigation. And at the same time, I think it's good to to know how to fix those things, uh, and what works best.

So, for example, if you want to have a specific animation and it's not working well, like this this guy here, uh, you know, I'm just going to copy this this uh this prompt here, which is really

cool. And, you know, applying what I'm

cool. And, you know, applying what I'm teaching, which is what I'm doing right now, and I'm going to select this. Just

make sure that sometimes some of the buttons, they have like extra containers. So we're going to use the

containers. So we're going to use the family of elements to sort of like gauge what are the children elements, what is the parent element and it has a

highlight which is very helpful. And

then from here I'm going to go to prom and I'm going to say uh use like I'm going to put the prompt and apply.

All right, there you go. So on hover it gives me this beautiful uh you know beam animation. Sometimes you might need to

animation. Sometimes you might need to be a bit more specific and sometimes you might need to reference a component. So

for example one of the buttons uh you know let's say you you select this and you're going to go to prom and then you're going to reference a component.

Uh but make sure that when you do reference something, whether a design or a template, you do mention to keep the original design. Uh and you just want

original design. Uh and you just want the technique, you just want the color or the shadow or whatever. Like be

specific as much as possible. I think uh this is one of the weaknesses of Gemini 3 is that it it it is it is a little bit too creative for its own good, but at

the same time honestly I have a ton of happy accidents and I think that's amazing.

So all of these prompts I'm going to to you know to refine this and they're going to be available in the prompt builder. And now let's get into the

builder. And now let's get into the landing page.

So a pro tip when it comes to uh you know creating designs with Gemini, you need a ton of context. I you know talk talk many times about collecting

inspiration whether using my mind or in my case I like it quick and dirty which is I'm using photos. And you can see I

have all of my designs organized. In

this case, I have my design and these are the ones and the templates that are available on Aura and I can just copy this and bring this to Aura. But you can

see it's organized by landing page, hero testimonials feature FAQ all the things that I need to compose a beautiful website.

So here I'm going to paste the design and notice the little animation that I added yesterday. And uh this is kind of

added yesterday. And uh this is kind of cool. Um you know, one thing that we

cool. Um you know, one thing that we that I change is that you know, I want to make people understand that yeah, Aura is faster because we're just generating HTML. So it's just 30

generating HTML. So it's just 30 seconds. And if you want to watch the

seconds. And if you want to watch the video, I think the video works well. So

I'm going to insert paste the image. So

copy and paste. And then I'm going to go to prom builder because you know instead of typing. Um, and what I'm going to do

of typing. Um, and what I'm going to do here, because it's a landing page, in this case, the design is a landing page.

It has all the sections. I'm going to say create uh, you know, the landing page. So, you might want to sort of like

page. So, you might want to sort of like customize this. And then you might you

customize this. And then you might you want to select the icons that you want.

So, in this case, I want the solar icon.

And there's a number of icons uh that are available on open source. So, you

might want to reference them. And um you might want to also apply the animation, but my favorite way of applying animation is to use the code snippet.

It's a lot more uh accurate. So I'm

going to add all of this stuff and uh you know here and I don't need to reference the style. So I'm going to remove this because I have an image. And

finally I'm going to add the animation.

So animate and then add code snippet.

And again I can use uh animation on scroll and animation key frame and uh yeah you know you can also add border

gradient if you want. So let's hope for the best.

And then boom this is all one shot and you can see we have the animation. It's

beautiful. It's respecting the layout which is this. Um it's not perfect. It

depends uh on, you know, a number of variables, but it does a really good job. You can see uh it has the layout,

job. You can see uh it has the layout, it has this section here that I want, and it has, you know, some of the interactions that I want and it looks

really, really good. You know, for a first shot, this is amazing. Obviously,

you can easily change the font pairing.

So for example, you want a space grotesque or you want men rope uh you want tighter and it's already you know

more unique. So don't skip this part.

more unique. So don't skip this part.

It's just a few clicks. You get to learn the uh you know how how to say things, how to prompt things and uh you know you can change all of these logos. We

support a number of these uh collections. we're going to support more

collections. we're going to support more of these uh icons. And obviously, you want to change the images. You know,

each avatar, you might want to go here and then you want to go to image and you want to search for portrait or headshot, whatever works for your design. And one

thing I love is also uh Unicorn Studio.

So, you know, I'm going to go to assets.

And this is where I have a bunch of these beautiful backgrounds. So the one that I use is actually this one which is really awesome. And often times when you

really awesome. And often times when you use an animation like this one, it might be a little bit overpowering depending on the colors and so so on. You can set

it to a saturation zero and you can set it to uh less brightness. So now it's a little bit less uh overpowering. And

then we want to set the uh buttons to be different. So this is quite easy. What I

different. So this is quite easy. What I

can do here is select the buttons and I'm going to go to prompt and I'm going to say change the main button to and then I'm going to go to component and

I'm going to search for button this one and I also want the secondary button. So

uh another thing you can do so for example this could be a good secondary button and uh so this is the main button I just want to specify secondary button for the

second one and that's it. This is looking great. Uh

one more thing that I love to do is to you know to change the border gradient because it adds that little you know uniqueness to your design. And I

everything that is human touch I think you should totally spend the time on it.

AI should be there to just create the blueprint create the basic things create I mean it's not even basic. It's just

like it takes you to that 90% and even that if that 90% is ahead of the curve that's amazing and then you add that extra 10% then you're like 200% or 300% ahead of the curve which is even more

amazing. You can never do too much

amazing. You can never do too much right? You should you shouldn't you

right? You should you shouldn't you should never think that oh I'm doing too much. No because like AI gives you so

much. No because like AI gives you so much power right now. It gives you like a superpower. It's up to you to do the

a superpower. It's up to you to do the rest. So here you know I'm I'm applying

rest. So here you know I'm I'm applying uh border gradient. I can you know change the the opacity of the border gradient. I can change like a triple uh

gradient. I can change like a triple uh color border gradient. It's really

really fun. And definitely definitely don't skip uh this part. Sometimes AI is like you know not exactly getting the size that I want. So you can totally uh

change and go into the tailwind code. Uh

you can go into the coding as well. So

for example I can go to code. I can

check uh the container of it. Going to

set the height to 40x8 pixel. I'm using

Tailwind code by the way. And if you don't know code that's totally totally fine. Don't worry about it. just prompt

fine. Don't worry about it. just prompt

everything, you know, like I want the first button to be a little bit taller than the second button. If you do know code and if you've gone through this before, you're saving yourself a lot of money. You don't have to prompt, you

money. You don't have to prompt, you know, you yourself are gaining the skills, you're gaining the knowledge, and you can do it yourself. So, all

right. So, I even changed the color of the button using one of our components and I asked it to keep the border beam, which is kind of cool. Like, you can

really remix and redo everything, which again, I love love love doing that. So,

now we're going to get into like the all of the the prompts that we discussed before. And I'm going to select all of

before. And I'm going to select all of this stuff and I'm going to go to prompt. Of course, I can also do it from

prompt. Of course, I can also do it from the, you know, the whole layout here.

That also works. So, it's up to you.

It's definitely more consistent. If you

want to make sure everything is is kept there, just select the element and uh prompt there. It's uh you know, you can

prompt there. It's uh you know, you can control things a little bit better and it's not going to try to you know, be too creative.

All right, I'm going to try this flashlight animation here. And, uh, you know, it's very cool. I'm going to paste

that um apply also to the border uh gradient. So,

gradient. So, all right. So, we have a beautiful

all right. So, we have a beautiful flashlight animation applied to our card. I even applied it to the other

card. I even applied it to the other cards as well. And so, yeah, you can absolutely apply this beautiful effect to your website. Let me do another one.

animate the cards to rotate. But in this case, I'm going to be specific. The the

middle the the white card uh to and for the cards to rotate between three cards at

previous and next.

All right. So again, it depends on uh you know sort of your layout. I think

this was a bit difficult but it still managed to do it. for example, uh you know this auto plays to the next one and you can click uh left and right. So

depending on your layout, you might have different results. I think this is these

different results. I think this is these are awesome prompts that you should be uh playing with and uh you know the

flashlight, the text animation.

So the clip animation for the text, the beam animation, the carousel marquee animation using alpha mask, the you know

the the flashlight again and also the sort of like switching between cards.

You can also mention about this kind of animation. I'm going to add all of them

animation. I'm going to add all of them to the prompt builder and I'm going to make it super easy for you to reference when you're going to be building your

own site or your own Instagram slides.

I'm also going to share the remix for the background so that you can use it for your own uh website. Now it is

important to understand that if you use the Unicorn Studio asset um as is then it's free and uh you know you can make

it part of your website it's fine but if you want to customize it using Unicorn Studio you need especially without the watermark you need a pro account. Um,

and also some of the Unicorn Studio assets that we have on Aura is, you know, for our pro users. We put a ton of work into these templates, these

components, these backgrounds, and of course, we want to make this sustainable. Uh, but, you know, if you

sustainable. Uh, but, you know, if you want to customize it fully, again, I'm making this remixable, and this part is free. However, you do need a pro account

free. However, you do need a pro account on Unicorn Studio to be able to customize it. And so, for example, once

customize it. And so, for example, once you remix it, you're going to have access to the editor, which is which is so awesome. So, if you want like a

so awesome. So, if you want like a different animation, for example, uh you know, one thing that I recommend that anyone should always do is just like

play with the show and hide to see what is affecting what. Now, in this case, what you want to look at is the beam animation because the beam animation is

super customizable. You're going to go

super customizable. You're going to go to the type and you're going to try different animation. So, for example,

different animation. So, for example, the star, you know, square, triangle, and so on and so forth. Um, one thing that I love, for example, is this one

Nova. And you can certainly like

Nova. And you can certainly like customize the thickness of it. So if you if you want to make it less uh you know in your face then you can make the thickness to be lesser. The same with

the scale and the color and the blend mode. Um the same with the texture. So

mode. Um the same with the texture. So

you can play with the texture.

You can adjust the width and you know and height and saturation, exposure, all kinds of of stuff that will really make

it elevate your own landing page. And uh

you know it's super fun. You can

customize it. I'm going to share the link. You can just play with it. Um,

link. You can just play with it. Um,

it's super friendly as well. Anyone

without any coding experience, just click uh hide, show, see what works. So,

for example, the god rays uh is the little light rays and we have the chromatica aberration. You can add more

chromatica aberration. You can add more to to the filter. You can add like blur.

You can add like, you know, a mouse effect. You can add like a a light, you

effect. You can add like a a light, you know, a light that follows the mouse.

You can add like aurora, you know, a lot of things. And you can also click on

of things. And you can also click on pause or play because some of the backgrounds, they don't need to be animated. And some of them maybe you

animated. And some of them maybe you want to. And uh another thing that I I

want to. And uh another thing that I I love is the tracking of the mouse. So,

for example, if you set the tracking of the mouse here, you can see that when I move my mouse, the animation of the shader actually follows. So, this is

super super cool as well, and you're going to have just a ton of fun.

So again, Unicorn Studio is free, but if you want to publish it, you know, customizing I think is free, but you know, if you want to customize, you

publish it without the logo and all that stuff, obviously you want that, then you will need a pro account.

So that's it. Today we learn how to create uh a beautiful landing page with animations.

You know, all of these animation techniques, you know, to create a landing page like this one using the beam, using the clip animation, flashlight, you know, you can go crazy

with all of these prompts, with all of these templates, all of these references. And of course, we also learn

references. And of course, we also learn how to create an Instagram slides using a prompt and then customize it, you know, change the image, change all all

of this. And then you can imagine you

of this. And then you can imagine you can just take a screenshot, right? Uh or

take a screen uh recording of the animation if you have animation or you can publish this as a portfolio website, a landing page, whatever it is. I think

it works really, really well. and then

post that and then you know watch your numbers grow right because at the end of the day that's why we're creating landing pages that's why we're creating uh you know Instagram slides because we want to create beautiful material that

is ahead of the curve that is going to bring you new followers new customers to your business here the same way this is another template they're available on

Aura so you can have a ton of fun with them so I hope you enjoy this video uh And if you're not subscribed yet, you should totally subscribe because I'm

going to have a ton more of this type of content. I'm someone who is super

content. I'm someone who is super curious. I explore all of these things,

curious. I explore all of these things, the prompting. This is the new era. This

the prompting. This is the new era. This

is the golden era with Gemini 3, and it's just going to get better from here.

So, please uh consider subscribing, give it a try on Aura, and I'll see you in the next video.