Hero Sections That Capture Attention in 3 Seconds
The hero is the first — and often the only — thing visitors see. Research shows 53% of mobile users abandon a page that takes over 3 seconds to load, and the average visitor decides whether to stay or leave in under 3 seconds. We design hero sections that make those seconds count: clear value propositions, cinematic visuals, and purposeful motion that guide the eye to your call-to-action.
PATTERN VARIANTS
8 Hero Styles We Design
Each variant serves a different purpose. We help you choose the one that matches your business goal, audience, and brand personality.
Full-Screen Video Hero
A cinematic background video that fills the entire viewport, overlaid with headline, subhead, and a CTA. Creates immediate emotional impact and brand immersion.
Split-Layout Hero
The viewport divides into two columns — content on one side, visual on the other. Clean, structured, information-first.
Kinetic Typography Hero
Oversized, animated text dominates the viewport. Words rotate, morph, fade, or slide to deliver multiple messages in a single space.
Parallax Depth Hero
Multiple visual layers move at different speeds as the user scrolls, creating a sense of depth and immersion.
3D / WebGL Hero
Interactive 3D elements respond to mouse movement, scroll, or device gyroscope. Products rotate, environments shift, particles react.
Cinematic Reveal Hero
Content is hidden on load and revealed through a choreographed animation sequence — masks wipe, elements slide in, images scale from zero.
Interactive / Cursor-Reactive Hero
Visual elements respond to the user's mouse position or touch. Images distort, particles follow the cursor, gradients shift.
Gradient Mesh / Abstract Hero
Dynamic, fluid gradient backgrounds that shift and animate subtly. No photography — pure color and shape create the mood.
ANIMATIONS & EFFECTS
The Technology Behind Great Heroes
Every animation we implement serves a purpose — guiding attention, reinforcing brand personality, or improving comprehension.
GSAP ScrollTrigger
Links any animation to scroll position. Elements fade in, slide, scale, or transform as the user scrolls through the hero.
When to use: Scroll-driven narrative heroes, pinned hero-to-content transitions, staggered element reveals.
GSAP SplitText / TextPlugin
Splits headlines into individual characters, words, or lines, then animates each independently. Stagger, wave, typewriter effects.
When to use: Kinetic typography heroes, headline reveals, rotating value propositions.
Lottie Animations
Renders vector animations exported from After Effects as lightweight JSON files. Smooth, scalable, interactive illustrations.
When to use: Illustrated heroes, product feature animations, abstract brand moments, loading transitions.
Three.js / React Three Fiber
Renders real-time 3D graphics in the browser. Product models, particle systems, environmental scenes.
When to use: 3D product heroes, immersive brand experiences, interactive configurators, particle backgrounds.
CSS View Transitions
Native browser API for smooth page-to-page transitions. The hero morphs seamlessly when navigating between pages.
When to use: Multi-page sites where the hero changes between routes. Portfolio grids that expand into detail views.
Framer Motion
React animation library for declarative, physics-based motion. Layout animations, shared transitions, gesture-driven interactions.
When to use: React/Next.js projects needing spring physics, drag interactions, or layout animations between states.
IntersectionObserver + CSS
Lightweight, zero-dependency approach. Detects when elements enter the viewport and triggers CSS animations.
When to use: Simple fade-in reveals, slide-ups, scale effects. Performance-critical sites where adding a library is not justified.
BEST PRACTICES
Rules We Follow for Every Project
AWARD-WINNING EXAMPLES
Heroes That Set the Standard
The Renaissance Edition (Shopify)
Transforms product update announcements into an art gallery experience. Generative Renaissance-inspired paintings serve as the backdrop. The hero reveal is cinematographic — a slow, deliberate unveiling that rewards patience.
Bruno Simon Portfolio
Turns the entire homepage into a 3D environment controlled by a small vehicle. Navigation becomes gameplay. Built with Three.js, it demonstrates that the most memorable heroes break every conventional rule.
Stripe Homepage
The definition of clarity. Five words communicate the entire business. Animated product UI reinforces technical sophistication. A single CTA removes all friction. The hero loads in under 1 second.
Aptos Network
Dark theme with kinetic particle animations that respond to cursor movement. Creates a sense of entering a blockchain ecosystem. Typography does the heavy lifting while particles add atmosphere.
OUR PROCESS
How We Build It
Strategy & Research
Analyze analytics, audit competitor heroes, define the core action the visitor should take.
Wireframe & Concept
Present 2-3 hero concepts as low-fidelity wireframes. Pick a direction or combine the best elements.
Visual Design in Figma
Full-color, pixel-perfect hero at desktop, tablet, and mobile. Interactive prototype.
Motion Design
Define every animation: what moves, when, how fast, and why. Storyboard the sequence.
Development
Pixel-perfect implementation. GSAP, Three.js, Lottie. Lighthouse score of 90+ on mobile.
Testing & Optimization
Cross-browser testing, performance audit, A/B testing setup, analytics tracking.
RELATED PATTERNS
Explore More Page Patterns
Navigation Systems
The mega-menu, sticky header, and mobile drawer that sit above your hero.
Learn more →Social Proof
Testimonials and logo bars that often appear directly below the hero.
Learn more →Forms & Funnels
Multi-step forms and lead capture that convert hero traffic into leads.
Learn more →Card Layouts
Service and feature cards that typically follow the hero section.
Learn more →FAQ
Common Questions
How much does a custom hero section design cost?+
A standalone hero section design starts at $1,500-$3,000, which includes strategy, Figma design, and development. As part of a full website project, the hero is included in the overall design scope. Animated and 3D heroes cost more due to the additional motion and development work.
Can you redesign just my hero section without touching the rest of the site?+
Absolutely. Many clients start with a hero redesign because it has the highest impact on first impressions and conversion rates. We can redesign and develop your hero section as a standalone project while keeping the rest of your site intact.
How long does a hero section animation take to load?+
We optimize every hero for a Lighthouse performance score of 90 or above on mobile. Video heroes use compressed MP4/WebM (under 3MB) with poster fallbacks. 3D heroes use progressive loading. CSS and Lottie animations typically add zero perceptible load time.
Do animated heroes hurt SEO?+
Not when built correctly. We use semantic HTML (proper H1, alt text, structured data), server-side rendering for the text content, and ensure the hero loads fast. Google renders JavaScript — your animated content is indexed.
What if my visitors have slow connections or older devices?+
Every hero we build has graceful degradation. Reduced motion preferences are respected automatically. 3D heroes fall back to static images. Video heroes fall back to poster frames. The content always works, even on a 3G connection with JavaScript disabled.
Ready to Design a Hero That Converts?
Tell us about your project. We'll analyze your current hero, identify the highest-impact improvements, and propose a design direction — all in a free 30-minute consultation.