Faking 3D Animated Website Elements with AI Video and Green Screen Removal

This is a clever workaround for getting 3D-looking animated elements on a website without any actual 3D modeling. The technique chains together Nano Banana (image generation), VO3 (video generation), FFmpeg (green screen removal), and Claude Code (file conversion and embedding).

The Setup

The creator built the landing page for Cointally, a crypto tax calculation startup. The mascot is "Tallybot," a small animated robot that appears to be a 3D element on the site. In reality, it is an AI-generated video with a transparent background.

Landing page for Cointally showing the headline "3D Animated Websites with Claude Code" overlaid on the blurred website

Step-by-Step Process

Generate the character image. Start with Nano Banana Pro to generate the base image of the mascot. Combine it with your brand icon to create a branded version.

Close-up of the Cointally website showing the Tallybot mascot, a small blue robot character, alongside text about crypto tax calculation

Generate the animation. Bring the image into VO3 and generate a video. In this case, Tallybot spins a Bitcoin. The key step: make sure the background is solid green pixels so you can remove it later.

Remove the green screen. Use FFmpeg to strip all green pixels from the video, making the background transparent.

Convert and embed. Use Claude Code to convert the backgroundless video into all the necessary file formats for cross-browser compatibility on both mobile and desktop. Then embed it across the site.

Speaker explaining the video embedding process for the website

Why This Works

The result looks like a polished 3D animated element, but the entire pipeline uses image and video generation tools. No 3D modeling software, no animation rigging, no WebGL. Just an AI-generated video with the background removed.

Key Takeaways

AI-generated video with green screen removal can substitute for actual 3D animation on websites
The pipeline is: Nano Banana (image) to VO3 (video) to FFmpeg (transparent background) to Claude Code (format conversion and embedding)
FFmpeg handles the green screen removal; Claude Code handles cross-browser file format conversion
This technique gives a premium visual effect without 3D modeling expertise

Resources

Nano Banana -- AI image generation tool
FFmpeg -- Open-source tool for video processing and format conversion
Claude Code -- AI coding assistant used for file conversion and site embedding