'use client' import { Suspense, lazy, useState, useEffect, useRef, memo } from 'react' const Spline = lazy(() => import('@splinetool/react-spline')) const SCENE = 'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode' const CSS = ` @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400&display=swap'); .ph-root *, .ph-root *::before, .ph-root *::after { box-sizing: border-box; } @keyframes ph-spin { to { transform: rotate(360deg); } } @keyframes ph-spinrev { to { transform: rotate(-360deg); } } @keyframes ph-fadeup { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } } @keyframes ph-fadein { from { opacity:0; } to { opacity:1; } } @keyframes ph-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } } @keyframes ph-glow { 0%,100% { opacity:.5; } 50% { opacity:.85; } } @keyframes ph-blink { 0%,100% { opacity:1; } 50% { opacity:0; } } @keyframes ph-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(99,220,190,.4); } 70% { box-shadow:0 0 0 6px rgba(99,220,190,0); } } @keyframes ph-bar { from { transform:scaleX(0); } to { transform:scaleX(1); } } @keyframes ph-card-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes ph-ring1 { to { transform:rotate(360deg); } } @keyframes ph-ring2 { to { transform:rotate(-360deg); } } /* Buttons */ .ph-btn-p { transition: transform .2s ease, box-shadow .25s ease !important; } .ph-btn-p:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 40px rgba(99,220,190,.32) !important; } .ph-btn-s { transition: color .2s ease, border-color .2s ease !important; } .ph-btn-s:hover { color: #fff !important; border-color: rgba(255,255,255,.3) !important; } /* Tabs */ .ph-tab { transition: color .18s ease !important; } .ph-tab:hover { color: rgba(255,255,255,.65) !important; } /* Pills */ .ph-pill { transition: background .2s, border-color .2s !important; } .ph-pill:hover { background: rgba(99,220,190,.18) !important; border-color: rgba(99,220,190,.4) !important; } /* Contain left column so mouse re-renders don't touch its layout */ .ph-left { contain: layout style; } /* Tabular nums for counters — no width jump */ .ph-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } ` // ─── Spline fallback loader ─────────────────────────────────────────────────── function Loader() { return (

) } const WORDS = ['Templates', 'Center', 'Premium', 'Compoent'] const LONGEST = WORDS.reduce((a, b) => b.length > a.length ? b : a, '') const Typewriter = memo(function Typewriter() { const [wIdx, setWIdx] = useState(0) const [chars, setChars] = useState(0) const [del, setDel] = useState(false) useEffect(() => { const word = WORDS[wIdx] const delay = del ? 38 : chars === word.length ? 1600 : 75 const t = setTimeout(() => { if (!del && chars === word.length) { setDel(true); return } if (del && chars === 0) { setDel(false); setWIdx(i => (i + 1) % WORDS.length); return } setChars(c => del ? c - 1 : c + 1) }, delay) return () => clearTimeout(t) }, [chars, del, wIdx]) return ( /* Invisible ghost text holds the max width — visible text overlays it */ {/* Width anchor — invisible, always full longest word */} {LONGEST} {/* Actual typed text — absolutely positioned so it never affects width */} {WORDS[wIdx].slice(0, chars)} | ) }) // ─── Metric — tabular nums + fixed min-width prevents digit-count reflow ────── const Metric = memo(function Metric({ value, suffix, label }: { value: number; suffix: string; label: string }) { const [v, setV] = useState(0) const ref = useRef(null) const started = useRef(false) useEffect(() => { const el = ref.current; if (!el) return const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting && !started.current) { started.current = true let cur = 0 const step = value / 48 const id = setInterval(() => { cur += step if (cur >= value) { setV(value); clearInterval(id) } else setV(Math.floor(cur)) }, 18) } }, { threshold: .4 }) obs.observe(el) return () => obs.disconnect() }, [value]) // digits of max value — pad to that many chars so width never changes const digits = String(value).length const padded = String(v).padStart(digits, '0') return (

{padded} {suffix}

{label}

) }) // ─── Ticker ─────────────────────────────────────────────────────────────────── const TICKS = ['Spatial UI','3D Motion','WebGL','Spline','Immersive UX','React','Interactive','Next-Gen Web','Animation','Physics'] const Ticker = memo(function Ticker() { const items = [...TICKS, ...TICKS] return (

{items.map((t, i) => (

◆ {t.toUpperCase()}

))}

) }) // ─── Right column — owns all mouse parallax ────────────────────────────────── function RightColumn({ loaded }: { loaded: boolean }) { const [m, setM] = useState({ x: 0, y: 0 }) useEffect(() => { const h = (e: MouseEvent) => setM({ x: (e.clientX / window.innerWidth - .5) * 2, y: (e.clientY / window.innerHeight - .5) * 2, }) window.addEventListener('mousemove', h, { passive: true }) return () => window.removeEventListener('mousemove', h) }, []) return (

{/* Left vignette blends into left column */}

{/* 3D scene — parallax only inside this column */}

{/* SVG decorative rings — spin only, no parallax so no layout cost */} {/* Floating card — stack pills — parallax */}

BUILT WITH

{['React','Spline','WebGL'].map((s, i) => ( {s} ))}

) } // ─── Main ───────────────────────────────────────────────────────────────────── export default function PremiumHero() { const [loaded, setLoaded] = useState(false) const [tab, setTab] = useState(0) useEffect(() => { const t = setTimeout(() => setLoaded(true), 80); return () => clearTimeout(t) }, []) const TABS = [ { label:'Overview', content:'Drop-in 3D components engineered for real products. Configure via props, ship same day.' }, { label:'Features', content:'Mouse parallax · Spline integration · 60fps · SSR-safe · TypeScript · Zero UI deps.' }, { label:'Customize', content:'Swap scenes, colors, and copy through a clean props API. Dark & light tokens included.' }, ] return (

Hero Section