Hero 54

Full-screen dark mode hero with animated Three.js cloud background, gradient text, logos ticker, and smooth floating effects.

Examples

DefaultSize: 1280px

Installation

Other Hero Components

View all Hero components

Hero 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 41

Animated hero featuring a widescreen banner followed by a headline block and side column for subtitle and CTAs.

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.