So, you probably have been seeing

different animation showcasing where

people talking about how awesome Gemini

3.1 Pro is in terms of producing

animation SVG design. But, when you try

yourself, you probably get those type of

shitty PowerPoint slide type of

animation that it just very far away

from production ready. And what is

making difference between those mediocre

slide deck type of animation versus

well-crafted animation video like this.

I've been experimenting a lot using

Gemini 3.1 Pro to produce specifically

product launch videos. And I think I

found a pretty good process that can

make a big difference on the outcome.

And this is what I want to share today.

So, the key concept here is basically

two things. One is that when building

animation, you absolutely want to plan

first. From the planning, you should get

a scene-based prompt that detailing

timing and UI state. One of the key

reasons your animation generated by

model is bad is because you're giving a

vague and open-ended request like

"Animate this" or "Make it pop", which

leads to chaotic, uncoordinated motions

and efforts. Especially for animation,

it is complicated task requiring a lot

of spatial thinking, which model is not

specifically trained at. So, what do you

want is actually separate out the

planning and building into different

stage. And artifact of planning is a

structured scene-based prompt. This is

most creative part. Even though you do

very basic things like this, by

structured prompt to explain very

clearly what are all the different

things you want the model to animate and

what different UI state for each scene.

And just by doing this, even without any

special prompt techniques, I guarantee

you almost get two to three x better

results. Cuz this takes away all the

spatial thinking and planning out of

model, so it can really focus on

implementation and have a rough

understanding about the overall

timeline. But, to do it properly, a good

scene piece prompt basically composed of

four different things in my opinion. One

is timing, another is clearly defined

state, plus some special keyword effect

that you can include to instruct

animation further. Let's take a this

video example from Rocket, where he made

a video about Open Cloud. You can see

the result here is much better than your

normal product launch video that looks

like PowerPoints. And if you look at his

prompt, it is doing this exact same base

prompt structure where for each scene it

will talk about how long this thing

should be and detailed explanation of

the state, including what should be in

the frame as well as some special effect

keywords like 3D perspective, rotation,

fading with staggered delay, tagline

with staggered item reviews. And with

those things together, it is capable to

follow instruction and produce really

high-quality result. Here I was able to

do something similar to generate a

product launch animation video like this

by producing scene-based prompt where

each scene it would talk about the

timing, the special effects, the state,

the action, and technical details. So,

this is kind of just a main composition

of a good animation prompt. And I know

sometimes it's not easy to construct

such a prompt. That's why I built a

skill in Superdesign skill library for

product release demo animation. And with

this skill, I was able to generate nice

product launch video like this for our

Inspire mode based on our video UI and

generate nice scene-based animation

prompt. The process was simple. I first

they use our Chrome extension to clone

any UI component that I want to make the

animation around. And if you don't know

Superdesign has this free Chrome

extension, and they allow you to clone

website into pixel-perfect web coding

playground or clone just very specific

UI components. It will generate

cleaned-up version of HTML that you can

paste in any coding agent. But if you

paste into Superdesign, it will generate

a pixel-perfect clone of whatever UI you

captured. And based on that, I can

select this UI to dash skill library and

under animation, there's a product

release demo skill which I can click on.

And give it prompt, we just released an

Inspire mode which allow you to find

relevant design inspiration as a design.

Help me make a product launch animation

video to showcase the user journey.

Initially, zoom into prompt input with

build and plan mode only, then Inspire

mode show up and cursor click to switch

and see inspiration items popping up.

Here, let's making sure we select the

Gemini 3.1 Pro mode since it is the best

model for animations. In this skill,

we'll start ask me some target questions

about animation details, including what

the initial state should be, how the

tabs should be showing up, where the

inspiration items should be popping out,

and how the cursor should be looking

like. And then it create this animation

plan with a prompt breakdown like this

for detailed timing and UI state. And at

bottom, it has a summary and I can make

chance to read. But if it looks good, I

can just tell it to start building. And

with this plan, in the end it generates

awesome product launch videos that I'm

pretty happy with. So, this is something

you can go and try out today for free.

All you need to do is just go to skill

library, find this product release demo

skill, and start making real UI-based

product launch videos. I'll put the link

to download both this Chrome extension

as well as Superdesign platform below so

you can try for free. But as I mentioned

before, everything I talk about here is

a general prompting process that you can

use with Cloud Code Cursor, anything

else. We just made that process easier.

Thank you and I see you next time.