A-TIER skill
Claude — Here's how to build it in 10 minutes:
100k ft — What is this?
Claude — Here's how to build it in 10 minutes:
50k ft — Why care?
This is the exact scroll effect Apple uses on their product pages! — @theaisurfer; uses Claude, Cursor, Veo; demonstrates code generation.
10k ft — Key takeaways
(no takeaways yet)
5k ft — Tools & techniques
Claude, Cursor, Veo
code generation
1k ft — Deep-dive / try it
This is the exact scroll effect Apple uses on their product pages!
🔥 Comment 'SCROLL' for the full walkthrough + AI prompt
Here's how to build it in 10 minutes:
First go to Whisk and create start and end frames. Use a prompt that shows your product in two states - like headphones intact, then exploded view with all components floating apart.
Next open Google Veo, select frames to video, upload both images. The AI animates everything between your two frames automatically.
Now turn this into individual scroll frames. Go to EZGif, upload your video, set frame rate to 30fps. This converts your video into 240 separate images.
Download as a zip, drop into Cursor or Claude, then paste in the scroll animation prompt. The AI builds a buttery smooth scrolling effect where each frame plays as y…
Transcript excerpt
I just built the scroll animation that developers easily charge 5K for. First, go to whisk and create a start and end frame using a prompt like this. Then open Google Flow, select frames to video, upload both images and it animates everything in between. Next, we need to turn this video into individual frames so the animation plays as you scroll frame by frame. Go to easy give, upload the video, set the frame rate to 30 FPS, and it turns your video into 240 individual images. Download them as a zip, then drop that entire file into your favorite AI coding tool. Then paste in this prompt and watch the AI add a buttery smooth scrolling effect to your site. Comment, scroll, and I'll send you the exact prompt and full walkthrough.