# Hero Section

> A cinematic game landing hero section with fullscreen video background, loading screen, top navigation bar, staggered entrance animations, and responsive layout — design-system agnostic.

- Category: Hero
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Dark mode: no
- Access: free (sign in to copy the code)
- Tags: loader, animation
- Page: https://builder.atheros.ai/components/hero-section
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_hero_section/preview-2b4be8946852.webp

## Features

- Fullscreen video background with autoplay, muted, loop
- Cinematic loading screen with animated progress bar — hides when video is buffered
- Top navigation bar with logo, nav links, and outlined CTA button
- Large display title with gradient accent line
- Right-side tagline and statistics panel
- Bottom action links with arrow icons
- Decorative gradient bottom line
- Staggered entrance animations (fade + slide) on hero reveal
- Dual-gradient video overlay for text readability
- Responsive breakpoints at 768px and 1024px
- All colors, spacing, and radii driven by design-system tokens
- Prefers-reduced-motion support for accessibility
- Mobile hamburger menu with fullscreen drawer overlay
- Sound toggle button to mute/unmute background video
- Dark-first design with cinematic video overlay

## Accessibility

- **ARIA labels** — `.navbar` has `aria-label="Main navigation"`, sound button has `aria-label="Unmute"`
- **ARIA expanded** — Menu button uses `aria-expanded` to indicate drawer open/closed state
- **Reduced motion** — `prefers-reduced-motion: reduce` kills all animations and transitions
- **Video** — Video is muted by default and decorative — sound toggle available
- **Semantic HTML** — `<nav>`, `<section>`, `<h1>` used for correct document structure

## Common questions

**Which frameworks is Hero Section available in?**

Hero Section ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Hero Section free?**

Yes. Hero Section is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Hero Section support dark mode?**

Hero Section ships a single light theme.

## Get the code

Preview Hero Section live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/hero-section

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt