NanoBanana
Build Premium 3D Scroll Animation for a Landing Page
Create a high‑quality, scroll‑driven 3D animation for your product landing page that looks like a custom Apple‑style showcase, without writing code manually.
The Workflow
10 steps · click a step number to mark it done
Open NanoBanana and have it ready before you start
Write a concise prompt describing the starting product image (e.g., a keyboard on a plain background) and set Nano Banana 2 to 2K quality
Generate the starting image in Surfsense and download the 2K PNG
Create a second prompt that references the first image and describes the deconstructed or X‑ray version, then generate the ending image in Nano Banana 2
Upload both images to Cling 3.0 (or any AI video model) as start‑frame and end‑frame, add a short transition prompt, and generate the MP4 video
Download the resulting MP4 file and rename it (e.g., scroll‑animation.mp4)
Claude Code
Send the MP4 and the scroll‑animation best‑practice markdown to Claude Code
Ask Claude Code to convert the video into a flip‑book: extract frames with FFmpeg, compress to WebP, and create a pre‑load script for smooth scrolling
In Surfsense Cloud Code, import the generated WebP frames, add the scroll‑driven JavaScript snippet, and integrate the animation into your landing page layout
Preview the page, verify buttery‑smooth scroll performance, then publish the website
Optional: Tweak the prompt or frame count to adjust animation speed and re‑run steps 2‑7 for faster iteration