• AI MVP Weekly
  • Posts
  • I rebuilt a $5K scroll animation in 10 minutes (with AI)

I rebuilt a $5K scroll animation in 10 minutes (with AI)

This is the kind of scroll animation that instantly wows clients

Author

Prajwal Tomar
January 07, 2026

In partnership with

Hey,

I tried something fun this week.

I replicated a scroll animation that designers usually charge ~$5K for, using AI, in under 10 minutes. And yes, it actually looks good.

If you’d rather watch than read, I also uploaded a 5-minute YouTube video walking through the entire process step by step. You will find the video and all of the prompts attached at the end of this email.

What this animation actually is

This effect is called scrollytelling.

As you scroll, the image does not just sit there. It animates. In my case, an AI chip breaks apart into its 3D components as you scroll down the page.

This is the kind of interaction designers used to charge thousands for. You can now build it in minutes with the right AI workflow.

What this is NOT

This is not an AI video slapped into the hero section.

That approach usually lags, stutters, and feels cheap.

This is frame-by-frame animation. The browser swaps images based on scroll position, which is why it feels smooth and responsive.

Step 1: Create the start and end frames

I used Google Whisk for this.

I asked ChatGPT for a detailed prompt, pasted it into Whisk, and generated a clean AI chip image.

Then I asked for an exploded-view version of the same chip.

That gave me my two endpoints: start frame and end frame.

Step 2: Connect the frames with Google Flow

Next, I went to Google Flow and selected “frames to video.”

I uploaded the start frame and end frame.

Flow handled everything in between. Rotation, depth, motion, and transitions.

One prompt. Done.

How much could AI save your support team?

Peak season is here. Most retail and ecommerce teams face the same problem: volume spikes, but headcount doesn't.

Instead of hiring temporary staff or burning out your team, there’s a smarter move. Let AI handle the predictable stuff, like answering FAQs, routing tickets, and processing returns, so your people focus on what they do best: building loyalty.

Gladly’s ROI calculator shows exactly what this looks like for your business: how many tickets AI could resolve, how much that costs, and what that means for your bottom line. Real numbers. Your data.

Step 3: Convert the video into image frames

This is where most people get stuck.

I went to ezgif.com/video-to-jpg, uploaded the video, and set the frame rate to 30 FPS.

That gave me around 240 frames.

More frames = smoother scroll.

I downloaded the ZIP and moved on.

Step 4: Build it in Cursor

I set up a simple Next.js project.

Inside the public folder, I created a folder called sequence and dropped all 240 frames into it.

Then I prompted Cursor to build a sticky scroll component that maps scroll position to frame index.

That was it.

Why frame count matters

The first time I tried this, I only used 30 frames.

The animation felt choppy.

I switched to 240 frames, updated the prompt once, and the difference was night and day.

Buttery smooth. It honestly looks like a $10K landing page.

Why this actually matters

You do not have to ship boring, generic AI landing pages anymore.

If you show something like this to a client who paid $5K for an MVP, it creates instant trust and a real wow moment.

I am already integrating this into client projects going forward.

TLDR

  • Generate key frames in Google Whisk

  • Connect them using Google Flow

  • Extract frames with EzGIF at 30 FPS

  • Build the scroll component in Cursor

If you want to see it in action, watch the full 5-minute walkthrough here:

More workflows like this coming soon.

~ Prajwal