Hero Section

Heroes 830

About

Scroll-Triggered Image Animation Component This React component uses Framer Motion to create a scroll-linked animation effect. As the user scrolls, an image flies in from off-screen, accompanied by static text content. Error handling is included for image loading failures.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Section to your project and fits it to your theme.

Code

How Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ScrollFlyIn } from "@/components/ui/hero-section-3"; // Adjust path as needed

export default function ScrollFlyInDemo() {
  return (
    <div className="w-full bg-background text-foreground">
      <ScrollFlyIn
        imageUrl="https://cdn.21st.dev/assets/mirror/f8/f807350ced7c5e2b79dd250c7de73eebcd402442c40f562e3003c95752a75b5c.webp"
        imageAlt="Top view of a private jet flying across the screen"
      >
        {/* This is the static text content */}
        <div className="max-w-3xl mx-auto px-4 text-center">
          <p className="text-md font-semibold uppercase tracking-widest text-muted-foreground">
            Welcome to Airvoir
          </p>
          <h2 className="text-5xl md:text-7xl font-bold leading-tight mt-2">
            Where journeys become unforgettable
          </h2>
        </div>
      </ScrollFlyIn>
    </div>
  );
}