⏱️ 10 minutes · 🎯 Beginner
🔗 Tools You'll Need
Google Whisk · Google Veo · EZGif · Cursor AI
The Full Walkthrough
Step 1: Create Your Animation Frames
Go to Google Whisk and use this prompt to generate a start and end frame:
Ultra-premium product photography of wireless headphones, matte black finish with brushed aluminum accents, soft ambient lighting from top-left, floating on matte black surface. Deep black background with subtle gradient, studio lighting, hyper-realistic 3D render, shallow depth of field, 4k cinematic quality, no text, no logos, luxury tech aesthetic, sharp focus on product, modern minimalist composition.
What you're doing: Creating two images. One showing the headphones intact, and another showing an "exploded view" with all the components separated (drivers, battery, ear cushions, circuit board floating apart). This gives Veo something to animate between.
Step 2: Animate Your Frames
Open Google Veo, select "Frames to Video", and upload both images.
Veo will create a smooth animation that morphs between your start and end states. This is where the magic happens. AI fills in all the in-between motion.
Step 3: Turn Video Into Scroll Frames
Go to EZGif, upload your video, and set the frame rate to 30fps.
This splits your video into individual images (usually around 240 frames depending on your video length). Each frame becomes one "step" in your scroll animation.
Download them as a zip file.
Step 4: Drop It Into Your Project
Unzip the frames and drop the entire folder into your code project. If you're using Next.js, put them in your public/frames folder or wherever you're storing assets.
Step 5: Build the Scroll Effect in Cursor
Open Cursor AI and paste this prompt into Agent mode:
ACT AS:
A world-class Creative Developer (Awwwards-level) specializing in Next.js, Framer Motion, and scroll-based animations.
THE TASK:
Build a high-end "Scrollytelling" landing page for fictional premium wireless headphones called "SonicWave Pro".
The core mechanic is a scroll-linked animation that plays an image sequence of headphones "exploding" (disassembling into components) as the user scrolls down.
TECH STACK:
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Animation: Framer Motion
- Rendering: HTML5 Canvas (for performance)
VISUAL DIRECTION & COLOR:
- Seamless Blending: The background of the website MUST match the background color of the image sequence exactly so the image edges are invisible. Use an eyedropper on the images to get the exact hex.
- Color Palette: Pure Dark Mode. Use '#050505' or match the image background as the page background. Text should be 'text-white/90' for headings and 'text-white/60' for body.
- Typography: Inter or SF Pro. Clean, tracking-tight, minimalist.
INTERACTION:
- As the user scrolls, the image sequence should scrub forward/backward frame-by-frame, synced to scroll position.
- Smooth, buttery 60fps performance.
- Add subtle parallax text overlays (e.g., "Sound Redefined", "SonicWave Pro") that fade in/out as the user scrolls.
STRUCTURE:
- Hero section with scroll prompt ("Scroll to Explore")
- Scroll-linked animation section (the image sequence)
- Footer with CTA
Use best practices for performance, accessibility, and responsive design.
Paste it in, hit enter, and Cursor will build the entire scroll component for you. Adjust the frame path in the code if needed, and you're done.
This tutorial is from The AI Surfer, a community of 900+ people learning to build with AI. Every month we run challenges like this with step-by-step guides.
See what we're building →What You Just Built
You just built a $5,000 scroll effect in 10 minutes.This is the exact same effect Apple uses on their websites. Agencies charge thousands for it. You did it in the time it takes to make coffee.
The 90/10 Pattern
AI handled the Canvas APIs, scroll calculations, frame rate optimization, and all the code you didn't want to write anyway.
You handled the vision. The product. The experience.
That's 90% AI, 10% human. And that pattern works for everything.
Join 900+ people learning to build like this →The AI Surfer
Learn to let AI handle the 90% so you can focus on what you love. The AI Surfer90% AI // 10% Human // 100% Your Zone of Genius