Secrets to unlock Gemini 3's hidden power...

So let's face it, even though Modak Gemini 3 is great at design, there's still a difference between just a good-looking website to something that feels like truly unique and stunning. And the key thing here is animation and micro interactions. All those details makes your website looks just very different from a template. And even though model default is not output this level of design and animations, they actually contain a lot of information and knowledge about how to use certain

libraries to output things like this. And all you need is the right process and prompt specs. And this is what I want to showcase you today. How can you get your model to output stunning design and animation like this? But before I dive into this animation just part of work of designing a awesome website and landing pages. There's so many other works that need to be done to go from an idea to an actual landing page that convert really well including things like research, the structure of the

content, the messaging that actually resonate with people. That's why I want to share this awesome free resource from Hopspot. Their eight-step process for going from idea to a high converting landing page where each step comes with detailed AI prompt for the right tool. This process help you breathe out into three different phases from deep research about competitors put best practice to generate multiple variants of the copy and content structure as well as visual guidelines to eventually

implement those things in the code. So you're not asking model to build the entire landing page in one shot. You're progressively building the context. So the end result became much better. But most importantly, they give you this collection of best practice prompt templates. They already baking a lot of industry knowledge and best practice that they research from different companies from how to get agent do very deep analysis that covering all different aspect to collect necessary

information before you design the content structure to the prompt that can turn the research results into a clear page structure as well as iterative process prompt that can optimize content and even do some AB testing. And in the end, it give you a structure to turn all those research into a PRD that you can send to a coding agent to finish off all the implementations. So you can actually ship, not just brainstorm. This is extremely useful and practical. I'll put

a free download link in the description below so you can just copy and use. And thanks to HubSpot for sponsoring this video. Now let's get back to making awesome animations. They're going to really level up the landing page after you have the initial structure using Gap. So there are two libraries that is very critical for you to achieve this level of animation interaction design. One is called GSAP another is motion.deaf. So most of you probably more familiar with motion.dev or framer

motion because it is the most popular animation libraries which are particularly great for UI animations that translate between different UI state like those ones. It is also commonly used on all those micro interaction animations that you saw on website that's animating different UI component videos. We will get to that one. But on the other side, there's one library called Gap that is particularly great for more complex animation especially squirrel driven animation

which means you can build very complex landing page where as user scroll there are multiple elements made it together following a same timeline which is extremely popular for landing page and website. So as a rule of thumb I often use GSA for complex scrollbased interaction for landing page while inside app mostly I will use motion app and let's talk about gap first. So gap is library that you can use for all the cool scroll driven animations. allow you to programmatically control the

animation based on how much user scroll to proceed in the timeline of the animation which means user can scroll in and scroll back and animation will just follow it and that creates a much better interactive feeling especially for things like landing page and gap star with a library that simply allow you to define a timeline of different animations like for each DOM element you can see what are state it should transform to what are durations and what are sequence and they also give you a

lot of useful tools tools like you can animate a paragraph of text word by word, line by line or even character by character and all those detail allow you to put together some pretty cool text animation as well. But the most important part is a scroll trigger. So scroll trigger is where you can define programmatically when user scroll into certain area then trigger some animations. And this scroll trigger has this thing called squ. This is where the animation progress and timeline were

directly tied to user school progress. And this is what creates all those amazing scroll animations and interactions. And there are a lot of things you can learn in GSA to make a super smooth animation. But you don't need to learn all this. Gap is not a new thing. Model already have a lot of knowledge about how to use gap. But the challenging part with gap is is not really implementation details. But how do you actually describe this animation? Even large language model know how to

use GAP. It doesn't have a ton of really high quality example in its knowledge base about what a good animation and UI timeline look like. That's why development process and context engineer here is pretty critical. Now, one of the core thing here is creative work like animation interaction is very difficult. You can't just give a generic prompt to the model like help me generate a cool animation for X and expect it to work. Good animation like this requires a lot

use GAP. It doesn't have a ton of really high quality example in its knowledge base about what a good animation and UI timeline look like. That's why development process and context engineer here is pretty critical. Now, one of the core thing here is creative work like animation interaction is very difficult. You can't just give a generic prompt to the model like help me generate a cool animation for X and expect it to work. Good animation like this requires a lot

of thinking and planning of the whole timeline and how different elements should coordinate with each other in that timeline and some of task like even those SVG shape is not easy task for model to do it one shot. So you must go through a good planning phase, break that down into different small tasks and make the prompt to be very explicit so that the model just focus on the implementation of the animation rather than doing both creative exploration as well as the implementation because

otherwise model's default behavior will just revert back to something that's easier and common to implement. And this also what we mentioned as distributional convergence because large energy model predict tokens based on statistical patterns in training data and safe design choice that those works universally and offend no one just dominate the web training data. However, with the right guidance, context and planning, you can actually utilize model to do some really creative work. Just a

very quick example. So this very mediocre interaction page is what I just got by prompting it. help me create a super animated cool landing page with animated text and scroll interactions using GSAP. So model's default behavior literally just break down the text into different you know slide and sections with some sort of animation which is not that interesting right but once our prompt becomes more specific it start creating something really interesting like here I just give a more specific

prompt where I actually break down the interaction and animation I have in mind by saying create a horizontal scroll animation using gap scroll trigger and then I will talk about firstly the layout instead of using the full screen slides which is default behavior we saw earlier I want a continuous horizontal text flow. Imagine a single very long sentence and use a single container so items flow naturally next to each other with variable gaps and I'll give content

sentence and also some requirements that embed visual elements like SVG curves icons in line with text acting like a punctuating or conjunctions rather than separating them into their own distinct sections. And again this is just some prompt that I use to making sure the whole thing should feel more fluid. And in the end, I just repeat again that it should feel like I'm reading a long text rather than flipping through a slide deck. And with this one, the interaction

I got is just much much better and creative. You can see this whole thing just became a horizontal scroll text animation that as user scroll, it will move from left to right with different text styles and some sort of animations. And we can actually animate it even further. I can start adding more effects like please add more animation to text using split text. So things show up character by character. nicely as user score using ease and here I'm using super design to build this because it's

very easy for me to just generate multiple different versions compare them and choose iterate the one I like but you can totally do that with cloud code cursor as well and here I actually have some special prompt about gaps to making sure it can handle certain interactions very well because even though model does has a good amount of gap knowledge it will still make mistakes cool so now we got this new version and let's try it so if I scroll You can see all those

character is showing up one by one which just add a bit more um nicer animation feeling to it. So what we learned here is that model like Gemini 3 is actually capable to produce some really high quality animations using those modern libraries. But you just need to separate out the creative thinking and implementation into two different stages and give very specific prompts. However, your challenge might be you might not have experience building animations and

figure out how to explain the timeline. But this is where you can also utilize model to figure this out. On one hand, if you search for like gstab or motion.dev examples, there whole bunch of examples that you can use as inspiration and some of them even include the real code that you can paste uh to the model. But you can also get model to generate original creative work too. So you can use any AI to do the planning. Here I just want to showcase you how can you use like a Google AI

studio playground where you can have access to Gemini 3 Pro customizing instruction. So here we can give a special instruction like you are a world-class GSA motion designer developer. You think deeply about what's the epicenter of design and what are one core interaction that can make user wow and unforgettable. Try to tie back to the uh scroll scrump so the interaction feels live as user scroll and think through all the animated elements timeline transformations one by one and

making sure everything works cohesively and try to design the animation that requires no 3D model complex image video assess and complex SVG something that can be achieved using just HTML CSSJS and here I just need to mention those ones because otherwise model will just output something that so creative that the only way you can achieve that is using nano banana and video generation model to generate video and embed into your website. And if you're interested,

I actually have video covering how to use nano banana video generation model together with coding agent already which you can basically build something like airpods interaction. As you scroll, you have this kind of animated AirPod. And the way you basically get those things work is that you generate video and break down the video into different frames with scroll trigger. And same as 3D model as well. You can build some absolutely stunning design using 3D model and 3GS. But that does require you

have a pretty good 3D model to be used and that does take some time. Like there are new models out there like Trillius 2 that will allow you to just upload image and generate a 3D model based on that. But the problem is that even the best model out there will just get some details incorrect. Like this one, it looks perfect. Like some part shape just don't look 100% and since like text and texture almost guaranteed to get it wrong. So it's not quite there yet. It

does take more work for you to do some editing and make it right. So this is not the part I'm going to cover today. Same as SVG as well. Model today still can't do very complex SVG extremely well. Uh it is much better now and it can do some simple SVG very very well. But if you're very complicated, it still struggle and can take much more time for you to get to a version that you like. That's why I'm giving it those constraints here. But you can remove that if that's the kind of effect you

want. And then I can just prompt it. I'm making cool animation page for Coca-Cola with text. Uh this one which I just got randomly from web uh and help me design and planning the landing page interaction animation. And now it will generate this plan. And this key thing here is that we want to take a look to understand what it is proposing and this something that makes sense to you and also uh something that can be achieved by code. So here is saying it start with

want. And then I can just prompt it. I'm making cool animation page for Coca-Cola with text. Uh this one which I just got randomly from web uh and help me design and planning the landing page interaction animation. And now it will generate this plan. And this key thing here is that we want to take a look to understand what it is proposing and this something that makes sense to you and also uh something that can be achieved by code. So here is saying it start with

a massive red circle sits in the center. As you scroll the circle pops and explode into 50 smaller red bubbles. Uh that's interesting. And the bubbles begin to fall upward. This one looks fair and we can start experimenting it. By the way, we'll be muting this planning stage inside super design already and we have some predefined prompts that going to make it better at planning those animations. So you can use again you can take this knowledge and work in any uh kind of AI agent. So

I'm going to copy uh this and paste in the prompt. Click enter. So now you can see this is version generated. It start with this morph effect that I think kind of simulate Coca-Cola bubbles uh and then the text start popping up uh nicely as I scroll. Okay, this part is a bit weird. Um but you can see the concept start coming together and you can like keep prompting it to make it a few versions until it works well. And on the side is another version that uh it generated as well. So

initially it started red background and with shape of Coca-Cola bottle uh then text show up there and there also like some bubbles on the side as well. Uh and then we get into this curve text which is really really nice. Um uh and in the end you know finish. So you can see that it's actually possible to get a model to generate original uh interesting animations for your specific product and brand. It does require very careful curation scoping to making sure it actually can produce high quality

animations. Here's another one. It has some cool hover effect for the uh text. Uh and then below that it give me this very cool uh score effect and I can add more stuff to it as well. So this is one example of how you can use Gasp to general animations. Next, there's also this library called motion dev that probably is much more popular and you can use that for specific UI state animations. So motion dev is basically frame motion. It became independent recently. If you were into animation,

animations. Here's another one. It has some cool hover effect for the uh text. Uh and then below that it give me this very cool uh score effect and I can add more stuff to it as well. So this is one example of how you can use Gasp to general animations. Next, there's also this library called motion dev that probably is much more popular and you can use that for specific UI state animations. So motion dev is basically frame motion. It became independent recently. If you were into animation,

there's probably a good chance that you already use framer motion because it is the most popular animation library, much more popular than others, which means model has a whole bunch more knowledge about frame motion. So you have higher chance to get it right. And most importantly, it is designed for a react type of project initially and is very good for UI animation. So you can build very cool UI animation for different components that you are building and all

those micro interaction just make your whole UI feels a lot more premium and same as GAP model already has good knowledge. You just need to give the right prompt and right spec to making sure to pay attention to implement those interactions. For example, if I prompt model to help me build a floating menu UI component circle shape clicking on which will fan out a few options for me with smooth animation and it will give me nice animated component like this. But it goes beyond just micro

interactions of your UI component. Often on different cool landing page you will see those animated UI demonstrate product. You can actually use frame motion to do something like this. I use same thing to generate the animation here for super design to prompt user to install the chrome extension and the way you do that is also pretty straightforward. So here I can give a prompt. We have this to-do app UI help me generate a self playing loop animation for landing page showcase and

I will give very detailed scenario. As I mentioned the model itself is not that great to understand or think through the animation while implementing. So I would say user should be able to type in a to-do and exit and also they should be able to complete an existing to-do which should disappear from the list. And the technical requirement here is the one that I think you need to measure a bit more. So obviously I would say use frame motion and simulate mouse cursor so that

you can actually get it to simulate a real animation that there's a mouse clicking on something. And the important bits is here like when I use mouse sometimes it will get the position wrong. That's because at default it use hardcoded coordinates for the cursor movement. Instead, what you should use is that you should get it to use use ref to get the bounding box of actual UI elements and tie the back to XY coordinates and in the end making sure it is looping. So I can send this one.

Cool. So on the right side you can see this animation is generated and as you can see that it animate everything cursor click interactions and the mouse will just go complete the to-do app as well and animation will loop and you can imagine that you can just take this component put on your landing page to actually showcase how your product actually works which is very nice experience. If you're using super design, we already have a lot of knowledge of frame of motion baked in.

But if you're not using super design, I also highly recommend you go add this MCP server from motion.dev as well. So this MCP server comes with two different tools. One tool is the documentation of the free motion for the AI. So after you add that, it will just give agent a whole bunch of documentation that it can read to making sure the animation generate is high quality and accurate. And it works with VS Code, Wing Serve, Cloud Code, basically any coding agent

that support MCP server. All you need to do just add this MCP server by copying this part to code.claw.json, which will open this gigantic JSON. You can just search for MCP servers. Add to the PJ folder that you want to try out and save. Now, if I go to my cloud code and do MCP, you can see this motion MCP has been added. And to visualize it better, if you see the UI on cursor, you can see that it automatically add a whole bunch of resource into the model.

But you don't need to worry because it's not adding 30 different tools to your agent. It basically just have two tools. One is listing all the resource docs. Another is read all the resource doc. Then agent can retrieve relevant information. To test out, I can say help me edit app store example using motion.dev on homepage. You can see it firstly uses list MCP resource to list out all the documentations and then it load two documentations about the layout animation and animate present and it

also has this tool that can generate more accurate CSS animation styling which I don't know how much it helps but it's there tool. Then you can see they add this page with a really nice and smooth animation for the cards. So this example of how you can use framework motion to enhance your product's quality through micro animations. If you're interested, we bake a lot of animation related knowledge on super designs to making sure design agents really good at

those popular animation libraries. So if you want, I have put the link in the description below for you to give a try and also include all the prompts and details about how I build those agents in AI builder club as well where we have a whole bunch of other top AI builders who are launching different AI products. and my already experienced problem that you are facing today. So you can join AI builder club as well if you want to dive deeper into the building and development

process. I hope you enjoyed this video. Thank you and I see you next

process. I hope you enjoyed this video. Thank you and I see you next