Components
Loading preview...
Dot Globe Hero – A modern, interactive 3D globe hero section built with React Three Fiber and Tailwind CSS. Perfect for SaaS landing pages, dashboards, or portfolios, this component adds a visually striking, tech-forward centerpiece that’s fully responsive, themeable, and reusable.
@chow-stack
npx shadcn@latest add https://21st.dev/r/chowlol202/globe-hero"use client";
import React from "react";
import { motion } from "framer-motion";
import { DotGlobeHero } from "@/components/ui/globe-hero";
import { ArrowRight, Zap } from "lucide-react";
export default function DotGlobeHeroDemo() {
return (
<DotGlobeHero
rotationSpeed={0.004}
className="bg-gradient-to-br from-background via-background/95 to-muted/10 relative overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-t from-background/50 via-transparent to-background/30" />
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary/3 rounded-full blur-3xl animate-pulse" />
<div className="relative z-10 text-center space-y-12 max-w-5xl mx-auto px-6 py-12">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="space-y-8"
>
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="relative inline-flex items-center gap-3 px-6 py-3 rounded-full bg-gradient-to-r from-primary/20 via-primary/10 to-primary/20 border border-primary/30 backdrop-blur-xl shadow-2xl"
>
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-primary/10 via-transparent to-primary/10 animate-pulse" />
<div className="w-2 h-2 bg-primary rounded-full animate-ping" />
<span className="relative z-10 text-sm font-bold text-primary tracking-wider uppercase">GLOBAL NETWORK</span>
<div className="w-2 h-2 bg-primary rounded-full animate-ping animation-delay-500" />
</motion.div>
<div className="space-y-6">
<motion.h1
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.3 }}
className="text-5xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tighter leading-[0.85] select-none"
style={{ fontFamily: 'Inter, system-ui, sans-serif' }}
>
<span className="block font-light text-foreground/70 mb-3 text-4xl md:text-6xl lg:text-7xl">
Connect
</span>
<span className="block relative">
<span className="bg-gradient-to-br from-primary via-primary to-primary/60 bg-clip-text text-transparent font-black relative z-10">
the World
</span>
<div className="absolute inset-0 bg-gradient-to-br from-primary via-primary to-primary/60 bg-clip-text text-transparent font-black blur-2xl opacity-50 scale-105"
style={{ fontFamily: 'Inter, system-ui, sans-serif' }}>
the World
</div>
<motion.div
initial={{ width: 0 }}
animate={{ width: "100%" }}
transition={{ duration: 1.5, delay: 1.2, ease: "easeOut" }}
className="absolute -bottom-6 left-0 h-3 bg-gradient-to-r from-primary via-primary/80 to-transparent rounded-full shadow-lg shadow-primary/50"
/>
</span>
</motion.h1>
</div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.8 }}
className="max-w-3xl mx-auto space-y-4"
>
<p className="text-xl md:text-2xl text-muted-foreground leading-relaxed font-medium"
style={{ fontFamily: 'Inter, system-ui, sans-serif' }}>
Experience real-time global connectivity with our{" "}
<span className="text-foreground font-semibold bg-gradient-to-r from-primary/20 to-primary/10 px-2 py-1 rounded-md">
distributed network infrastructure
</span>
</p>
<p className="text-lg text-muted-foreground/80 leading-relaxed">
Monitor data flows, track performance, and scale across continents with unprecedented reliability.
</p>
</motion.div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1 }}
className="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4"
>
<motion.button
whileHover={{
scale: 1.05,
boxShadow: "0 20px 40px rgba(0,0,0,0.2), 0 0 25px hsl(var(--primary) / 0.3)",
y: -2
}}
whileTap={{ scale: 0.98 }}
className="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-primary via-primary to-primary/90 text-primary-foreground rounded-xl font-semibold text-lg shadow-xl hover:shadow-primary/30 transition-all duration-500 overflow-hidden border border-primary/20"
>
<div className="absolute inset-0 bg-gradient-to-r from-white/20 via-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent"
initial={{ x: "-100%" }}
whileHover={{ x: "100%" }}
transition={{ duration: 0.8 }}
/>
<span className="relative z-10 tracking-wide">Start Exploring</span>
<ArrowRight className="relative z-10 w-5 h-5 group-hover:translate-x-2 transition-transform duration-300" />
</motion.button>
<motion.button
whileHover={{
scale: 1.05,
backgroundColor: "hsl(var(--accent))",
borderColor: "hsl(var(--primary))",
boxShadow: "0 15px 30px rgba(0,0,0,0.1), 0 0 15px hsl(var(--primary) / 0.1)",
y: -2
}}
whileTap={{ scale: 0.98 }}
className="group relative inline-flex items-center gap-3 px-8 py-4 border-2 border-border/40 rounded-xl font-semibold text-lg hover:border-primary/40 transition-all duration-500 backdrop-blur-xl bg-background/60 hover:bg-background/90 shadow-lg overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<Zap className="relative z-10 w-5 h-5 group-hover:scale-110 group-hover:rotate-6 transition-all duration-300" />
<span className="relative z-10 tracking-wide">View Live Demo</span>
</motion.button>
</motion.div>
</div>
</DotGlobeHero>
);
}