Claude Code + Nano Banana 2 = INSANE AI Website Animations

With Claude Code and nanobanana2, we can now add insane animations and motion graphics to our projects in minutes.

Just take a look at this smooth product deconstruction or this holographic 3D tilt effect. And that's only a couple of the examples I'll be showing you in this video.

But here's the thing. Most people hear Claude code and automatically think that it has to require some technical skill or coding background.

And honestly, it's literally the opposite. Especially because we're going to be using the web version of Claude code, meaning you don't even have to open one of those scary black boxes with white text that you see everyone else using.

Instead, we'll just be using NANOBANANA 2 for all of our images and then Claude code to actually turn these images into assets for our project.

So in this video, I'm going to walk you through that entire process step by step. I'll even leave all of my prompts in the description below.

And by the end of this video, you'll be able to create animations in motion graphics that most people would spend days working on.

So let's get started with our first example. Now, it's no secret that static product images are dead and standard video ads are starting to get boring too.

So if you want to build a product landing page that feels like pure luxury, you need an interactive design.

Which is why example number one is going to be a high end audio e commerce page with a draggable X ray scanner.

First we need to generate our base product image. I like to use Higgs Field AI because it has all the newest image and video models all in one place.

And this will come in handy later when we need to generate some animations for this text transition

or this scrolling effect.

But for now, we'll open Higgs Field hover over image and select nano banana 2. Then in our prompt box settings we'll make sure nano banana 2 is actually selected.

Our aspect ratio is 16. 9, our resolution is 4k and our batch size is 4. So we have more options to choose from.

For our prompt, we're going to be using a JSON structure that covers the subject material, background lighting, camera angle and snow style.

And after a few generations, we now have a photorealistic studio lit image of our product. Now we'll download this image and save it as solidheadphones png.

It's extremely important that you know the exact file names because this is what Claude code will use to reference the images in your project.

But now it's time to make our second image, which needs to be exactly the same as our original product image, but with a see through effect.

So we'll upload our first image right back into Higgs field as our reference. Then we'll use this as our prompt to make sure we keep everything the same.

But just apply a transparent effect and the result couldn't be better. Nanobanana2 even realized that there's no point in applying the X ray effect to the cushioning.

Now we'll download this second image and save it as x ray underscore headphones.png but all we have right now is two static images.

To turn this into an interactive element, we need to open up Claude. But before we start using Claude code, we need to open our settings, click on connectors and connect our GitHub account.

Don't worry if you don't have GitHub. It literally takes takes a few seconds to sign up. With our GitHub account connected to Claude, all we have left to do is create a repository that claude code can use for our project.

So we'll click Create Repository, type in our repository name, set its visibility to private, and then click Create Repository.

Now we're ready to boot up Claude code. To do this, we'll click Code. This will open three different ways to use Claude code, but the simplest by far is the web option, which is what we'll be using today.

Then we'll click Connect Repositories. This next part is important because we have the option to either give Claude code access to all of our repositories or to select a specific one.

I would highly recommend only selecting the repository that you want to work on, just to keep it simple.

Then we'll click Install and Authorize and complete a quick verification. After that we'll name our cloud environment, select Trusted for network access, and then click Create and Finish.

And that's the entire setup done. Now to continue with our Headphones example, we'll change our model to Opus 4.6 and then click Select a Repository to connect to the repository that we just created.

Then we'll upload both of our product images and fill in this prompt, which is designed to create a high end ecommerce store that features our interactive slider element between our two images.

Once Claude code has completed its response, we can see what it created by heading back to our GitHub repository, clicking on the file it made, downloading it, and then opening it in our browser.

The final result is exactly what we asked for. We have a beautiful storefront, and as I Drag my mouse across the Hero section.

An X ray scanner seamlessly reveals the internal tech of the headphones. It's buttery, smooth, highly interactive and makes the product look incredibly premium.

That's how to stand out on a product page. But what if you want to stand out with a cinematic dramatic landing page?

Well, for our second example, we're going to build a high end motion graphic where an AI video plays inside of massive typography and then drops you into a sleek company vision section.

To generate the best video possible, we'll use Nano Banana 2 to create our start frame. So we'll head back over to Higgs Field and keep all of our previous settings the same.

But this time we'll use this JSON prompt to create a first person shot of us flying down a cyberpunk street.

This is exactly what we were aiming for. Now we'll click animate and enter our video prompt where we want to start flying down the center of the cyberpunk street street.

We'll make sure prompt enhance is off. Our model is set to cling 3.0. Our resolution is 1080p and our duration is 5 seconds.

And after generating a few times, this one will fit our cinematic project perfectly. The best part about using a video for our project is that we don't even need to download it.

We'll just right click the finished video and click Copy video address. Then we'll head back to Claude code and enter this exact prompt.

Then we'll paste in our video address and click Run. Once it's finished generating, we'll have to update the code by heading back to GitHub, clicking Compare and Pull Request Create Pull Request Merge Pull Request and then Confirm Merge.

It may sound like a lot, but honestly, it's as simple as copying exactly what I just did. Now we'll head back to our code, download our new file and open it in our browser.

As I scroll down the page, the typography acts as a perfect window to our AI video. Then the text smoothly zooms past the camera, completely immersing us in the full screen cyberpunk city before dropping us perfectly into the company manifesto.

This is an incredibly premium motion graphic effect used by top design agencies. Claude code handled all the complex scroll math section transitions and animation logic for us in seconds.

That cinematic text reveal is perfect for a cinematic 2D website. But we're about to kick things up a dimension because for our third example, we're going to be creating a holographic 3D card that tilts with our cursor movement.

To make this look real, we need to generate three completely separate layers. But they all need to look like they were shot in the exact same environment.

This kind of strict continuity is exactly, exactly why we use JSON prompting. So first we'll head back to Higgs Field and generate the background layer using this prompt.

This result will work perfectly for a cyberpunk vibe, so we'll download it and save it under Background png.

Remember, our file names need to be exactly the same as what we reference in our CLAUDE code prompt later on.

But now that we have our background, it's time to generate our main character. By using this prompt to isolate our character on a bright green background, this generation will be perfect.

And if you're wondering why we need to have this background, it's so that we can easily run it through a free background remover.

So we'll just go to any background remover, upload our image, and download the final transparent character image and save it as Character png.

Now we've got our background and our character, but we're still missing the foreground effect. So, back in Higgs Field, we'll use this prompt to generate a subtle pink dust effect almost like tiny embers.

And the result looks perfect for a holographic card. So we'll download this final layer and save it as foreground PNG.

Now we have all three of our ingredients to make a 3D holographic card. Which means it's time to head back to Claude code and upload each of our images for our prompt.

We're aiming for a web dashboard with our 3D card featured in the center. All that's left is to click run.

And after downloading the new file in our GitHub repository and opening it in our browser, this is the final result.

A complete web dashboard with a holographic 3D card that interacts with our cursor movement exactly like we wanted.

The layers shift independently, making her literally pop out of a physical trading card surrounded by her live stats and social links.

It is an incredibly complex task, yet CLAUDE code handled everything perfectly. Now, those are three insane web experiences.

But I've actually saved the best for last. Because for our last example, we're going to be recreating a scroll driven frame animation that's used by premium brands like Apple.

Normally, this requires a team of 3D animators rendering hundreds of individual frames. Today we're doing it with nothing but nanobanana2 and Claude Code.

So first we'll use this prompt to generate an image of a premium high tech drone, and this one came out perfectly.

So we'll click Reference to use it as a reference image. To create create a deconstructed version of the exact same drone.

We'll use the same prompt as before, but we'll switch out the subject line to describe the deconstructed version of the drone.

And the result speaks for itself. Now that we have the intact drone and the perfectly matched deconstructed view, it's time to generate the video between these two frames.

So we'll hover over video, select cling 3.0 and then upload both of our frames. We'll enter this video prompt for a smooth and seamless transition between frames.

Then we'll turn off prompt, enhance. Make sure cling 3.0 is selected. Our quality is on 1080p and our duration is set to 5 seconds.

Now we'll right click it and copy the direct video address. Then we'll head back to Claude Code, where we'll be aiming to build an entire fully functional product landing page around this animation.

But here's the secret to making it look like a high end Apple site. If you just tell Claude Code to extract frames from a video file directly while you scroll, it gets incredibly jagged and skips frames to make it buttery smooth.

We have to tell Claude to build a frame preloading engine. So we'll enter this prompt and paste in our video address that we just copied.

And this is the final result. We have a beautiful fully built product website. And as I scroll down past the HERO text, the page locks into place and the drone physically explodes into pieces right before my eyes with absolutely zero lag.

As it breaks apart, sleek text cards fade in to highlight the specific components. When I keep scrolling, it unlocks and drops me smoothly into the technical specs section at the bottom.

This is the exact same high end tech Apple uses on their product pages. And Claude Code built the entire website for us in less than three minutes using just a URL.

If you tried to hire a studio to build these four interactive projects, it would easily cost you over ten grand.

We just built an entire creative agency workflow for pennies, and the only platforms we used were Higgs Field and Claude Code.

So now you know how to use Claude Code and Nanobanana2 to create insane AI animations and motion graphics for any project you're working on.

But what if you want to use NANOBANANA 2 and CLING 3.0 to focus solely on creating incredible animated stories?

Well, it's actually a lot easier than you may think. So if you want to create movie like animations, then click the video on screen.