Hero Sections

A collection of beautiful, animated hero sections for your landing pages. Built with Framer Motion for smooth animations and stunning visual effects.

Gradient Hero

A vibrant hero section with animated gradient orbs, grid pattern overlay, and smooth entrance animations.

Features:

• Animated gradient background orbs
• Subtle grid pattern overlay
• Stats section with staggered animations
• Gradient text effects
• CTA buttons with hover effects

Spotlight Hero

An interactive hero with a mouse-following spotlight effect and code preview card.

Features:

• Mouse-tracking spotlight effect
• Animated code preview mockup
• Floating feature badges
• Two-column responsive layout
• Subtle background grid

Grid Hero

A futuristic hero with animated SVG grid lines and glowing orbs.

Features:

• Animated SVG grid lines
• Pulsing announcement badge
• Social proof avatars
• Gradient button hover effects
• Radial gradient mask

Particles Hero

A dynamic hero section with floating animated particles and 3D decorative elements.

Features:

• 50+ animated particles
• Email signup form
• Feature highlight cards
• Floating 3D elements
• Gradient overlays

Aurora Hero

A mesmerizing hero with aurora borealis/northern lights effect and twinkling stars.

Features:

• Multi-layer aurora animation
• Animated star field
• Gradient border buttons
• Feature checklist
• Brand showcase section

Minimal Hero

A clean, typography-focused hero with letter-by-letter text animation.

Features:

• Character-by-character text animation
• Browser mockup preview
• Floating feature badges
• Light/dark mode support
• Minimal aesthetic design

Usage

All hero sections are built with React and Framer Motion. Install the required dependencies:

npm install framer-motion lucide-react

Import and use any hero section:

import HeroGradient from '@/components/blocks/hero/hero-gradient';

export default function LandingPage() {
  return (
    <main>
      <HeroGradient />
      {/* Rest of your page */}
    </main>
  );
}

Customization

Each hero section is fully customizable:

• Colors: Update gradient colors in the Tailwind classes
• Content: Modify headlines, descriptions, and CTAs
• Animations: Adjust timing, delays, and easing in Framer Motion props
• Layout: Responsive by default, easily adjustable with Tailwind

Props Reference