---
title: "Design an Animated Website Hero with AI - Claude & Higgsfield"
source_url: https://youtu.be/SLnGJ9iezYo
captured_at: 2026-07-05
author: "Ruben Stom"
contributor: "ชิดชนก"
platform: youtube
---
# Design an Animated Website Hero with AI - Claude & Higgsfield

youtube video by **Ruben Stom**, 7m05s, uploaded 2026-05-16. URL: https://youtu.be/SLnGJ9iezYo

## Shared in LINE Note+
- 2026-07-05 16:42 by ชิดชนก

## Description
In this video, I build a fully animated hero banner with Claude Code — without writing a single line of code myself — in under thirty minutes. The background is a looping video, and as you move your cursor across the room, a soft spotlight follows it and reveals the same scene with the lights on, like a flashlight passing over the interior. Flip the on/off switch and the whole room lights up, the fireplace keeps glowing, and the scene transitions from dark to fully lit.

I walk you through every step and the techniques behind it: sketching the concept in Figma, generating the interior scene and the seamless looping videos in Higgsfield, creating the symmetrical toggle assets, and the exact prompts I used in Claude Code to build the hero, the cursor spotlight, the on/off transition, and the loading animation. I also share why a five-minute Figma sketch saved me about half an hour of back-and-forth, and one small thing Claude added on its own that I didn't even prompt for.

⸻

📥 Free Download
All the prompts and the actual website files from this video are available as a free download via this link:
Link: 

🔗 Link Mentioned
The free style prompts I use to keep a consistent look acros