Animated hero featuring a widescreen banner followed by a headline block and side column for subtitle and CTAs.
Examples
Installation
Other Hero Components
View all Hero componentsHero 01
Minimal split-layout hero with sticky heading alongside content, perfect for content pages like About or Mission.
Hero 03
Animated text-only center-aligned hero with title, subtitle, and CTAs.
Hero 04
Animated text-only left-aligned hero with title, subtitle, and CTAs.
Hero 08
Centered hero with prominent animated typewriter effect as the primary element, clean minimal design.
Hero 09
Text-only left-aligned hero with animated typewriter title, subtitle, and CTAs.
Hero 10
Text-only center-aligned hero with animated flip-up alternating title, subtitle, and CTAs.
Hero 12
Animated split hero with text (title, subtitle, CTAs) on the left and media (image or video) on the right.
Hero 13
Animated split hero with text (title, subtitle, CTAs) on the right and media (image or video) on the left.
Hero 17
Animated full-bleed split hero with text content on the right and image on the left, featuring smooth fade-in effects.
Hero 19
Animated full-bleed split hero with text content on the left and image on the right, featuring smooth fade-in effects.
Hero 21
Animated overlay hero with left-aligned copy placed over a full-width background image and gradient for a dramatic first impression.
Hero 23
Animated full-bleed background hero with customizable dark overlay gradient, centrally aligned headline, subtitle text, and prominent call-to-action buttons.
Hero 25
Animated full-bleed background hero with customizable dark overlay gradient, left-aligned headline, subtitle text, and prominent call-to-action buttons.
Hero 27
Animated full-bleed background hero with center-aligned headline, subtitle text, and prominent call-to-action buttons over an image.
Hero 29
Animated full-bleed background hero with left-aligned headline, subtitle text, and prominent call-to-action buttons over an image.
Hero 31
Centered text hero with stacked CTAs that transitions into a full-width image preview beneath the copy.
Hero 33
Left-aligned hero that leads with copy and CTAs, followed by a full-width image reveal.
Hero 43
Animated hero featuring a widescreen banner below the headline block with centered alignment.
Hero 50
Interactive hero featuring tabbed interface with icon navigation, animated content switching, border beam effects, and dynamic screenshot previews beneath centered headline.
Hero 51
Full-screen dark mode hero with animated particle effects, gradient text, logos ticker, and radial background.
Hero 52
Full-screen dark mode hero with animated linked particle network, interactive hover effects, gradient text, and testimonials ticker.
Hero 53
Full-screen dark mode hero with immersive 3D galaxy background, interactive particle effects, gradient text, and logos ticker.
Hero 54
Full-screen dark mode hero with animated Three.js cloud background, gradient text, logos ticker, and smooth floating effects.