'use client'; import { useState, useRef } from 'react'; import { motion, useTransform, useScroll, Variants } from 'motion/react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import LustreText from '@/components/ui/lustretext'; import { useTheme } from 'next-themes'; import Globe from '@/components/ui/globe'; import { cn } from '@/lib/utils'; const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.4, duration: 0.8, }, }, }; const textVariants: Variants = { hidden: { y: 40, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: 'spring' as const, stiffness: 120, damping: 15, }, }, }; declare module '@/components/ui/badge' { interface BadgeProps { shiny?: boolean; shinySpeed?: number; } } interface HeroUIProps { title?: string; subtitle?: string; badgeText?: string; primaryCTA?: string; secondaryCTA?: string; features?: string[]; className?: string; globeBaseColor?: { light: [number, number, number]; dark: [number, number, number]; }; globeMarkerColor?: { light: [number, number, number]; dark: [number, number, number]; }; globeGlowColor?: { light: [number, number, number]; dark: [number, number, number]; }; } export default function HeroUI({ title = 'ScrollX UI', subtitle = 'Where Interactions Spark Joy', badgeText = '✨ Now Open Source', primaryCTA = 'Get Started', secondaryCTA = 'Documentation', features = [ 'TypeScript First', 'Dark Mode', '100% Customizable', 'MIT Licensed', ], className = '', globeBaseColor = { light: [0.98, 0.98, 0.98], dark: [0.12, 0.12, 0.12], }, globeMarkerColor = { light: [0.2, 0.5, 0.9], dark: [0.1, 0.8, 1], }, globeGlowColor = { light: [0.3, 0.3, 0.3], dark: [1, 1, 1], }, }: HeroUIProps) { const { theme } = useTheme(); const [mounted] = useState(true); const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end start'], }); const y = useTransform(scrollYProgress, [0, 1], ['0%', '30%']); if (!mounted) return null; return (

{badgeText} {title} {subtitle.includes('Interactions') ? ( <> Where{' '} {' '} Spark Joy ) : ( subtitle )} Animated, accessible, and customizable components built with{' '} Framer Motion {' '} and{' '} Tailwind CSS

{features.map((text) => ( {text} ))}

); }

Hero Section

Installation