How to Build Apple-Style 3D Scroll Animations with Claude Code and Nano Banana 2

You can build premium 3D scroll animations — the kind Apple uses on their AirPods pages — using AI, and it's way simpler than you think. The process combines Google's Nano Banana 2 for image generation, an AI video model like Kling 3.0 for the transition, and Claude Code to turn the whole thing into a buttery smooth scroll-driven frame animation. I've been testing this workflow and it immediately vaults any website above the generic AI slop you see everywhere. Here's exactly how to do it.

What Is a Scroll-Driven Frame Animation?

If you've ever visited Apple's product pages — like the AirPods Pro page — you've seen this effect. As you scroll down, a product appears to rotate, deconstruct, or transform in 3D space. It looks like a video playing as you scroll, but that's not actually what's happening.

A scroll-driven frame animation works like a digital flipbook. Instead of loading a video file, the website extracts every frame from a video and displays them individually as you scroll. Each scroll increment advances to the next frame, creating that smooth, cinematic feel.

Why a flipbook instead of a video? Performance. Loading a full video and trying to sync it to scroll position is janky and resource-heavy. By pre-loading individual frames in WEBP format (not JPEG — WEBP files are roughly 25-35% smaller), you get smooth playback without crushing your page speed. The frames are pre-loaded in the background, so by the time the user scrolls to the animation, everything's ready to go.

This is the technique that makes websites look like they cost $50,000 to build. And now you can do it with AI.

What Tools Do You Need for This Workflow?

Here's the full stack:

Nano Banana 2 — Google's latest image generation model (officially Gemini 3.1 Flash Image). This creates your start and end frames.
Kling 3.0 (or Veo 3.1) — AI video generation model that creates the transition video between your two frames.
Claude Code — Anthropic's agentic coding tool that takes your video and converts it into a scroll-driven frame animation on a fully built website.
FFmpeg — A free open-source tool that extracts individual frames from your video. Claude Code can install this for you if you don't have it.

I've been running all the image and video generation through Higgsfield, which is essentially a one-stop shop for AI content creation tools. They host Nano Banana 2, Kling 3.0, and other models in one place, and they've been running an unlimited sale on Nano Banana 2. But you can access these models through other platforms too.

How Do You Create the Start and End Frame Images?

This is where the creative work happens, and Nano Banana 2 makes it pretty painless.

Step 1: Generate Your Starting Image

Open Nano Banana 2 and make sure you're set to at least 2K quality. You're going for high-end product photography here — think crisp product on a clean background.

The prompt doesn't need to be complicated. You want something like a product shot floating on a solid background. The background color of your image MUST match the background color of your website section. This is critical. If your website section is black and your image background is white, you'll see the edges of the image and the whole illusion falls apart.

For example, with a keyboard product, the starting image is just the keyboard fully assembled, sitting on a white background. Clean, simple, premium-looking.

Step 2: Generate Your Ending Image

Here's where it gets interesting. You have a ton of creative options for what the ending frame looks like:

Deconstruction — The product explodes into its component parts (great for tech products like keyboards)
X-ray view — The product becomes transparent showing internal components (I totally lifted this idea from Apple's AirPods page, and it looks incredible)
Build from nothing — Start with a blank background and end with the finished product (great for architecture or design work)
Color/material transition — The product transforms from one material to another

Once you're happy with your starting image, download it. Then upload it as a reference image in Nano Banana 2 for your second prompt. Because you're providing the reference image, your second prompt can be relatively simple — the image itself does the heavy lifting.

For headphones, I wrote: "X-ray image of the headphones showing the component parts in great detail. Keep the all white background, no text." Nano Banana 2 gave me four outputs, and I picked the best one. Done.

How Do You Create the Transition Video?

Now you've got two images — a start frame and an end frame. Time to turn them into a video.

Head to Kling 3.0 (or Veo 3.1 — both work). The key feature you need is start frame and end frame input. Drop your starting image as the first frame, your ending image as the last frame, and write a simple prompt describing the transition.

For the headphones example, the prompt was: "Continuous transition where the headphones' outer shell gradually becomes transparent revealing the inner components, circuit boards, drivers, and wiring underneath."

A few rules here:

Keep the transition simple. Don't ask for crazy twisting or spinning. The smoother and more gradual the transition, the better it looks as a scroll animation. You want to preserve crispness.
Don't enhance the prompt if the tool offers that option. The AI prompt enhancer will add complexity you don't want.
If you're stuck on the prompt, drop both images into Claude and ask it to write a transition prompt for you. Works every time.

Generate the video, download the MP4, and you're ready for the build.

How Do You Build the Website with Claude Code?

This is where Claude Code earns its keep. You're going to give it three things:

The MP4 video file you just downloaded
A scroll animation best practices markdown file (available in my free community — this is the secret sauce that ensures performance)
Your instructions for what kind of website you want

The Claude Code Process

First, dump the MP4 file into your project directory. Then add the best practices markdown file. This file tells Claude Code exactly how to implement the scroll animation for maximum performance — including frame extraction with FFmpeg, WEBP conversion, pre-loading strategy, and the actual scroll-driven animation code.

Turn on plan mode in Claude Code. Then tell it what you're building. For my demo, I literally just turned on voice input and brain-dumped: "Hey, I want a keyboard product landing page. I don't want it to look like AI slop. Take a look at the MD file, take a look at the MP4, and I want to do the scroll animation. Also ask me any questions."

Claude Code asked me about tech stack (Next.js + Tailwind), product name (it made up "Void MK1" — it loves the word "void" for some reason), and page sections (hero, scroll animation, CTA).

Then it went to work. Claude Code handles the entire technical implementation: extracting ~180 frames from the video using FFmpeg, converting them to WEBP, setting up the pre-loading logic, building the scroll listener, and creating the full website around it.

First Pass Results

The first pass was honestly pretty solid. The scroll animation worked smoothly. A few things I'd tweak:

Scroll speed was too slow — took about 8 heavy scrolls to get through the animation. Easy fix: tell Claude Code to make it scroll faster.
Info cards needed more weight — they were too thin and could use drop shadows. Another easy prompt.
Image sizing — at 1080p on a large monitor, the animation wasn't as crisp as it could be. You can either upscale the video before frame extraction or have Claude Code constrain the display size.

But the base was there. One prompt got me a working scroll-driven frame animation on a product landing page. The iteration from there is just polish.

What About Making the Rest of the Website Look Good?

The scroll animation is the hero piece, but the rest of the site matters too. If you want to get away from AI slop design, you need to bring Claude Code real design inspiration.

Some places to find that inspiration:

Godly.website — curated gallery of well-designed sites
Dribbble — design community with tons of landing page examples
Perplexity or Claude — literally ask "what are some cool product landing page designs I should get inspiration from?"

Take screenshots of designs you like and drop them into Claude Code as context. Or find specific CSS styles you want to reference. The more visual context you give Claude Code, the better the output.

One more design tip: you don't have to make the entire page one color. The scroll animation section needs a matching background, but your hero section and other sections can use completely different color schemes. Most premium websites break up sections with contrasting backgrounds anyway.

How Does Performance Hold Up with 180+ Frames?

This is the question everyone asks. Loading 180 individual images sounds like a performance nightmare. But the best practices file handles this with a few key techniques:

WEBP format instead of JPEG reduces file sizes by roughly 25-35%
Frame pre-loading starts loading images before the user reaches the animation section
Sequential loading prioritizes the first frames and loads the rest progressively
Canvas rendering draws frames to an HTML canvas element instead of swapping image tags

The result is what I'd call buttery smooth performance. Not perfect on every device — you might see a hiccup on older phones if you scroll aggressively — but for the vast majority of users, it feels like magic.

Is This Technique Only for Product Pages?

Not even close. I've tested this with:

Architectural designs — starting from a white background, building up to a completed structure as you scroll
Headphones — the X-ray effect I mentioned, directly inspired by Apple
Keyboards — deconstruction animation showing all the component parts

Anything that benefits from a visual transformation works. Think SaaS dashboards that build up feature by feature, fashion items that show construction details, automotive designs, food products revealing ingredients — the creative space is wide open.

Frequently Asked Questions

Do I need coding experience to build this?

No. Claude Code handles all the technical implementation. You need to provide the video file and describe what you want. If you don't have FFmpeg installed, Claude Code will install it for you via the command line. The hardest part is generating good images in Nano Banana 2, and that's just prompt writing.

How much does this cost?

Nano Banana 2 and Kling 3.0 are available through Higgsfield, which runs various pricing tiers and sales. Claude Code requires an Anthropic subscription ($20-$200/month depending on usage). FFmpeg is free. So your total cost is whatever you're already paying for AI tools plus video generation credits.

Can I use a different video model instead of Kling 3.0?

Yes. Veo 3.1 (Google's video generation model) works well too. The key requirement is that the model supports start frame and end frame inputs so you can control the transition between your two Nano Banana 2 images. Any model with that feature will work.

What resolution should my video be?

Kling 3.0 outputs at 1080p by default, which works fine for most screen sizes. If you're building for large desktop displays, consider upscaling the video before extracting frames, or constrain the animation display area so the frames stay crisp. For mobile, 1080p is more than enough.

How long does the whole process take?

Once you know the workflow, maybe 30-45 minutes from start to finish. Image generation in Nano Banana 2 takes a minute or two per image. Video generation in Kling 3.0 takes a few minutes. Claude Code builds the site in 5-10 minutes. Most of your time goes into iterating on the design and picking images you like.

If you want to go deeper into building premium websites with AI, join the free Chase AI community for templates, prompts, and live breakdowns. And if you're serious about building with AI, check out the paid community, Chase AI+, for hands-on guidance on how to make money with AI.

Claude Code + Nano Banana 2: Build 3D Scroll Websites