Avail.video
Avail.video · Watched for you · 7:10 video · 1 min read

How to Build an Interactive AI Hero Section with Claude Code

Outlier score2.7×Above typical

9,643 views vs a median of 3,567 across the channel's last 15 long-form uploads · as of Oct 28

Avail.video calculation

Ruben Stom demonstrates how to design and build an interactive 3D field flight hero section using Figma, Claude Code, and AI-generated imagery. He details the design tokens, photography generation workflow, foundational prompting techniques, opening animation sequencing, and mobile responsiveness.

Read the teardown

How it earns the click and holds attention, second by second.

4chapters11on-screen captures1people1named frameworks7claims and stats10references in all
Source: Claude Code for Animated Hero Design · Ruben Stom
Find in this video

Search what was said and shown

One search covers the transcript, on-screen text, claims and references. Every result jumps to its moment.

    The explainer

    What the video says, with a link to every moment

    A 1-minute read. Each underlined phrase opens the video at that second.

    Creating a dynamic web interface begins with a clear design foundation. In this walkthrough, designer Ruben Stom demonstrates how to construct a 3D field flight hero section where floating cards follow the user's mouse and retreat into the distance. Instead of jumping straight into code, he begins by designing in Figma0:43 to establish design tokens, prepare reference mockups for AI prompts, and prevent mid-build design revisions. The layout uses a near-black `#181818` background, uppercase headings set in Tenor Sans typography1:46 with 50% letter-spacing, a subtle gradient wordmark from pure white to soft gray, and Newsreader serif body text.

    slide
    ONE GRADIENT, REUSEDThe same white-to-grey runs through the icons in the top right and the menu items — which is makes the responsive design feel intentional rather than adapted.#FFFFFF #999999
    ▶ 1:42
    On screen at 1:42

    To populate the 3D space, visual consistency is paramount. Starting with a single reference photograph from his site AI Playfield, Ruben prompts Claude to write photoshoot prompts3:40 specifying the exact subject, lighting, and wardrobe with varied framings. These prompts are fed into Higgsfield using Nano Banana3:50 at 1:1 aspect ratio in 2K resolution, with the original reference image uploaded alongside each generation to maintain aesthetic coherence.

    Moving to code execution, Ruben initializes the repository and configures Claude Code with Opus 55:04. His initial prompt details the layout hierarchy, design tokens, and the mechanics of the 3D field flight animation5:48. The effect operates with eight image cards traveling backward into depth along an elliptical perimeter, leaving the central copy legible. Ruben also defines mouse parallax dynamics7:04, ordering foreground cards to move approximately 200 pixels across a window sweep while background elements move only 60 pixels. When Claude initially blurs the whole screen and attaches parallax to the text, a concise follow-up prompt7:10 corrects both errors.

    code
    03 Mobile — responsive promptNavigationField FlightMobile Menu
    ▶ 5:51
    On screen at 5:51

    To polish the user experience, Ruben introduces a staggered opening intro sequence7:10 where the wordmark reveals letter by letter, followed by the flight animation and interface navigation. He finalizes the site by implementing mobile responsiveness7:10, compressing the navigation into a frosted-glass overlay drawer and stretching the flight ring into a vertical ellipse to maintain breathing room on narrow viewports.

    Highlights
    1. 0:04Demo of interactive hero
    Chapters across the 7:10 runtime

    Ruben introduces the interactive 3D hero section with mouse-tracking field flight animation and mobile responsiveness.

    0:000:42
    • 0:04MomentDemo of interactive hero
    How it's told

    A step-by-step workflow tutorial with code demos

    Format: Tutorial. The creator demonstrates designing an interactive hero in Figma, generating image assets with AI, and prompting Claude Code step-by-step to build a responsive site. He tests initial generations, debugs animation flaws, and finishes by sharing the downloadable project files.

    Story arc

    1. 0:00IntroductionRuben previews the interactive 'FETCHED' field flight hero section and explains the responsive animation goals.
    2. 0:41The Design ConceptDesigning layout, typography, tokens, colors, and gradients upfront in Figma before writing any code.
    3. 1:51Creating the VisualsCreating consistent photoshoot prompts in Claude and generating visual assets with Higgsfield.
    4. 2:45The FoundationSetting up project folders and feeding the detailed foundational prompt into Claude Code.
    5. 5:15The Opening AnimationCrafting a sequential, staged entrance animation for the wordmark text and visual cards.
    6. 5:41Mobile FriendlyTuning responsive breakpoint behavior, vertical field geometry, and the full-screen frosted glass menu.
    7. 6:24Final Showcase & OutroDemonstrating the finished interactive site and providing the downloadable project assets.

    Setups and payoffs

    1. 0:38Setup Ruben promises a free gift of all project files and prompts at the end of the video.
      ↳
      6:47Payoff He announces the free download link containing prompts, assets, and website files in the description.
    2. 0:48Setup Setting up reference images and design tokens in Figma first to guide code prompts.
      ↳
      3:19Payoff Using the Figma reference images and hex color tokens directly inside the foundational Claude Code prompt.
    3. 4:45Setup Encountering a full-layer blur filter and unwanted parallax bugs across text in Claude's initial build.
      ↳
      5:09Payoff Successfully resolving both the blur and parallax issues with a single corrective follow-up prompt.

    Devices

    • Screen split / dual panel walkthroughPairing prompt text specifications on the left with real-time UI render results on the right.3:195:275:51
    • Real-time debugging demoShowing Claude's flawed initial attempt and the quick corrective prompt used to solve it.4:455:09

    From the video's own structure, matched to the transcript and on-screen text.

    Teardown

    A high-end visual hook in the first five seconds proves immediate technical capability, keeping viewers locked through a modular, step-by-step AI implementation.

    Above the channel's typical: 2.7× its typical views (9,643 vs a median of 3,567 across the channel's last 15 long-form uploads, as of Oct 28) · Long-form tutorial · 59 days old

    The promise

    Learn how to use Claude to generate code for a sleek, modern animated hero section.

    Packaging

    How it looks in the feed

    Show the feed as
    7:10

    Claude Code for Animated Hero Design

    Ruben Stom9.6K views · 1mo agoIn this video, I show you how I built this interactive field flight hero section with AI: a scattered cloud of black and white photography drifting through…

    Views and age as of the teardown, Oct 28, 2026. Other videos are blanked out.

    • 4/5Thumbnail imageThe high-end tablet mockup immediately communicates aesthetic taste and production value. A static screen cannot show animation, but the composition feels professional.A warm portrait of the creator on the left beside a dark tablet mockup showing a minimal web layout titled FETCHED.
    • 3/5Thumbnail text“Animated Hero Claude Code”Large, clear typography with the recognizable brand icon makes it readable at tiny sizes. However, it completely repeats the title rather than introducing a new curiosity hook.White text across the bottom reading 'Animated Hero' followed by an orange Claude logo and 'Claude Code'.
    • 3/5TitleIt is clear and searchable for designers interested in AI coding. It lacks emotional stakes, speed qualifiers, or intrigue beyond the practical task.Reads plainly as 'Claude Code for Animated Hero Design'.
    • 3/5Title + thumbnailThe pairing relies purely on clear topic matching rather than tension. The visual preview of the clean design carries the interest while the text elements repeat each other.The title says 'Claude Code for Animated Hero Design' while the image overlay states 'Animated Hero Claude Code'.

    Curiosity gap: What prompt or workflow in Claude produces clean, production-ready animation code for this specific website layout?

    The three hooks

    The title, the thumbnail text and the first words spoken each make a promise, and each does a different job.

    • Title“Claude Code for Animated Hero Design”How-toOutcomeNoveltyIt makes the viewer want a practical demonstration of using Claude to design a hero section.
    • Thumbnail text“Animated Hero Claude Code”How-toOutcomeNoveltyIt makes web designers want to see how Claude can build an animated web layout.
    • First words spoken“In today's video, I show you how you can make this beautiful hero section with AI.”How-toOutcomeCuriosityIt tells the viewer they will learn how to build an interactive, high-end website component using AI without delay.
    • PairingRepeatsThe thumbnail banner uses the exact same key terms as the title without adding an emotional angle or outcome promise.
    • StakesFitsThe promise to build a responsive, animated hero design with Claude Code matches the real output and workflow delivered in the video.
    • UrgencyNoneThe video focuses entirely on teaching an evergreen design and coding technique without creating artificial FOMO.

    The first 20 seconds

    TimeWhat you seeWhat you hearWhat it does
    0:00Speaker sitting at a desk addressing the camera directly in a cozy room.In today's video,Signals the immediate start of the tutorial without filler.
    0:01Speaker continues talking calmly toward the camera.I show you how you can make this beautifulIntroduces the core promise of the video.
    0:02Speaker gestures with hands as he speaks.hero sectionSpecifies the exact component being created.
    0:03Speaker finishes sentence facing forward.with AI.Delivers the hook and tool used (AI).
    0:04Cut to screen capture of a sleek dark-mode site with typography reading 'FETCH'.This is an interactivePresents visual proof of the finished product.
    0:05Letters spell out 'FETCHED' while small monochrome cards start appearing.field flight animationNames the visual effect shown on screen.
    0:06Cards float forward across the screen in 3D perspective.where the images fade inExplains the animation mechanic.
    0:07Nav header and body text fade in around the floating images.and travel into the distance.Demonstrates the depth and layout details.
    0:08Floating photo cards continue drifting toward the edges.[Music playing lightly]Lets viewer absorb the visual quality.
    0:09Mouse cursor appears and begins moving across the canvas.And it's interactive as itTransitions from passive animation to user interactivity.
    0:10Entire 3D plane tilts smoothly as cursor hovers.follows your mouse on hover,Proves the responsive mouse-tracking behavior.
    0:11Cursor moves across cards, shifting perspective angle.adding to the feel of depthHighlights visual polish of the hero section.
    0:12Camera tilts down-right following cursor movement.of the hero.Reinforces the depth and feel.
    0:13Cursor moves to top card, perspective shifts upward.[Music]Showcases fluid animation physics.
    0:14Cursor hovers over a top thumbnail card.And finally, I show you how toIntroduces the final deliverable.
    0:15Cut to mobile viewport simulation showing responsive layout.make the entire heroProves cross-device responsiveness.
    0:16Mobile version displaying stacked layout and floating images.ready for mobile.Solves common pain point of complex animations on mobile.
    0:17Mouse clicks hamburger menu icon in top right.[Music]Demonstrates interactive mobile UI elements.
    0:18Fullscreen mobile menu slides into view smoothly.So I originally used thisDisplays polished mobile navigation drawer.
    0:19Mobile navigation links shown on black background.at...Bridges into the background context of the build.
    0:20Screen begins transitioning back.[Voice continuing]Prepares viewer for the build breakdown.
    Click confirmation
    The speaker confirms the title within 3 seconds, cutting directly at 00:04 to a screen recording of the finished animated hero design in action.
    Time to the point
    0:03
    Hook
    payoff preview, live demonstration
    Reason to stay
    Shows a complex 3D interactive hero animation and responsive mobile menu, leaving open how to generate and code it with AI.
    Missing on purpose
    No animated channel intro, no greeting, no self-introduction, and no request to like or subscribe.
    Pace and texture
    Fast and direct. 4 seconds on camera, then continuous interactive screen capture showing desktop 3D effects, mouse tracking, and mobile responsiveness.

    Story map

    Tutorial. A designer wants to build a complex, responsive 3D interactive hero section using Claude Code without hand-coding math from scratch, facing layout and animation bugs before landing a production-ready website.

    TimeSectionNew tensionStakesTurnLoops
    0:00 –0:41Hook & Live ShowcaseCan AI actually generate a polished, interactive 3D layout that works on desktop and mobile?RiseRuben reveals he previously could only achieve this effect via an uneditable video loop, therefore he had to build a fully reactive code version using Claude.Opens: How do you prompt Claude Code to build this 3D layout? What is the free gift promised at the end?
    0:41 –1:51The Design Concept (Figma)Will AI write code accurately without explicit design constraints?HoldAI code tools drift without visual rules, therefore Ruben locks down tokens, typography, and mobile frames in Figma before writing a prompt.Opens: How will these Figma tokens transfer into Claude prompts?
    1:51 –2:45Creating Visuals with AIHow do you get coherent, matching imagery so the flight animation looks intentional rather than random?HoldIndividual image generations lack stylistic cohesion, therefore he uses Claude to expand a single reference image into a consistent multi-angle photoshoot prompt set.Opens: How does Claude Code integrate these local image files into the 3D plane?
    2:45 –5:15Claude Code Setup & Foundational PromptWill Claude's initial generation work out of the box, or will the 3D math and layout break?RiseClaude applies an aggressive full-screen blur and ties the entire UI to mouse parallax, but a single targeted follow-up prompt isolates and fixes both issues.Opens: Will the entrance animation and mobile breakpoints also require complex debugging?Closes: How to structure the foundational 3D field flight prompt and resolve initial rendering glitches.
    5:15 –5:41The Opening AnimationWill the site feel jarring if all elements load instantly?HoldSimultaneous loading feels chaotic, therefore Ruben writes an entrance prompt that sequences letters first, cards second, and navigation last.Closes: How to make the initial page load cinematic.
    5:41 –6:24Mobile Responsive AdaptationWill horizontal depth math translate onto a narrow mobile screen without crowding?RiseWide 16:9 3D coordinates collapse on vertical screens, therefore the prompt restructures the field flight into a tall oval with an animated full-screen frosted menu.Closes: How to preserve complex 3D desktop animations on mobile.
    6:24 –7:10Final Showcase & Asset DeliveryCan the viewer replicate this setup themselves without starting from zero?FallSag: no turnCloses: How the final site functions; what the free gift promised at 00:38 is.

    Payoff: delivered fully at 6:24. The final interactive website is demonstrated live on desktop with mouse-tracking depth, followed by the responsive mobile version and download links for the source code. Ending: A concise wrap-up showing the finished interactive build, offering all project assets for free via a link in the description, and asking viewers to subscribe.

    Leaks

    Where a viewer might leave. Guesses from watching, not retention data.

    • 1:00 Detailed breakdown of Figma hex tokens, font tracking, and letter spacing slows down momentum for viewers who clicked specifically for Claude Code.
    • 2:05 A brief plug for the creator's own website tool (AI Playfield Prompt Grid) pulls focus away from the core coding narrative.
    • 3:42 Extended theoretical explanation of how field flight math works on screen without showing code execution or browser changes.

    Steal this

    1. Proof-first cold open with interactive cursor demonstration Showing the completed, interactive UI reacting to cursor movement within the first ten seconds eliminates skepticism before explaining how it was built. 0:04
    2. Side-by-side prompt dissection paired with live visual renders Splitting the screen between the written prompt clauses and the rendered UI components grounds abstract AI prompting in visual output. 3:19
    3. Transparent failure highlight followed by a single-prompt fix Showing where the AI made a mistake (the full-layer blur and text parallax bug) builds trust and teaches practical debugging workflows. 4:46

    Skip this

    • Self-referencing personal web projects (AI Playfield) as the problem setup. Ruben already has an established portfolio and tools his regular viewers recognize; new creators will lose viewer interest by referencing personal side-projects without broad relevance.

    Open questions

    • What specific local tech stack or build tools (e.g., Vite, React, Vanilla HTML/JS) did Claude Code initialize inside the terminal at 02:52?
    • How much total time elapsed during Claude's generation and debugging in real life compared to the edited cut?

    Teardown by Avail.video from the thumbnail, the title, the first 20 seconds and the report's notes on the whole video.

    On screen

    Everything the video showed you

    Slides, frameworks, quotes and formulas, captured verbatim with the moment they appeared. Tap any card to jump there.

    Reference shelf

    People, ideas and things mentioned

    Said means mentioned aloud; Shown means it appeared on screen.

    People1

    • Ruben StomUI/UX designer, developer, and host of the tutorial.0:00Said + shown0:44Said + shown1:54Said + shown2:48Said + shown3:02Shown3:15Said + shown5:17Said + shown5:43Said + shown6:42Said + shown6:59Shown

    Ideas & frameworks1

    • FetchedFictional website brand created for the interactive hero demonstration.0:03Shown0:04Shown5:13Shown

    Organizations1

    • HiggsfieldAI image and video generation platform used to create the photoshoot assets.2:29Shown3:50Said + shown

    Things on screen7

    • Claude CodeAnthropic's agentic coding tool used to generate and refine the site's code.0:30Said3:02Shown
    • Claude OpusAnthropic AI model selected within Claude Code for coding the website hero.3:02Shown5:04Said + shown
    • FigmaInterface design tool used to establish mockups, layouts, and design tokens.0:44Said0:58Shown
    • AI PlayfieldPlatform created by Ruben Stom featuring creative AI tools and prompt libraries.0:20Said0:21Shown2:00Shown
    • Nano BananaImage generation model used within Higgsfield.2:29Shown3:31Said3:51Said + shown
    • Tenor SansUppercase sans-serif typeface used for the navigation and headline text.1:06Said + shown1:47Said + shown
    • NewsreaderSerif typeface used for the hero section body copy.1:26Said + shown2:06Said + shown
    Video description

    A description you can paste into YouTube

    A hook, a summary, chapters in YouTube's format and what the video mentions. Copy it, edit it, and paste it into YouTube Studio.

    943 / 5,000 characters
    By the numbers

    What YouTube shows about this video and its channel

    As of Oct 28, 2026. YouTube's public numbers first, then Avail.video's own arithmetic on them.

    The video

    Views
    9.6K
    Likes
    120
    Comments
    12
    Published
    Aug 29, 2026
    Length
    7:10
    Category
    Education
    YouTube's topics
    Technology
    Captions
    Yes
    HD
    Yes
    Language
    American English
    Paid promotion
    None declared
    Made for kids
    No
    License
    Standard YouTube

    Creator's tags

    No tags

    The channel

    Ruben Stom@rbnstm
    Subscribers
    4.4K
    Videos
    55
    Total views
    203.5K
    Channel age
    6 years (since Mar 2020)
    Country
    Netherlands
    Uploads
    about every 7 days
    Across the last 15 long-form uploads
    Before this video
    7 days after the previous long-form upload

    Calculated by Avail.video from YouTube's public numbers

    Outlier score
    2.7× · Above typical
    Views against the median of the channel's last 15 long-form uploads
    Views per subscriber
    2.17
    Likes vs the channel's usual
    0.4× the channel's usual
    1.2% of views vs a usual 3.1%
    Comments vs the channel's usual
    0.4× the channel's usual
    0.12% of views vs a usual 0.34%
    Rank among recent uploads
    #3 of 16
    By views: this video and the channel's last 15 long-form uploads
    Take it to your AI

    Ask Claude or ChatGPT about this video

    Copy this report as context, paste it into a chat, then ask anything. It includes timestamps, so answers can point back to the video.

    Then ask
    • Turn the main ideas into a checklist I can use this week.
    • What are the strongest claims in this video, and what evidence does it give for each?
    • Write a short summary for someone who hasn't watched it, linking the key moments.
    • Quiz me on this video, one question at a time, and cite the timestamp for each answer.

    Watched by Avail.video · 2026-10-28