I Built Animated Hero Sections With AI in Hours

The landing page looked like every other AI-generated website I'd seen that week. Clean layout, decent typography, reasonable color palette. And absolutely zero personality. It had that unmistakable "AI slot machine" aesthetic -- pull the lever, get a website, move on. Functional? Sure. Forgettable? Completely.

I'd been staring at it for ten minutes, trying to figure out why it felt so flat, when I noticed something on a completely different site. A hero section with a slow-moving background -- smoke drifting across a dark landscape, light shifting gradually like a sunrise that never quite arrives. The motion was barely there. Subtle enough that you might not consciously register it. But the effect was immediate. The page felt alive. It felt expensive. It felt like someone cared.

That's when something clicked for me. The gap between "AI-generated website" and "website that actually impresses people" isn't about better prompts or fancier frameworks. It's about motion. Specifically, the kind of slow, cinematic animation that turns a static hero section into something people stop and look at.

I spent the next two days figuring out how to create that effect using nothing but AI tools, Claude Code, and a deployment pipeline that costs exactly zero dollars. What I landed on is a workflow that any developer -- or honestly, anyone comfortable with a terminal -- can reproduce. And the results genuinely surprised me.

Here's exactly how it works, what went wrong along the way, and why I think this technique is about to become standard practice for anyone building with AI.

Why Static Hero Sections Are Killing Your First Impression

Before I walk through the build, let me explain why this matters more than it might seem on the surface. Your hero section is doing more psychological work than any other element on the page. It's the first thing visitors see, and research from the Nielsen Norman Group consistently shows that users form opinions about a website's credibility within 50 milliseconds. Not seconds. Milliseconds.

A static image hero -- even a gorgeous one -- fights an uphill battle against every other static hero the visitor has scrolled past today. Their brain pattern-matches it instantly: "another landing page." The scroll finger twitches. The back button hovers.

Motion disrupts that pattern matching. A background with subtle, slow animation triggers a different neural response. The brain registers dynamic content -- something worth paying attention to. Scroll velocity drops. Dwell time increases. That extra three to five seconds of attention is often the difference between a bounce and a conversion.

I'm not talking about particle effects or parallax overload. The best hero animations are almost invisible. A slow pan across a landscape. Gentle fog movement. Light that shifts from warm to cool. Cinematic, deliberate, and restrained.

The problem has always been creating this content. Stock video is expensive and generic. Custom production is very expensive. Motion graphics skills (After Effects, Cinema 4D) take months to learn. None of those options made sense for a landing page you're building in an afternoon.

AI video generation changed that equation. You can now create custom animated backgrounds from a single static image, and the workflow connects image generation, video animation, frontend code, and deployment into a pipeline that takes hours, not weeks.

The catch? The details matter. The wrong animation speed looks cheap. The wrong loop transition looks jarring. The wrong video compression makes the page crawl. I hit every one of these problems, and I'll show you how to solve each one.

The Four-Phase Pipeline: Image to Deployed Website

Here's the mental model that saved me from going in circles. The workflow has four distinct phases, and trying to skip or combine them always produced worse results. I learned that the hard way after three failed attempts on day one.

Phase 1: Generate a high-quality static image that matches your landing page concept. Phase 2: Convert that static image into a subtle, loopable video animation. Phase 3: Build the landing page around the video using Claude Code. Phase 4: Deploy to production with GitHub and Vercel.

Each phase has its own tools, its own pitfalls, and its own "aha" moment that made everything click. I'll walk through all four, but I want to start with something most tutorials skip entirely -- the planning step that happens before you touch any tool.

Planning Your Composition Before Generating Anything

This is the step I skipped on my first attempt, and it cost me four hours of wasted generation cycles.

You need areas in the image that can move naturally. Smoke, clouds, water, fire, light rays, fog -- these animate beautifully because their motion is organic and doesn't require precise object tracking.

A portrait of a person standing still? Terrible choice. The AI video tool will try to animate the person, and you'll get uncanny valley micro-movements that look like a haunted photograph. A sweeping landscape with atmospheric fog? Perfect. The fog moves, the light shifts, nothing looks wrong.

Before I opened any tool, I spent twenty minutes on Dribbble and Godly looking at landing pages -- not for layouts, but for visual mood. I also browsed MidJourney galleries and Pinterest boards to build a mental library of atmospheric compositions. Scenes with volumetric lighting, layered fog, depth separation between foreground and background -- these come alive when you add gentle motion.

This planning phase felt like procrastination. It was the most important twenty minutes of the entire build.

Phase 1: Generating the Perfect Starting Image With Nano Banana Pro

For static image generation, I used Nano Banana Pro through the Higsfield platform. Nano Banana Pro earned its spot in my workflow for one specific reason: the images it produces have photographic quality and atmospheric depth that translate well to video animation. Some generators produce stunning stills that fall apart when animated -- flat lighting, no atmospheric depth, hard edges. Nano Banana Pro consistently delivered the layered, atmospheric quality I needed.

Here's the prompt structure I landed on after about fifteen attempts:

[Scene description], [camera type and lens], [lighting description],
[atmosphere/mood], [color palette], cinematic quality, 8K resolution

My working prompt for the hero image that actually made it to production:

Dark mountainous landscape at twilight, volumetric fog rolling through
a valley, warm amber light source from the left illuminating rock faces,
cool blue shadows in the distance, shot on ARRI Alexa with anamorphic
lens, atmospheric haze, cinematic color grading, 8K resolution,
photorealistic

A few things I learned about prompting for animation-ready images.

Specify camera equipment. This sounds ridiculous, but including specific camera names (ARRI Alexa, RED Komodo, Sony Venice) and lens types (anamorphic, 35mm prime) dramatically changes the output. The AI has been trained on behind-the-scenes photography descriptions, and camera-specific prompts trigger cinematic rendering characteristics -- natural lens distortion, specific bokeh patterns, film-like color science.

Describe lighting with direction. "Warm light from the left" produces dramatically better results than just "warm lighting." Directional lighting creates depth and shadow gradients that give the video animation something to work with. Flat, even lighting produces flat, boring animation.

Include atmospheric elements explicitly. Fog, haze, smoke, mist, dust particles, light rays -- these are your animation anchors. The more atmospheric depth your static image has, the more convincing the animation will be. I made the mistake of generating a clean, crisp landscape with no atmosphere on my first attempt. The animation looked like a Ken Burns effect -- just a slow zoom on a still photo. Adding fog and haze to the prompt completely changed what the video generation tool could do with it.

Generate at the highest resolution possible. Your hero section needs to look sharp on large desktop monitors. I generated at 8K and downscaled, which preserves detail far better than generating at lower resolution and hoping for the best. The video generation step will compress things further, so starting with maximum quality gives you headroom.

One more critical detail: this static image doubles as your mobile fallback. On mobile devices, autoplaying background video is either blocked by the browser or murders battery life, so responsive hero sections show the static image on mobile and the video on desktop. That means your static image needs to look great on its own, not just as a frame of animation.

I generated about eight variations before I found one that had the right combination of atmospheric depth, compositional balance, and mood. Don't settle for the first output. Generation is cheap and fast -- your final image is what people actually see.

Phase 2: Turning a Static Image Into Cinematic Video

This is where the magic happens, and also where I made the most mistakes. Taking a still image and convincing an AI to animate it subtly -- without morphing faces, warping buildings, or creating surreal dreamscape nonsense -- requires specific technique.

I tested two tools: Cling 3.0 and VO 3.1. Both can generate video from a static image, but they behave differently in ways that matter for this use case.

Cling 3.0 excels at natural atmospheric motion. When I fed it my mountain landscape with fog, it generated smooth, believable fog movement and gentle light shifts. The motion felt physical -- like actual fog being pushed by wind. Where it struggled was maintaining consistency over longer durations. A 15-second generation sometimes introduced subtle warping in the background terrain after the 8-second mark.

VO 3.1 produced slightly more controlled motion overall, with better temporal consistency across the full clip duration. The trade-off was that its atmospheric effects felt slightly more "processed" -- still good, but lacking some of the organic quality Cling achieved in its best outputs.

For hero sections specifically, I recommend Cling 3.0, but with a critical caveat about duration that I'll explain in a moment.

The Prompting Secret for Subtle Animation

Here's what nobody tells you in the "AI video generation" tutorials: the default behavior of these tools is to create dramatic, noticeable motion. They're trained on content where change is the point -- people want to see their landscape turn into a fantasy world or their portrait start talking. For hero backgrounds, you want the opposite. You want motion so subtle that the viewer feels it more than sees it.

My prompt template for hero animation:

Extremely slow and subtle camera movement. Gentle atmospheric motion
only -- fog drifts slowly, light shifts gradually. No dramatic changes.
No camera shake. No object movement. Cinematic, steady, hypnotic pace.
The scene should feel alive but calm, like watching real fog move in
real time.

The key phrases that made the difference: "extremely slow," "subtle," "no dramatic changes," and "hypnotic pace." Without these constraints, the AI generates movement that's too fast and too obvious for a background element. You want viewers to unconsciously register that something is moving, not consciously watch the animation.

The 5-Second Loop Technique (This Is the Real Secret)

Here's where I spent the most time and where the technique gets genuinely clever.

You have two options for video duration: generate a 15-second clip or generate a 5-second clip. The 15-second clip gives the AI more freedom to create natural-feeling motion, but it has a fatal flaw -- when the video loops (and it will loop, since hero sections play continuously), there's a visible jump at the loop point. The fog is in one position at frame 15:00 and snaps back to a completely different position at frame 0:01. That stutter breaks the illusion instantly.

The 5-second approach solves this problem with a trick I wish I'd known from the start. You generate a 5-second clip, then create a seamless loop by reversing the second half. Here's how it works:

1. Generate a 5-second video from your static image
2. Split it into two 2.5-second halves
3. Reverse the second half
4. Concatenate: first half + reversed second half

The result is a 5-second loop where the animation smoothly moves forward for 2.5 seconds, then smoothly moves back to the starting point over the next 2.5 seconds. When this loops, there's no visible jump because the last frame and the first frame are identical -- they're the same frame.

The motion looks like gentle breathing. Forward, back, forward, back. For atmospheric effects like fog and light, this reads as completely natural. Fog drifts left, then drifts right. Light warms slightly, then cools slightly. It's hypnotic and seamless.

I used ffmpeg inside Claude Code to handle the splitting, reversing, and concatenation. Here's the exact command sequence, which I'll explain in the implementation section. But the concept is what matters: 5-second generation + reverse-loop technique = perfect seamless animation with zero visible loop point.

If you'd rather have someone build this entire setup for you -- the image generation, video processing, and deployment pipeline -- I take on frontend and AI automation projects through my Fiverr profile at fiverr.com/s/EgxYmWD.

What I Tried That Failed

Before I arrived at the 5-second loop technique, I tried three other approaches that didn't work.

Approach 1: 15-second clip, just loop it. The jump at the loop point was obvious. Even with CSS crossfade tricks, the fog positions were too different between end and start.

Approach 2: Two clips with crossfade. The crossfade region created a ghosting effect -- two layers of fog moving in different directions looked like a rendering glitch.

Approach 3: 15-second clip with fade-to-black at loop point. A periodic fade-to-black on your hero section draws attention to the loop instead of hiding it.

The 5-second reverse technique was the only approach that produced truly seamless results.

Phase 3: Building the Landing Page With Claude Code

With the static image and the processed video file ready, the actual website build was the fastest phase. And honestly, the most fun.

I set up a project folder with three files: the original static image (for mobile fallback), the processed looping video file (MP4 format), and a blank index.html. Then I opened Claude Code.

The Prompt That Got It Right on the First Try

Here's what I've learned about prompting Claude Code for landing pages: specificity beats length. Give it a clear structure, reference materials, and explicit constraints, and it performs dramatically better than giving it a vague "build me a cool landing page."

My prompt structure:

Build a landing page with these specifications:

HERO SECTION:
- Full-viewport animated hero with video background
- Video file: hero-loop.mp4 (autoplay, muted, loop)
- Static fallback image: hero-static.jpg (for mobile)
- Dark overlay gradient from bottom (60% opacity) for text readability
- Headline: [your headline text]
- Subheadline: [your subheadline text]
- CTA button with subtle glow animation

DESIGN DIRECTION:
- Reference: [paste URL or describe a specific site you admire]
- Color palette: dark base (#0a0a0a), warm accent (#e8a849)
- Typography: Inter for body, space grotesk for headings
- Minimal, premium feel -- lots of breathing room

TECHNICAL REQUIREMENTS:
- Responsive: video on desktop, static image on mobile
- Video must autoplay, be muted, loop seamlessly
- playsinline attribute for iOS compatibility
- Preload poster frame from static image
- Lazy load content below the fold
- Performance budget: under 3 seconds LCP on fast 3G

The reference website URLs were a game-changer. I included links to two landing pages from Godly that had the visual mood I wanted. Claude Code analyzed them and matched the spatial layout, typography hierarchy, and animation pacing far better than it would have from text description alone. Screenshots work even better than URLs -- if you can provide a screenshot of the design direction you're after, Claude Code produces remarkably faithful interpretations.

Using the UIUX Pro Max Skill

Claude Code has a skill called UIUX Pro Max that specifically optimizes for frontend design work. I activated it for this project, and the difference in output quality was noticeable. Without the skill, Claude Code produces functional but visually basic landing pages. With UIUX Pro Max, the default spacing, typography scale, and animation choices all felt more intentional and refined.

The skill also handles responsive breakpoints more intelligently. The mobile fallback -- swapping video for static image -- was implemented correctly on the first generation, including the playsinline attribute for iOS (which prevents Safari from hijacking the video into fullscreen mode) and the poster attribute that shows the static image while the video loads.

The Video Background Implementation

The HTML structure Claude Code generated for the hero section looked like this:

<section class="hero">
  <div class="hero-media">
    <video
      autoplay
      muted
      loop
      playsinline
      poster="hero-static.jpg"
      class="hero-video"
    >
      <source src="hero-loop.mp4" type="video/mp4">
    </video>
    <img
      src="hero-static.jpg"
      alt="Atmospheric mountain landscape with volumetric fog"
      class="hero-fallback"
    >
  </div>
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <h1>Your Headline Here</h1>
    <p>Your subheadline text</p>
    <a href="#" class="cta-button">Get Started</a>
  </div>
</section>

And the CSS that handles the video-to-image fallback:

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-fallback {
  display: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0.3) 50%,
    transparent 100%
  );
}

@media (max-width: 768px) {
  .hero-video {
    display: none;
  }
  .hero-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

A few things worth noting about this implementation. The object-fit: cover on the video ensures it fills the entire viewport without letterboxing, regardless of the video's aspect ratio. The overlay gradient goes from nearly opaque at the bottom (where the text lives) to transparent at the top (where you want to see the animation). And the media query at 768px swaps video for image on mobile devices.

Using ffmpeg in Claude Code for the Loop Processing

Here's where Claude Code's ability to run terminal commands became incredibly useful. Instead of processing the video externally, I had Claude Code handle the entire reverse-loop technique directly in the project folder.

The ffmpeg command sequence:

# Split the 5-second video at the midpoint
ffmpeg -i raw-animation.mp4 -t 2.5 -c copy first-half.mp4

# Extract the second half and reverse it
ffmpeg -i raw-animation.mp4 -ss 2.5 -c copy second-half.mp4
ffmpeg -i second-half.mp4 -vf reverse -af areverse reversed-half.mp4

# Concatenate first half + reversed half for seamless loop
echo "file 'first-half.mp4'" > filelist.txt
echo "file 'reversed-half.mp4'" >> filelist.txt
ffmpeg -f concat -safe 0 -i filelist.txt -c copy hero-loop.mp4

# Clean up intermediate files
rm first-half.mp4 second-half.mp4 reversed-half.mp4 filelist.txt

I gave Claude Code this sequence as part of my prompt, and it executed it flawlessly. The resulting hero-loop.mp4 was a perfectly seamless 5-second loop that played continuously without any visible jump point. Watching fog drift slowly forward and then gently drift back felt completely natural -- like watching real atmospheric conditions from a stationary camera.

Pro tip: If your video has audio (it shouldn't for a hero background, but just in case), the -af areverse flag reverses the audio along with the video. For our use case, the video should be silent, and the muted attribute on the HTML video element ensures no sound plays even if the file has an audio track.

UI Components With 21st

For buttons, navigation elements, and other UI components beyond the hero section, I pulled from 21st (21st.dev) -- a component library designed specifically for modern web projects. The CTA button with its subtle glow animation came from 21st, as did the navigation bar and the footer layout.

The advantage of using a component library is consistency. When you reference a specific 21st component, you get a battle-tested implementation with proper hover states, focus indicators, and animation curves that someone has already refined -- instead of whatever interpretation Claude Code invents at that moment.

I gave Claude Code the component documentation link, said "use this button style for the CTA," and it integrated cleanly without manual adjustment.

Phase 4: Deploying for Free With GitHub and Vercel

Deployment was the phase I expected to be tedious and turned out to be almost trivially simple. The entire process took under ten minutes.

Step 1: Initialize a Git repository in the project folder.

git init
git add .
git commit -m "Initial landing page with animated hero"

Step 2: Create a GitHub repository and push.

gh repo create my-landing-page --public --source=. --push

Step 3: Connect to Vercel.

Go to vercel.com, sign in with GitHub, click "Add New Project," select your repository. Vercel auto-detects the static site and configures deployment automatically. Click "Deploy." Your site is live at a .vercel.app URL within 45 seconds, and every subsequent push triggers automatic redeployment.

The cost: GitHub is free. Vercel hobby tier is free. AI image and video tools offer free tiers or credits. Claude Code is included with your subscription. A custom domain runs about $10/year if you want one. Total cost for a landing page that looks studio-built: potentially zero dollars.

Performance Optimization (Don't Skip This)

A video background hero section can absolutely destroy your page performance if you're not careful. Here's what I did to keep the Largest Contentful Paint under 3 seconds.

Compress the video aggressively. Raw output from Cling 3.0 was 28MB for 5 seconds. After ffmpeg compression, I got it to 1.8MB with minimal quality loss:

ffmpeg -i hero-loop.mp4 -vcodec libx264 -crf 28 -preset slow \
  -vf scale=1920:-2 -movflags +faststart hero-compressed.mp4

The -crf 28 is more aggressive than the default (23), but for a background video under an overlay gradient, you can't tell the difference. The -movflags +faststart flag moves metadata to the file's beginning so playback starts before download completes. That single flag improved perceived load time dramatically.

Optimize the fallback image. Convert to WebP at quality 80 using squoosh.app. My file dropped from 2.1MB to 340KB.

Preload the poster frame. Add <link rel="preload" href="hero-static.jpg" as="image"> in the HTML head so the browser fetches the fallback image immediately.

Lazy load everything below the fold. Use loading="lazy" on images and Intersection Observer for animated elements. Keep the critical rendering path focused on getting the hero visible fast.

The Honest Trade-Offs Nobody Mentions

Alright, I've spent most of this post showing you what works. Here's the part where I tell you what doesn't -- or at least, what you should know before committing to this technique.

Video backgrounds eat mobile battery. Even with the CSS swap to static images on phones, tablets fall in an awkward middle ground. iPads will play the background video and drain battery noticeably. For web apps where users spend extended time on the page, consider raising your breakpoint to 1024px instead of 768px.

Not every concept animates well. I tried generating an animated hero for a SaaS dashboard -- clean geometry, flat colors, sharp lines. The AI video tools couldn't find anything to animate naturally. The result was subtle warping that looked like a rendering bug. Atmospheric, organic scenes animate beautifully. Clean, geometric compositions don't.

AI video generation isn't deterministic. The same prompt and input image produce different results each time. I generated five videos from one image -- three were great, one was mediocre, one had a color shift that ruined it. Budget time for multiple attempts.

The loop technique works best for atmospheric content. The reverse-loop is invisible when fog or light moves. But water flowing in one direction will noticeably reverse every 2.5 seconds. For directional motion, you need a 15-second clip with a crossfade approach -- harder to execute and outside this tutorial's scope.

Browser compatibility is almost universal, but... On iOS Safari, the playsinline and muted attributes are mandatory. Without both, Safari won't autoplay. On some older Android browsers, autoplay is unreliable. The static image fallback catches these edge cases, but test beyond Chrome on Mac.

Knowing these limitations upfront saves you from midnight frustration when you're trying to ship.

What the Results Actually Look Like

After deploying the finished page and testing it across devices, here's what I measured.

Performance metrics (via Lighthouse on a throttled connection):

• Performance score: 94/100
• Largest Contentful Paint: 2.1 seconds
• Total Blocking Time: 40ms
• Cumulative Layout Shift: 0.002

Those numbers are strong for any landing page, and exceptional for one with a video background. The aggressive video compression and preloading strategy made the difference.

Subjective feedback: I shared the page with ten people -- designers and developers. Every one commented on the hero section specifically. "This doesn't look AI-generated" was the most common reaction. Nobody identified it as AI-created imagery until I told them. When I put the animated and static versions side by side and asked which felt more trustworthy as a real company's site, nine out of ten chose the animated version.

That trust differential is the point. Subtle, cinematic motion triggers a "this was made with care" response that static images can't match. In a world where everyone has AI-generated static websites, perceived craft is a genuine competitive advantage.

Total time investment: roughly five hours, two of which were learning from mistakes this guide helps you skip. Following this workflow from scratch: two to three hours for the first project, faster after that.

Where This Goes From Here

AI-generated websites are converging on sameness. Every tool produces the same aesthetic, the same layouts, the same component patterns. We're watching the web become more homogeneous because AI optimizes for the average of its training data.

Animation is currently one of the most accessible ways to break that convergence. It adds a dimension that static generation can't replicate through better prompts alone. And the tools are at the exact intersection of "good enough to look professional" and "new enough that most people haven't adopted them."

That window won't stay open forever. In a year, animated hero sections will probably be a checkbox in Vercel's v0. But right now, knowing this workflow gives you a meaningful edge.

My next experiment is chaining this with Remotion for full video content on landing pages -- animated product demos and testimonial sequences, all AI-generated. Nano Banana Pro for stills, Cling 3.0 for animation, Claude Code for assembly, Vercel for deployment. The pipeline scales to anything you can imagine.

Here's what I want you to try this week. Pick one landing page you've built or been meaning to build. Generate a single atmospheric image. Animate it. Drop it in as the hero background.

That moment when you first load the page and see fog moving, light shifting, the whole thing breathing -- that's when you'll understand why I spent two days on this instead of shipping another static site.

Let's Work Together

Looking to build AI systems, automate workflows, or scale your tech infrastructure? I'd love to help.

• Fiverr (custom builds & integrations): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (enterprise solutions): ramlit.com
• ColorPark (design & branding): colorpark.io
• xCyberSecurity (security services): xcybersecurity.io