How I Build & Sell Animated Sites That Look Stunning & Rank #1 (Claude Code & Google Stitch)
🚀 Join the AI Ranking community (onboarding call + 2 weekly live Q&As) 👉 https://skool.com/ai-ranking 🎁 FREE: AI Search Starter Kit 👉 https://www.airankingskool.com/you-came-here-from-socials Build a premium scroll-animated product website with Claude Code, Google Stitch, Nano Banana Pro, and fal.ai, and make it actually rank on Google and AI search engines. In this tutorial I walk through the exact tools, prompts, and SEO steps I use to ship sites that are sellable, not just pretty. 📄 THE COPY-PASTE PROMPT + full tutorial (dependencies, install commands, Claude Code prompt, GSAP timeline code): 👉 https://docs.google.com/document/d/1NWib3RKLRk6HU7SLD5kY1D70_Aak1AMmv15zwunhz2A/edit?usp=sharing 🔗 LIVE DEMO (staging site built in this video): 👉 https://bruns-staging.pages.dev/ 🎬 WATCH NEXT — Build an Astro website with Claude Code (pure SEO focus): 👉 https://www.youtube.com/watch?v=kHAJtgciFi4 🛠 TOOLS USED • Claude Code → https://claude.com/claude-code • Astro → https://astro.build (repo: https://github.com/withastro/astro) • GSAP + ScrollTrigger → https://gsap.com (repo: https://github.com/greensock/GSAP) • Google Stitch (free design system) → https://stitch.withgoogle.com • Nano Banana Pro via Google AI Studio → https://aistudio.google.com • fal.ai (Seedance / Veo 3.1 video generation) → https://fal.ai • FFmpeg (frame extraction) → https://ffmpeg.org • Cloudflare Pages + Wrangler → https://pages.cloudflare.com ⏱ CHAPTERS 00:00 The finished scroll-animated site 00:47 The tools you need (Astro, Claude Code, Stitch, fal.ai, GSAP) 02:10 Generating the product images with Nano Banana Pro 04:45 Image-to-video: Seedance vs Cling on fal.ai 07:35 Frame extraction + designing with Google Stitch 11:55 The Claude Code prompt that builds the whole site 15:30 Adding SEO: schema, title tags, LSI keywords 18:15 Cloudflare staging deploy + speed & mobile checks #ClaudeCode #AISEO #WebDesign #Astro #GSAP
