"use client"; import React, { useRef, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { ArrowRight, Sparkles, Layout, Figma, Zap, ShieldCheck, Code2 } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface HeroSpatialCanvasProps { badgeText?: string; headlineMain?: string; headlineHighlight?: string; description?: string; inputPlaceholder?: string; ctaText?: string; onCtaSubmit?: (email: string) => void; className?: string; } const defaultProps: HeroSpatialCanvasProps = { badgeText: "UIXTRA ECOSYSTEM 2.0", headlineMain: "Build interfaces that", headlineHighlight: "defy expectations.", description: "A meticulously crafted library of React components. Fully responsive, highly animated, and perfectly adaptable to your brand's light and dark themes.", inputPlaceholder: "Enter your email address...", ctaText: "Get Early Access", }; export default function HeroSpatialCanvas(props: HeroSpatialCanvasProps) { const { badgeText, headlineMain, headlineHighlight, description, inputPlaceholder, ctaText, onCtaSubmit, className, } = { ...defaultProps, ...props }; const containerRef = useRef(null); const [inputValue, setInputValue] = React.useState(""); // --- Parallax Mouse Tracking --- const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springConfig = { damping: 40, stiffness: 150, mass: 0.5 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); // Depth Layers const layer1X = useTransform(smoothX, [-0.5, 0.5], [-20, 20]); const layer1Y = useTransform(smoothY, [-0.5, 0.5], [-20, 20]); const layer2X = useTransform(smoothX, [-0.5, 0.5], [40, -40]); const layer2Y = useTransform(smoothY, [-0.5, 0.5], [40, -40]); const layer3X = useTransform(smoothX, [-0.5, 0.5], [-60, 60]); const layer3Y = useTransform(smoothY, [-0.5, 0.5], [60, -60]); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!containerRef.current) return; const { left, top, width, height } = containerRef.current.getBoundingClientRect(); const x = (e.clientX - left) / width - 0.5; const y = (e.clientY - top) / height - 0.5; mouseX.set(x); mouseY.set(y); }; window.addEventListener("mousemove", handleMouseMove); return () => window.removeEventListener("mousemove", handleMouseMove); }, [mouseX, mouseY]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (inputValue) onCtaSubmit?.(inputValue); }; return (

{/* --- Background Elements --- */}

{/* Adaptable Grid */}

{/* Soft Ambient Glows (Adaptable) */}

{/* --- Floating Parallax Elements (Hidden on small mobile for clarity) --- */}

{/* Element 1: React Component Card */}

Component

Navbar.tsx

{/* Element 2: Performance Stat */}

100

Lighthouse

SEO & Perf.

{/* Element 3: Security / Feature Pill */}

Enterprise Ready

Production safe code

{/* Element 4: Floating Icon */}

{/* --- Central Content --- */}

{badgeText} {headlineMain}
{headlineHighlight} {/* Hand-drawn style underline */} {description} {/* --- Unified Command/Email Bar CTA --- */}

setInputValue(e.target.value)} placeholder={inputPlaceholder} className="flex-1 bg-transparent border-none focus:outline-none text-sm @md:text-base text-neutral-900 dark:text-white placeholder:text-neutral-400 min-w-0" /> {/* Trust Indicators */} Auto-Layout

React 19

Tailwind v4

); }