Animated Hero Section

Heroes 80

About

Animated Roadmap This component visualizes a series of milestones on a path, with animations that trigger on scroll. It's designed to be highly reusable—you can pass any number of milestones with different statuses and positions.

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

Code

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

Usage.tsx

import { AnimatedGlobeHero } from "@/components/ui/animated-hero-section-2"; // Adjust the import path

export default function HeroDemo() {
  const words = ["map builder", "data platform", "geospatial tool"];

  return (
    <div className="w-full">
      <AnimatedGlobeHero
        titlePrefix="Your all-in-one"
        animatedWords={words}
        subtitle="Atlas is how teams make maps and perform geospatial analysis together. Create, collaborate, share — all under one roof."
        ctaText="Sign up for free"
        ctaLink="#"
        badgeText="🎉 #1 Product of the Day"
        globeSrc="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-UbsvWWn2C9JrFY23BSpGoAekVwkvPX.png&w=320&q=75"
      />
    </div>
  );
}