Heidelberg AICurriculum

Claude Code + Nano Banana 2 + Kling = $15K Animated Sites

Nick Saraev ·2026-03-16 ·2 min read

Summary written by us from the video's transcript. The video, and everything in it, is Nick Saraev's work.

Learn how to create high‑end animated landing pages in minutes using Claude Code, Nano Banana, and Kling 3.0 with just a few prompts and under $5 in token costs.

Takeaways

  • A complete high‑quality animated site can be built in under 15 minutes using three AI tools—Claude Code, Nano Banana (for image generation), and Kling 3.0—for roughly $5 total cost.
  • The pre‑made “skill” repository encodes design best practices, allowing a one‑shot prompt to output clean HTML/CSS with luxury spacing and typography.
  • Kling 3.0 can produce 1080p 5‑second videos for under $0.40 per run; generating several versions lets you pick the optimal animation.
  • Performance is improved by converting video frames into optimized JPEGs tied to scroll position, dramatically shrinking file size (e.g., from >5 MB to <300 KB).
  • Deploying on Netlify’s free plan provides global CDN caching and instant live URLs without additional hosting fees.

Three‑step workflow overview

The process consists of (1) feeding bullet‑point prompts into **Claude Code** to generate site layout and design using a pre‑built “skill” repository, (2) creating 3D or exploding‑view videos with the **Kling 3.0** model accessed via **Higgsfield**, and (3) stitching the assets together in Claude Code and deploying the result.

The skill repository—shared by a 16‑year‑old on Twitter—encodes high‑end design rules such as spacing, luxury aesthetics, and responsive typography, allowing a one‑shot generation of a complete site.

Setting up the environment

You need Claude Code running in an IDE; the author uses **Antigravity**, which can be installed via a linked guide. Once Antigravity is ready, you paste the skill URL and issue a natural‑language command like “Use this skill to design a high‑end website about interior design.”

Claude Code fetches the skill, then spends roughly two minutes producing the full HTML/CSS/JS scaffold for the site.

Generating 3D video assets with Kling 3.0

Through Higgsfield you prompt Kling 3.0, e.g., “Generate a high‑quality 3D render style video of panning through a 3D interior design scene, white background, 1080p, 5 seconds, 16:9.” The model consumes about 7.5 credits (≈$0.36) per run; running it two or three times lets you pick the best output.

The author also creates rotating globes and exploding‑view animations by describing the desired motion (“globe rotating, center of mass fixed”) and feeds the resulting MP4 into the site as a hero background or scroll‑triggered element.

Integrating videos and fixing performance

After downloading the MP4, you tell Claude Code to set it as the hero header background, centre it, and apply an inward‑masking gradient so text remains readable. For scroll‑based sections, you request “a scroll animation underneath the hero header that reveals frames of the exploding view while scrolling.”

If the animation feels choppy, you ask Claude Code to extract frames as optimized JPEGs, tie each frame to a scroll position, and add preloading—this reduces file size dramatically (e.g., from 5.3 MB to 252 KB) and smooths playback.

Deploying for free

The final step is a single command: “Make it live on Netlify.” Netlify’s free tier provides global CDN caching, unlimited deploy previews, and a 300‑credit monthly limit, making the site instantly accessible at a URL such as atelieramerin.netlify.app.

Mobile optimization follows the same pattern—issue a prompt like “mobile optimize the site” multiple times and Claude Code will adjust breakpoints automatically.

Cost breakdown and practical tips

Typical token spend: ~2–3 USD for Claude Code prompts, ~0.36 USD per Kling video (run 2‑3 times), plus about $1 for cloud‑code usage—total under $5 for a fully animated landing page.

Key practical advice: generate multiple video variants to choose the best, use gradient masks to keep text legible, and let Claude Code replace heavy video with frame‑by‑frame JPEG sequences for smoother scrolling.