← Back to Library

Claude Code + Nano Banana = Beautiful Animated Websites

", "text": "Most AI-generated websites look depressingly similar. The secret weapon to fix this? Animation.

Chase argues that adding motion to your landing page is one of the simplest high-leverage techniques available — dead simple to implement, but it gives your site a visual "wow factor" that 99% of AI-built sites simply lack.

The Image Generation Challenge

The first step requires creating a starting image inside Nano Banana Pro. This becomes both the opening frame for your video and the fallback image for mobile users who can't load video content.

When crafting prompts, consider feeding the AI reference images alongside text descriptions. MidJourney works well for finding style inspiration — you can search different art styles and adapt them to your vision. Pinterest is another solid option.

The key insight: don't create images in a vacuum. Before generating anything, have a clear mental picture of what your final landing page should look like. Browse Dribbble or Godly for landing page references, then use those as prompts for Nano Banana Pro. The more context you give the AI about your endgame vision, the better results you'll get.

Expect to iterate. Getting exactly what you want will likely take several tries.

Creating the Video

Once you have your image, turn it into video using Clling or VO — both accept a starting frame and can generate motion from it.

The prompt here is straightforward: keep it static with extremely slow, subtle movement. Less is more. If your animation steals attention from your actual content, it's tacky. The goal is tasteful accentuation, not spectacle.

On video length, there's an interesting debate:

A 15-second clip gives you maximum creative freedom but creates a visible "stutter" when it loops. A 5-second loop requires ffmpeg to reverse the second half and stitch it — technically elegant but constrains your creative options.

Critics might note that nobody sits on a hero section for 15 seconds. Users scroll within a few seconds. The longer video is simpler to implement, though arguably less practical for actual user behavior.

Building the Landing Page

After downloading both image and video, open Claude Code in a new project folder containing those assets.

The minimal prompt works like this: "I want to create a landing page for my AI agency. Use the MP4 file in the folder to create an animated hero section. Use the still image to replace the video for mobile users."

For more sophisticated results, use the UIUX Pro Max skill — it translates industry-specific design knowledge into appropriate website structures.

The most important tip: give Claude Code examples of websites you like. Screenshots work well. More context upfront means less iteration later and dramatically less generic output.

Deployment

To get your site live:

Push your code to GitHub (free, can be public or private). Then import the repository into Verscell — their generous free tier makes this accessible. Once deployed, you'll have a live URL you can edit later if you want a custom domain.

"This is where you give Claude Code your examples of websites you like... the more context you give it now, the less iteration you're going to have to do down the line."

Bottom Line

Chase's core argument is solid: animation is the simplest differentiator for AI-generated sites. The technique is genuinely accessible and delivers immediate visual impact.

The vulnerability? Practical usage patterns don't align with longer videos — users scroll quickly, making 15-second hero sections less realistic than they appear in tutorials. The shorter looping approach works better technically but constrains creative freedom. This tension between ideal process and actual user behavior is the most honest part of the piece.

Your number one goal when creating websites with AI has to be to defeat the AI slot monster and get away from the generic designs we see everywhere. And one of your most powerful weapons in this fight is by adding animation just like you see here. And I love this technique because it is dead simple to implement and it gives your web page a wow factor that 99% of AI generated websites simply don't have. And I love things that are both simple and high leverage.

So today I'm going to show you exactly how to do this yourself and I promise you can execute it whether you have a ton of experience with cloud code or none at all. So let's get into it. So the workflow here is pretty straightforward. First we're going to create a starting image inside of Nano Banana Pro.

This is going to be the starting frame for our video, but we will also need it when we talk about how this website is supposed to look for mobile users. Secondly, we take that image and we turn it into a video using something like Clling or VO. For step three, we spin up Cloud Code. We give it our video.

We give it our image, and we have it create our landing page. And for step four, I show you how to actually deploy this thing. We'll push our code to GitHub, and then we'll push it from GitHub to Verscell to actually get this on the internet for free. Now, all the image and video prompts and additional resources you see in today's video can be found inside of my Chase AI community.

This is a free community. There's a link to that in the description and you'll be able to find the prompt template so you can apply this to any image you want to create as well as the actual examples I used. Secondly, when it comes to cloud code, I just released a cloud code masterass inside of Chase AI plus. So if you want to go from zero to AI dev, that's how you can do it.

There's a link to that in the comments. So let's start with the image generation. First of all, I'm doing all this inside of Higsfield. So Nano Banana Pro, Clling Vo, I'm just doing it from this platform.

This ...