Your Website Deserves a Personal Touch 🎨

Generated websites are boring and look the same. Always the same purple gradients and old-fashioned icons.

You've seen them a thousand times. They feel temporary. They feel cheap.

But custom, tailored graphics? That's memorable. That strengthens your brand.

I spent way too long figuring out how to create animated assets that actually feel like me—not just generic stock art—and getting them to work seamlessly on the web. The process was messy. Most tutorials are outdated. AI tools kept changing.

So I documented everything.

The Tools You'll Need

Nothing expensive. Nothing complicated.

• Nano Banana (Google's Gemini image model) — for generating images
• Google Veo 3.1 or Adobe Firefly (firefly.adobe.com) — for animation
• CapCut — for background removal (free!)
• Claude Code — for format conversion

Cost Breakdown:

• Claude Code: $20/month subscription (if you don't have it, you definitely should).
• Video Generation: Google Pro account for Veo, or use Firefly's freemium tier.
• Total: Free to start, or ~$20/month for the professional workflow mentioned here.

High Level Flow

Step 1: Generate Your Image with AI 🖼️

Here's the trick most people miss: start with a green background.

Not white. Not transparent. Bright, solid green (#00FF00).

Why? Because removing a solid green background (chroma keying) gives way cleaner results than AI background removal. It's the same technique Hollywood uses.

Your prompt should look something like this:

[Describe your character/object here],
solid bright green background (#00FF00),
centered composition, high contrast,
no shadows on background

Keep your subject centered with clear edges. The cleaner your source image, the easier everything else becomes.

Step 2: Bring It to Life ✨

Take your green-background image to Google Veo 3.1.

Upload it. Describe the motion you want. Keep it simple.

Animate this character with a gentle waving motion,
keep the solid green background intact,
smooth looping animation, 4 seconds

The key detail: tell Veo to keep the green background solid. If it starts adding shadows or gradients, your chroma key will struggle later.

Step 3: Remove the Background 🎬

This is where most tutorials fail you.

Import your video into CapCut. Now here's the critical part:

Use Chroma Key, NOT AI Remove BG.

The AI removal tool is tempting — it's one click! But it produces fuzzy edges and artifacts. Chroma key with a solid green background gives you crisp, clean extraction every time.

The process:

1. Import your video to CapCut
2. Select the video clip
3. Go to Video → Cutout → Chroma Key
4. Use the color picker to select the green
5. Adjust intensity until edges are clean
6. Preview. Tweak. Repeat.

Step 4: Convert for the Web 🌐

Here's the annoying truth: browsers are picky about video formats.

You need two versions of your animation:

| Format | Browser Support | |--------|-----------------| | WebM (VP9 with alpha) | Chrome, Firefox, Edge | | MP4 (HEVC with alpha) | Safari, iOS |

This is where Claude Code saves hours of headaches. Just ask:

Convert my video WIP/mascot.mov to web-optimized formats:
1. WebM (VP9 with alpha) for Chrome/Firefox
2. MP4 (HEVC with alpha) for Safari/iOS
Scale to 480p and compress for small file size

Claude handles all the FFmpeg complexity. No memorizing arcane command flags.

Put It On Your Site

The HTML is straightforward. List both sources — browsers pick the first format they understand:

<video autoPlay loop muted playsInline>
  <source src="/videos/mascot.mp4" type='video/mp4; codecs="hvc1"' />
  <source src="/videos/mascot.webm" type="video/webm" />
</video>

HEVC comes first because Safari needs the specific codec hint. WebM handles everyone else.

Quick Troubleshooting

Green edges on your character? → Adjust chroma key intensity in CapCut. Sometimes you need to expand the color range slightly.

Safari not playing? → Check your HEVC codec string. It must be codecs="hvc1", not just type="video/mp4".

Files too large? → Reduce to 480p. Shorten the animation. Drop to 24fps. Simple movements compress better.

The Bottom Line

Four steps. That's it.

1. Generate your image with a green background
2. Animate it with Veo 3.1
3. Remove the background with CapCut's chroma key
4. Convert to web formats with Claude

Start small. A simple logo animation. A tiny mascot that waves.

Each project teaches you something. And once you nail the workflow, you'll find excuses to add animations everywhere.

Your website will thank you.