Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/animated-hero-section-2import { 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>
);
}