I Wasn't Ready For What This Does

With how powerful generative AI has

become, new tools are constantly

emerging. And amongst all, Google has

really stepped up its game since Gemini

3 came out. Because of this, you've

probably seen people on X oneshotting

these amazing landing pages and saying

that the model is a gamecher. But

they're lying. The truth is they need to

use multiple tools to build these sites.

And Google has been going crazy with

their experimental tools, which are

powered by Gemini 3 and Nano Banana. But

Google doesn't offer a way to use all of

them together. So, you're going to need

a complete workflow that combines all

these tools. We've got a lot to talk

about today as I wasn't really expecting

them to work so well together. The

animations that you see on those sites

are just a series of frames. But if you

use AI tools to generate these frames,

you don't get consistent results. Google

solves this by releasing an experimental

tool called Whisk, which is particularly

designed for assets generation. It is

powered by Nano Banana for image

generation. I often use Whisk to

generate sequences of images for hero

sections. I provide prompts in simple

words, update the details step by step

for each sequence, and then use the

resulting images in the hero sections.

Using this whole process, I created this

landing page and was able to implement

this cool animated effect with the

camera. To start, we're going to

generate just the first and last frames

of a sequence and then create an

animation using those two key frames for

the hero section. But if you just start

prompting it without any structure, then

the key frames you want won't have the

same structure continuity. For this

purpose, you have to clearly define the

subject, the visual intent, and the

level of detail you want in the image.

Whisk uses a subject, scene, and style

framework to guide image generation,

allowing you to combine them into a

single new visual. That's why I included

all the details on what kind of camera I

wanted, how I wanted the reflections on

the lens to look, the resolution, and

the depth of the image, and it created

the visual exactly as the prompt

outlined. The generated image will not

always meet your expectations, in which

case you just have to mention the change

in simple words and it incorporates the

changes into a new visual. What I like

most about Whisk is that you don't have

to write long detailed prompts to get

great results. This is because it uses

Gemini 3 as a middle layer which writes

the detailed prompt on top of your

simple words leading to solid visuals.

Now, it raises the question of why I

chose Whisk. While Nano Banana requires

extensive text prompts, and Google's Mix

Board is designed for mood boards,

neither is optimized for fast,

controlled image remixing. Whisk's core

strength lies in combining reference

images, allowing you to generate images

with better control. Once I had my first

frame, I wanted my last frame to be a

side angle of the camera with the lens

taken apart to show the components. So,

I prompted it to generate a technical

cutaway, specifying how it should layer

the internal lenses and how the

background should appear. It didn't get

it right on the first try. It broke down

the internal circuitry too which I

didn't want it to show. As I said

earlier, you just mentioned the change

you need to make. So I instructed it to

only show the lens layering after which

it successfully generated the image

without showing the internal circuitry.

Now whisk also supports animations using

the VO model. But Whisk's animations

focus on animating one image rather than

being able to connect multiple key

frames together. That's why I used

another tool called Google Flow. Flow

uses Gemini for planning the story,

Google's image models to design steady

characters, and VO to create video

content. I had already created my

starting and ending frames for the

camera animation, and now I wanted to

create a transition in them. So, I used

the frame to video option and provided

my frames. In order to ensure a smooth

transition, you need to mention in the

prompt how the starting frame leads to

the ending because it provides the model

with a logical path. Your prompt should

include how you want the animation to

flow, how the starting frame should

transit into the ending frame, and the

animation style, as these details ensure

the motion is intentional. Sometimes

these models tend to make mistakes with

complex tasks, so it didn't get my

animation right the first time. The

generated video got both the spin

direction and the ending frame

completely wrong, making the transition

awkward. The fix was simply reprompting

with some the necessary changes to

ensure the animation was correct. Just

like how I prompted it to change the

direction of the spinning of the camera

for smoother transition after which it

produced a version I wanted which I

downloaded for use in my project. Now

the video generation is not available on

the free tier unlimitedly because video

generation models are costly. It only

provides 180 monthly credits depending

on the region. Since each video

generation with VO3.1 uses 20 credits,

you get up to nine videos per month.

Since the videos generated by Flow are

in MP4 format and can't be used directly

in hero sections because they are harder

to map through scroll animations in. For

this reason, I converted them to WEBP

using a free online converter. I

uploaded the MP4 video, set the

conversion settings to produce the best

quality animated WEBP and it converted

to a WEBP format which I downloaded for

use in my project. Choosing WEBP is

important because with this it is easier

to map scroll interactions since on the

web this format is treated as an image

which doesn't require a media player

wrapper like other formats do. These

files are more compact and deliver

improved performance making them ideal

for short form animated content. I added

the converted WEBP file to the public

directory of my newly initialized Nex.js

project because this is where all the

assets reside in the project. Now once

we had our animation ready, I wanted it

to add it to the hero section in my

landing page. I generally prompt Claude

in XML format because their models are

optimized for understanding XML, letting

them parse structured intent more

reliably and reason over each section

independently. The prompt I gave Claude

for adding the animation included

context on what I wanted to build, where

the assets for the animation are

located, and how the scroll through

animation should work and our goal in

the context tag. I included all the

requirements in the requirement tags,

described how the animation should

behave in animation behavior tags, and

specified the implementation details,

constraints, and required output

directly in the prompt within their

respective tags. When I gave Claude this

prompt, it automatically implemented the

animation exactly as I wanted. Even

though our hero section looked good, the

rest of the components looked like the

usual generic websites AI tends to

generate. This is because we were

expecting highquality results from

vanilla CSS instead of relying on

existing beautiful component libraries.

There are multiple UI libraries, each

with its own specialized style and

design themes, but you have to choose

the library that suits your project

style best. For my camera landing page,

I was going for an Apple style UI. And

the closest library to that idea is Hero

UI. It's built on top of Tailwind CSS

and relies on framer motion to bring its

components to life across the website.

The library supports most commonly used

frameworks like Nex.js, Vit and Laravel.

So using it with my existing Nex.js

setup was easy. There are two methods of

installation. Either you install it

projectwide with all components

available via the install command or you

install individual components as needed,

which is what I did with Claude. I

prompted Claude to replace the existing

components with Hero UI components and

the website was significantly improved,

giving the site a much more professional

look and feel. Users decide whether to

stay on a landing page within a few

seconds by looking at how engaging the

UI is. Motion helps guide the visitors

attention to the features we want them

to notice, ensuring higher user

retention. Implementing animations from

scratch using vanilla JavaScript can be

challenging, so I rely on existing

libraries to simplify the process. For

this project, I used motion.dev, a free

and open-source library that offers a

wide range of readytouse animations.

Normally, animations would require

manually syncing DOM updates with

animation timings. However, motion.dev

abstracts this logic by handling DOM

updates internally. It automatically

updates components as the user scrolls,

so animations play smoothly without the

need to manually track scroll positions.

This library uses motion components

instead of standard ones. These

components have start and end states

defined in the props and the library

handles the transitional logic between

them automatically. For our landing

page, I prompted Claude to implement

parallax and scroll animations using the

library. As a result, the user

experience improved by guiding attention

toward the key sections of the page.

Describing how the sections of a page

should look is a tedious process. It is

better to get inspiration from existing

galleries where people post their

creations. I use 21st.dev, a platform

that offers inspiration for a variety of

UI components built by multiple

designers. The components are built on

top of popular UI libraries like

Aceternity UI, Prism UI, Coconut UI,

Magic UI, and many others. While looking

for ideas, I came across this call

toaction section that would look great

on my landing page. The part I like best

about 21st.dev is that for any component

I want to use, I can just copy a prompt

specifically tailored for AI coding

agents. I don't need to guide Claude

myself. The prompt is extensively

structured, including project

requirements such as shad CN and

TypeScript support. It provides code

with instructions for the coding agent

to paste directly into the components

directory. It includes all necessary

dependency code and the paths where it

should be added and it lists the

required npm packages to install. It

also includes an implementation guide

for your AI agent detailing all the

steps needed to integrate the component

directly into your application and how

the agent should tailor it to the

specific project's needs. I gave this

prompt to Claude and it integrated the

exact same call to action section for

which I had copied the prompt. It also

added motion from the motion library we

had installed. Even though I did not

explicitly mention adding motion

anywhere, I also got the footer from

21st. Even though the demo footer

included icons for GitHub and Twitter,

when I gave Claude the copied prompt, it

omitted the GitHub icon since it wasn't

relevant to our project. It customized

the footer to include only the icons

related to the camera product site,

creating a footer that perfectly fit our

landing page. That brings us to the end

of this video. If you'd like to support

the channel and help us keep making

videos like this, you can do so by using

the super thanks button below. As

always, thank you for watching and I'll

see you in the next one.