AI-First
Claude Code + Nano Banana 2 + FireCrawl: the trio for building animated websites that sell for thousands of euros
- 🔑 The trio of Claude Code + Nano Banana 2 + FireCrawl lets you produce animated websites that sell for thousands of euros, without writing code.
- 🎯 FireCrawl scrapes 5 competitors and generates a full strategic report: color palettes, page structure, SEO keywords, trust signals.
- 💡 Nano Banana 2 creates photorealistic scroll-driven before/after animations, like a dirty pool turning spotless in 5 seconds.
- 🚀 The UI/UX Pro audit skill automatically applies 15 WCAG accessibility fixes and 8 SEO improvements with zero manual intervention.
- ⚠️ The real value is not the website itself but the Notion-based client feedback system that keeps clients coming back long-term.
FireCrawl analyzes the top 5 competitors in any industry and generates a full report in seconds
Nano Banana 2 generates photorealistic 3D animations you can embed directly into the website code
The scroll animation (dirty pool → clean pool): an effect you can charge 2,000 to 5,000 euros for, built in 20 minutes
Notion + Claude Code = a fully automated client feedback management system
The entire workflow requires zero coding experience; Claude handles all of the development
Building animated websites that sell for thousands of euros: that is exactly what the combination of Claude Code + Nano Banana 2 + FireCrawl now makes possible. I followed this method from start to finish. Here is what I found, what surprised me, and how to reproduce the result from scratch.
The idea: instead of hand-coding animations, you drive Claude Code with pre-built skills. Claude handles the development. Nano Banana 2 generates the 3D visuals. FireCrawl provides the market intelligence. The result is a professional, SEO-optimized website with a scroll animation that would normally cost a fortune to build from scratch.
FireCrawl: market intelligence in 30 seconds
Before building a single HTML file, the method starts with research. FireCrawl is an API that scrapes the top websites in a given industry and synthesizes what works.
In practice: you give Claude Code an industry (example: pool cleaning in Texas) and a reference URL (diamondpools.com in the tutorial). FireCrawl identifies the 5 top-ranking competitors on Google, scrapes their content, and generates a structured report that includes:
the color palettes used by each competitor
their page structure and trust signals
the SEO keywords they target and the gaps you can exploit
what all the market leaders have in common
a recommended site structure based on what converts
You can send this report to a client before you even start building. It is free strategic consulting, delivered automatically, and it immediately justifies your price.
FireCrawl is free to start. You can grab an API key in seconds from their website. Once you hand it to Claude, everything runs with no further intervention.
The base website: SEO-first, intelligence-driven structure
Once the report is generated, Claude Code builds the site. Not a generic template, but a website structured around the data collected: the sections that convert in this market, the keywords that rank, the trust signals that reduce friction.
The prompt is simple: build the site and leave a placeholder for the scroll animation. Claude handles the HTML, CSS, and JavaScript. The result after the first generation is already presentable: hero section, services, gallery, testimonials, contact form.
What stands out: Claude pulls reviews directly from the scraped reference site. The reviews that appear on the website are real, drawn from Google data retrieved by FireCrawl. Nothing is fabricated.
Nano Banana 2: the animation that changes everything
This is where the project gets really interesting. Nano Banana 2, Google's image generation model (gemini-3.1-flash-image-preview), creates 3D visual assets with photographic consistency. Paired with a video generator like Kling, you get a smooth transition animation between two states.
In the tutorial example: a dirty pool transforms into a spotless one as you scroll down the page. The animation lasts 5 seconds. The effect is immediate and memorable.
The workflow for creating this animation:
The 3D Website Asset Generator skill produces 3 optimized prompts: initial state (dirty pool), final state (clean pool), video transition
You generate both images on Kling (or Higgsfield) with Nano Banana 2 as the model, white background for a clean integration into the site
You generate the transition video with the provided prompt, 5 seconds, 1080p is enough
You hand the video to Claude Code with the 3D Website Builder skill: it integrates the scroll animation automatically
The scroll effect: the hero background turns white, and the video plays in sync with the scrolling. The further you scroll, the cleaner the pool gets. This is the kind of interaction you see on Awwwards-winning sites that cost 100,000 euros.
What you can do with this technique goes far beyond pools. Any before/after transformation is an opportunity: interior renovation, physical transformation, product evolution, construction progress. The principle is always the same.
Industry | Possible animation | Perceived value |
|---|---|---|
Pools / landscaping | Before treatment → after treatment | Very high |
Interior renovation | Worn-out room → renovated room | Very high |
Fitness / coaching | Before silhouette → after program | High |
Real estate | Empty property → furnished/staged property | High |
Automotive | Wrecked car → restored car | High |
Product e-commerce | Raw product → finished/packaged product | Medium |
The automatic SEO and accessibility audit
Once the site is built and the animation is integrated, Claude Code runs a third skill: the UI/UX Pro audit. This tool tests the site against hundreds of criteria: WCAG accessibility, meta tags, alt attributes, contrast, mobile touch targets, header structure.
The results on the test site: 15 accessibility fixes applied automatically, 8 SEO improvements, form and touch interaction optimizations. All of that without a single line written by hand.
What this means in practice: the site is technically correct from day one. No need for an external audit to validate it before delivery.
Managing client feedback without email, without Slack
The last piece of the system is often the most underestimated: how the client communicates changes after delivery. The solution proposed in this method is a change request form built directly into the site, connected to a Notion database.
The client gets a clear interface: request type (bug fix, text adjustment, new feature), description, priority. Everything lands in a Notion board that you or Claude check daily.
Claude Code can then be configured to process simple requests automatically (text corrections) and only alert you for structural changes. It is a ticketing system disguised as a premium client portal.
The value is not in the website. It is in the system around it. A client who can report a bug without sending a WhatsApp at 11 p.m. is a relationship that lasts.
What it actually costs
FireCrawl: free to start (Free plan available). Nano Banana 2 via Kling or Higgsfield: a few credits, under 5 euros for a 1080p video. Claude Code: Max or Pro subscription. Anti-Gravity (the IDE used in the tutorial): free.
Total cost to produce a website with scroll animation, competitive report, and client portal: under 10 euros in variable costs. The site can sell for 2,000 to 8,000 euros depending on the industry and client. The margin is structurally very high.
This workflow does not replace a design studio doing fully custom work at 50,000 euros. It lets you deliver websites that look like they cost 8,000 euros for a marginal cost close to zero. It is a repositioning play, not a price war.
What comes next
This tutorial covers creation. Hosting, deployment, pushing to production on a client domain: that is the next step. Vercel, Netlify, or a simple VPS depending on the needs. Claude Code handles that part too with the right prompts.
The real skill here is not technical. It is the ability to pick the right industries, identify clients who understand the value of an animated website, and package the whole thing into a clear offer. The workflow takes care of the rest.
Nano Banana 2 + Claude Code + FireCrawl: this is not a shortcut for building average websites faster. It is a new level of quality, accessible without any training in development.