Hero Section
hero#loader#animation
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Hero component
About 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.
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
.navbarhasaria-label="Main navigation", sound button hasaria-label="Unmute"- ARIA expanded
- Menu button uses
aria-expandedto indicate drawer open/closed state - Reduced motion
prefers-reduced-motion: reducekills 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
Customise it with AI
Open Hero Section in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the hero is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Social Flip
VanillaReact
Square social icon buttons with a 3D flip animation on hover — each icon sits in a rounded-square button that inverts its background and rotates the icon 360 degrees via a rotateY transform, fully token-driven and design-system agnostic.
#social#icons#flip
Modal — Aperture
VanillaReact
An accessible observatory-style dialog that opens through an animated circular aperture, with keyboard support and light and dark themes.
#modal#dialog#animation
Modal — Bottom Sheet
VanillaReact
An accessible mobile-app bottom sheet that springs up from the bottom edge with a grab handle, an amount summary, and list-rows instead of a paragraph — a fintech payment-confirmation sheet themed by the Neovault design system (inspired by Revolut), with a full-width pill CTA and full keyboard.
#modal#dialog#animation
Messaging
VanillaReact
A real-time messaging interface with conversation threads, chat bubbles, typing indicators, and simulated API integration — fully token-driven and design-system agnostic.
#messaging#chat
Correspondence Dropdown Menu
VanillaReact
A porcelain-studio WAI-ARIA menu-button dropdown: a glazed sheet with a second slab peeking from beneath, uppercase running heads, double-rule dividers, stamped mono keycap hints, petrol glaze-wash row states and full keyboard navigation — themed as a studio bureau's correspondence menu.
#dropdown-menu#menu
Pricing Cards
VanillaReact
A three-tier Atheros AI Builder pricing showcase with a highlighted "Most Popular" plan, monthly AI-credit badges, gradient gem icons, and a dark/light theme toggle — fully token-driven and design-system agnostic.
#pricing#cards
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
