Components
The HeroGlobe component is a visually striking hero section featuring an interactive 3D globe that represents global connectivity and innovation. It blends motion, depth, and modern design to capture attention instantly while symbolizing a worldwide reach. The globe rotates smoothly with subtle glow and particle effects, adapting beautifully to both dark and light themes. This component is perfect for landing pages that emphasize technology, global communities, or AI-driven platforms — combining aesthetics and performance to deliver an immersive first impression that feels both futuristic and professional.
Loading preview...
"use client";
import React from "react";
import { PulseDivider } from "@/components/ui/pulse-divider";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export default function PulseDividerDemo() {
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-background to-muted/30 p-10">
<Card className="max-w-3xl w-full border-border/60 shadow-xl">
<CardHeader>
<CardTitle className="text-center text-lg font-semibold">
Pulse Divider Showcase
</CardTitle>
</CardHeader>
<CardContent className="space-y-10">
<div className="text-center space-y-6">
<p className="text-sm text-muted-foreground">
A smooth glowing divider with animated motion and gradient effects.
Works beautifully in both light and dark themes.
</p>
<PulseDivider label="Glowing Gradient" />
<PulseDivider
label="Subtle Muted"
glow={false}
gradient={false}
color="#6b7280"
/>
<PulseDivider
label="Electric Blue"
color="#3B82F6"
gradient={false}
/>
<PulseDivider
label="Vertical Divider"
orientation="vertical"
className="h-40 mx-auto"
color="#16A34A"
/>
</div>
</CardContent>
</Card>
</div>
);
}