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.