FullscreenHero

Fullscreen Hero Layout — StyleKit

Capture Every
First Second.

The fullscreen hero layout creates an immersive first impression with full-viewport imagery, precise overlay control, and cinematic visual hierarchy.

4.9 — 12,000+ teams

Full ViewportGravity FloatOverlay DepthTactile PressGroup HoverFocus RingScroll IndicatorKen BurnsDark CanvasText ReadabilityMobile FirstShadow Burst

Overlays

Overlay variants

Every fullscreen hero image needs an overlay to guarantee text readability. Choose based on image complexity and brand tone.

Active overlay

Hero Headline Text

Body text remains readable against any overlay variant.

Tailwind class

bg-black/50

Best for

50% black. Safe default for any image complexity.

Structure

Layer stack

A fullscreen hero is built from five z-indexed layers. Getting this order wrong is the most common mistake — nav disappears or overlay covers content.

Scroll indicator

absolute bottom-8 left-1/2 -translate-x-1/2

Navigation (z-50)

absolute top-0 left-0 right-0 z-50

Content (z-10)

relative z-10 flex items-center justify-center

Overlay layer

absolute inset-0 gradient or solid

Background image / video

absolute inset-0 object-cover

Critical: Content must use relative z-10not absolute— so it participates in normal flow and stacks correctly above the overlay. Navigation usesz-50to stay on top of everything.

Background

Background options

Three valid approaches — each with real-world trade-offs. Pick based on brand, bandwidth, and device targets.

Advantages

Universal browser support
Fast initial load
Easy to optimize with next/image

Trade-offs

No motion or depth
Feels static for high-energy brands

Code snippet

<img src="/hero.jpg" alt="" className="absolute inset-0 w-full h-full object-cover" />

Interactions

Animation & Interaction Rules

Four named aiRules from the style definition. Every demo below is interactive — hover or press to feel the exact behavior on a dark overlay surface.

Gravity FocusCTA Button — aiRule 1

Resting: shadow-[0_4px_14px_rgba(0,0,0,0.3)]

Hover: hover:-translate-y-1

Hover: hover:shadow-[0_8px_28px_rgba(0,0,0,0.5)]

Active: active:scale-[0.98] active:translate-y-0

Active: active:shadow-[0_2px_8px_rgba(0,0,0,0.3)]

Focus: focus:ring-2 focus:ring-white/80

Focus: focus:ring-offset-2 focus:ring-offset-black/50

Hover the button to see gravity float + shadow burst.

Floating GlassFeature Cards — aiRule 2

Required: group class on card container

Hover: hover:-translate-y-2

Hover: hover:shadow-[0_16px_40px_rgba(0,0,0,0.5)]

Icon: group-hover:scale-110

Icon: transition-transform duration-300 ease-out

Feature Title

Brief feature description text.

Hover the card — group class triggers icon scale + text reveal simultaneously.

Text RevealCard Typography — aiRule 3

h3 resting: text-white/90

h3 hover: group-hover:text-white/95

p resting: text-white/70

p hover: group-hover:text-white/85

Both: transition-colors duration-200

Secure by Default

End-to-end encryption on every request.

Hover to see h3 + p brighten from 90%/70% to 95%/85%.

Tactile ConfirmationAll Buttons — aiRule 4

All buttons: active:scale-[0.98]

Primary CTA: active:translate-y-0

Primary CTA: active:shadow-[0_2px_8px_rgba(0,0,0,0.3)]

Ghost CTA: active:translate-y-0

Duration: 200ms ease-out everywhere

Reason: dark overlay kills haptic cues

Hold either button — active:scale-[0.98] simulates physical depression on dark overlay.

Feature Cards

Glassmorphism feature grid

Feature cards in a fullscreen hero use the Floating Glass pattern — glass surface, dramatic lift, icon micro-scale all driven by the parent group class.

Blazing Fast

Sub-100ms response times globally.

Secure by Default

E2E encryption on every request.

Global CDN

200+ edge nodes worldwide.

Auto-Scaling

Handles any traffic spike instantly.

Components

Ready-to-use snippets

All five official components from the style definition. Copy the code and drop it directly into your hero section.

hero.tsx

<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
  {/* Background */}
  <div className="absolute inset-0">
    <img src="/hero-bg.jpg" alt="" className="w-full h-full object-cover" />
    <div className="absolute inset-0 bg-black/50" />
    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/30" />
  </div>

  {/* Navigation */}
  <nav className="absolute top-0 left-0 right-0 z-50 px-6 py-6 flex items-center justify-between">
    <a href="/" className="text-white text-2xl font-bold">Logo</a>
    <div className="hidden md:flex items-center gap-8">
      <a href="#" className="text-white/80 hover:text-white transition-colors">Features</a>
      <button className="px-6 py-2 bg-white text-black rounded-full font-medium
        hover:bg-white/90 hover:-translate-y-0.5
        active:scale-[0.98] transition-all duration-200 ease-out">
        Sign Up
      </button>
    </div>
  </nav>

  {/* Content */}
  <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
    <span className="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm
      rounded-full text-white/90 text-sm font-medium mb-6">
      Announcing our product
    </span>
    <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
      Build Something Amazing
    </h1>
    <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto">
      The platform that creates incredible experiences users will love.
    </p>
    <div className="flex flex-col sm:flex-row gap-4 justify-center">
      <button className="
        px-8 py-4 bg-white text-black font-semibold text-lg rounded-full
        shadow-[0_4px_14px_rgba(0,0,0,0.3)]
        hover:bg-white/95 hover:-translate-y-1
        hover:shadow-[0_8px_28px_rgba(0,0,0,0.5)]
        focus:outline-none focus:ring-2 focus:ring-white/80
        focus:ring-offset-2 focus:ring-offset-black/50
        active:scale-[0.98] active:translate-y-0
        active:shadow-[0_2px_8px_rgba(0,0,0,0.3)]
        transition-all duration-200 ease-out
      ">Get Started Free</button>
      <button className="
        px-8 py-4 bg-transparent text-white font-semibold text-lg
        rounded-full border-2 border-white
        hover:bg-white/15 hover:-translate-y-1
        hover:shadow-[0_8px_28px_rgba(0,0,0,0.3)]
        focus:outline-none focus:ring-2 focus:ring-white/60
        focus:ring-offset-2 focus:ring-offset-black/50
        active:scale-[0.98] active:translate-y-0
        transition-all duration-200 ease-out
      ">Watch Demo</button>
    </div>
  </div>

  {/* Scroll indicator */}
  <div className="absolute bottom-8 left-1/2 -translate-x-1/2
    flex flex-col items-center gap-2 text-white/70 animate-bounce">
    <span className="text-sm">Scroll to explore</span>
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
        d="M19 14l-7 7m0 0l-7-7m7 7V3" />
    </svg>
  </div>
</section>

Philosophy

Do & Don't

Fullscreen Hero is a high-impact pattern — misuse destroys credibility instantly. These rules are drawn directly from the style definition.

Do

Use h-screen or min-h-screen — never fixed pixel heights
object-cover on all background images — never object-contain
Always add gradient or solid overlay — text on raw imagery is forbidden
Center content with relative z-10 and max-width constraint
Add scroll indicator — users need visual affordance to scroll
Mute video autoplay — sound on autoplay is a UX failure
Provide image fallback poster for video backgrounds
Primary CTA: hover:-translate-y-1 + shadow burst (Gravity Focus)
Feature cards: group class + hover:-translate-y-2 (Floating Glass)
Icon container: group-hover:scale-110 transition-transform
All buttons: active:scale-[0.98] — tactile confirmation required

Don't

No text directly on busy backgrounds without overlay
No low-quality or pixel-stretched images
No ignoring mobile — always test at 375px viewport width
No content filling the entire viewport with no breathing room
No autoplaying video with sound — ever, without exception
No omitting active:scale-[0.98] — dark overlay removes haptic cues
No cards without group class — icon micro-animation breaks
No z-index lower than z-10 for the content layer
No fixed pixel heights for the hero container
No omitting the scroll indicator — it is a primary UX affordance

First Impression

You have under 2 seconds

Fullscreen heroes get one job: grab attention before the visitor decides to leave. Every pixel fights for that outcome. No waste. No decoration for its own sake.

Readable Always

Contrast is non-negotiable

Any image that fails WCAG AA without an overlay is the wrong image choice. The overlay is not cosmetic — it is load-bearing infrastructure for usability.

Cinematic Motion

Subtle is the operative word

Ken Burns slow zoom, smooth entry animations, gentle scroll indicators. Anything that vibrates or flashes without purpose is strictly forbidden in this layout.

Scale & Pairings

Responsive rules & compatible styles

Fullscreen Hero is a layout — it pairs with a visual style for complete identity. It also must adapt gracefully across viewport sizes.

Responsive breakpoints

Mobile (< 768px)

text-5xl headline — down from 7xl+
Stacked CTA buttons: flex-col
Hide or pause video — show poster
Simpler overlay: solid preferred
Hamburger menu in nav

Tablet (768px – 1280px)

text-6xl headline
Side-by-side CTAs: sm:flex-row
Video shown if bandwidth allows
Full navigation visible
Feature cards 2-column

Desktop (> 1280px)

text-7xl to 8xl headline
All animations fully active
Ken Burns on background
Full gradient overlay complexity
Feature cards 3–4 column

Compatible visual styles

Glassmorphism

Frosted glass cards float directly over the hero image

Modern Gradient

Gradient fills become the background itself — no photo needed

Cyberpunk Neon

Neon glow typography on the deep dark canvas

Minimalist Flat

Clean bold type over subtle gradient backgrounds

Dark Mode

Natural fit — dark overlays are already dark mode

FullscreenHero

←StyleKit

Fullscreen Hero Layout — StyleKit

Capture Every
First Second.

The fullscreen hero layout creates an immersive first impression with full-viewport imagery, precise overlay control, and cinematic visual hierarchy.

4.9 — 12,000+ teams

Full ViewportGravity FloatOverlay DepthTactile PressGroup HoverFocus RingScroll IndicatorKen BurnsDark CanvasText ReadabilityMobile FirstShadow Burst

Overlays

Overlay variants

Every fullscreen hero image needs an overlay to guarantee text readability. Choose based on image complexity and brand tone.

Active overlay

Hero Headline Text

Body text remains readable against any overlay variant.

Tailwind class

bg-black/50

Best for

50% black. Safe default for any image complexity.

Structure

Layer stack

A fullscreen hero is built from five z-indexed layers. Getting this order wrong is the most common mistake — nav disappears or overlay covers content.

Scroll indicator

absolute bottom-8 left-1/2 -translate-x-1/2

Navigation (z-50)

absolute top-0 left-0 right-0 z-50

Content (z-10)

relative z-10 flex items-center justify-center

Overlay layer

absolute inset-0 gradient or solid

Background image / video

absolute inset-0 object-cover

Critical: Content must use relative z-10not absolute— so it participates in normal flow and stacks correctly above the overlay. Navigation usesz-50to stay on top of everything.

Background

Background options

Three valid approaches — each with real-world trade-offs. Pick based on brand, bandwidth, and device targets.

Advantages

Universal browser support
Fast initial load
Easy to optimize with next/image

Trade-offs

No motion or depth
Feels static for high-energy brands

Code snippet

<img src="/hero.jpg" alt="" className="absolute inset-0 w-full h-full object-cover" />

Interactions

Animation & Interaction Rules

Four named aiRules from the style definition. Every demo below is interactive — hover or press to feel the exact behavior on a dark overlay surface.

Gravity FocusCTA Button — aiRule 1

Resting: shadow-[0_4px_14px_rgba(0,0,0,0.3)]

Hover: hover:-translate-y-1

Hover: hover:shadow-[0_8px_28px_rgba(0,0,0,0.5)]

Active: active:scale-[0.98] active:translate-y-0

Active: active:shadow-[0_2px_8px_rgba(0,0,0,0.3)]

Focus: focus:ring-2 focus:ring-white/80

Focus: focus:ring-offset-2 focus:ring-offset-black/50

Hover the button to see gravity float + shadow burst.

Floating GlassFeature Cards — aiRule 2

Required: group class on card container

Hover: hover:-translate-y-2

Hover: hover:shadow-[0_16px_40px_rgba(0,0,0,0.5)]

Icon: group-hover:scale-110

Icon: transition-transform duration-300 ease-out

Feature Title

Brief feature description text.

Hover the card — group class triggers icon scale + text reveal simultaneously.

Text RevealCard Typography — aiRule 3

h3 resting: text-white/90

h3 hover: group-hover:text-white/95

p resting: text-white/70

p hover: group-hover:text-white/85

Both: transition-colors duration-200

Secure by Default

End-to-end encryption on every request.

Hover to see h3 + p brighten from 90%/70% to 95%/85%.

Tactile ConfirmationAll Buttons — aiRule 4

All buttons: active:scale-[0.98]

Primary CTA: active:translate-y-0

Primary CTA: active:shadow-[0_2px_8px_rgba(0,0,0,0.3)]

Ghost CTA: active:translate-y-0

Duration: 200ms ease-out everywhere

Reason: dark overlay kills haptic cues

Hold either button — active:scale-[0.98] simulates physical depression on dark overlay.

Feature Cards

Glassmorphism feature grid

Feature cards in a fullscreen hero use the Floating Glass pattern — glass surface, dramatic lift, icon micro-scale all driven by the parent group class.

Blazing Fast

Sub-100ms response times globally.

Secure by Default

E2E encryption on every request.

Global CDN

200+ edge nodes worldwide.

Auto-Scaling

Handles any traffic spike instantly.

Components

Ready-to-use snippets

All five official components from the style definition. Copy the code and drop it directly into your hero section.

hero.tsx

<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
  {/* Background */}
  <div className="absolute inset-0">
    <img src="/hero-bg.jpg" alt="" className="w-full h-full object-cover" />
    <div className="absolute inset-0 bg-black/50" />
    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/30" />
  </div>

  {/* Navigation */}
  <nav className="absolute top-0 left-0 right-0 z-50 px-6 py-6 flex items-center justify-between">
    <a href="/" className="text-white text-2xl font-bold">Logo</a>
    <div className="hidden md:flex items-center gap-8">
      <a href="#" className="text-white/80 hover:text-white transition-colors">Features</a>
      <button className="px-6 py-2 bg-white text-black rounded-full font-medium
        hover:bg-white/90 hover:-translate-y-0.5
        active:scale-[0.98] transition-all duration-200 ease-out">
        Sign Up
      </button>
    </div>
  </nav>

  {/* Content */}
  <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
    <span className="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm
      rounded-full text-white/90 text-sm font-medium mb-6">
      Announcing our product
    </span>
    <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
      Build Something Amazing
    </h1>
    <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto">
      The platform that creates incredible experiences users will love.
    </p>
    <div className="flex flex-col sm:flex-row gap-4 justify-center">
      <button className="
        px-8 py-4 bg-white text-black font-semibold text-lg rounded-full
        shadow-[0_4px_14px_rgba(0,0,0,0.3)]
        hover:bg-white/95 hover:-translate-y-1
        hover:shadow-[0_8px_28px_rgba(0,0,0,0.5)]
        focus:outline-none focus:ring-2 focus:ring-white/80
        focus:ring-offset-2 focus:ring-offset-black/50
        active:scale-[0.98] active:translate-y-0
        active:shadow-[0_2px_8px_rgba(0,0,0,0.3)]
        transition-all duration-200 ease-out
      ">Get Started Free</button>
      <button className="
        px-8 py-4 bg-transparent text-white font-semibold text-lg
        rounded-full border-2 border-white
        hover:bg-white/15 hover:-translate-y-1
        hover:shadow-[0_8px_28px_rgba(0,0,0,0.3)]
        focus:outline-none focus:ring-2 focus:ring-white/60
        focus:ring-offset-2 focus:ring-offset-black/50
        active:scale-[0.98] active:translate-y-0
        transition-all duration-200 ease-out
      ">Watch Demo</button>
    </div>
  </div>

  {/* Scroll indicator */}
  <div className="absolute bottom-8 left-1/2 -translate-x-1/2
    flex flex-col items-center gap-2 text-white/70 animate-bounce">
    <span className="text-sm">Scroll to explore</span>
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
        d="M19 14l-7 7m0 0l-7-7m7 7V3" />
    </svg>
  </div>
</section>

Philosophy

Do & Don't

Fullscreen Hero is a high-impact pattern — misuse destroys credibility instantly. These rules are drawn directly from the style definition.

Do

Use h-screen or min-h-screen — never fixed pixel heights
object-cover on all background images — never object-contain
Always add gradient or solid overlay — text on raw imagery is forbidden
Center content with relative z-10 and max-width constraint
Add scroll indicator — users need visual affordance to scroll
Mute video autoplay — sound on autoplay is a UX failure
Provide image fallback poster for video backgrounds
Primary CTA: hover:-translate-y-1 + shadow burst (Gravity Focus)
Feature cards: group class + hover:-translate-y-2 (Floating Glass)
Icon container: group-hover:scale-110 transition-transform
All buttons: active:scale-[0.98] — tactile confirmation required

Don't

No text directly on busy backgrounds without overlay
No low-quality or pixel-stretched images
No ignoring mobile — always test at 375px viewport width
No content filling the entire viewport with no breathing room
No autoplaying video with sound — ever, without exception
No omitting active:scale-[0.98] — dark overlay removes haptic cues
No cards without group class — icon micro-animation breaks
No z-index lower than z-10 for the content layer
No fixed pixel heights for the hero container
No omitting the scroll indicator — it is a primary UX affordance

First Impression

You have under 2 seconds

Fullscreen heroes get one job: grab attention before the visitor decides to leave. Every pixel fights for that outcome. No waste. No decoration for its own sake.

Readable Always

Contrast is non-negotiable

Any image that fails WCAG AA without an overlay is the wrong image choice. The overlay is not cosmetic — it is load-bearing infrastructure for usability.

Cinematic Motion

Subtle is the operative word

Ken Burns slow zoom, smooth entry animations, gentle scroll indicators. Anything that vibrates or flashes without purpose is strictly forbidden in this layout.

Scale & Pairings

Responsive rules & compatible styles

Fullscreen Hero is a layout — it pairs with a visual style for complete identity. It also must adapt gracefully across viewport sizes.

Responsive breakpoints

Mobile (< 768px)

text-5xl headline — down from 7xl+
Stacked CTA buttons: flex-col
Hide or pause video — show poster
Simpler overlay: solid preferred
Hamburger menu in nav

Tablet (768px – 1280px)

text-6xl headline
Side-by-side CTAs: sm:flex-row
Video shown if bandwidth allows
Full navigation visible
Feature cards 2-column

Desktop (> 1280px)

text-7xl to 8xl headline
All animations fully active
Ken Burns on background
Full gradient overlay complexity
Feature cards 3–4 column

Compatible visual styles

Glassmorphism

Frosted glass cards float directly over the hero image

Modern Gradient

Gradient fills become the background itself — no photo needed

Cyberpunk Neon

Neon glow typography on the deep dark canvas

Minimalist Flat

Clean bold type over subtle gradient backgrounds

Dark Mode

Natural fit — dark overlays are already dark mode

Capture EveryFirst Second.

Overlay variants

Hero Headline Text

Layer stack

Background options

Animation & Interaction Rules

Feature Title

Secure by Default

Glassmorphism feature grid

Blazing Fast

Secure by Default

Global CDN

Auto-Scaling

Ready-to-use snippets

Do & Don't

Do

Don't

First Impression

Readable Always

Cinematic Motion

Responsive rules & compatible styles

Capture EveryFirst Second.

Overlay variants

Hero Headline Text

Layer stack

Background options

Animation & Interaction Rules

Feature Title

Secure by Default

Glassmorphism feature grid

Blazing Fast

Secure by Default

Global CDN

Auto-Scaling

Ready-to-use snippets

Do & Don't

Do

Don't

First Impression

Readable Always

Cinematic Motion

Responsive rules & compatible styles

Capture Every
First Second.

Capture Every
First Second.