"use client"; import { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { ArrowRight, Sparkles, TrendingUp } from "lucide-react"; import { cn } from "@/lib/utils"; export function SplitHero({ eyebrow = "New", headline = "Ship interfaces people remember.", subhead = "A component system that turns a plain page into something considered. Copy, paste, and launch in an afternoon.", primaryCta = "Get started", secondaryCta = "See components", className, }: { eyebrow?: string; headline?: string; subhead?: string; primaryCta?: string; secondaryCta?: string; className?: string; }) { const ref = useRef(null); const mx = useMotionValue(0); const my = useMotionValue(0); const rx = useSpring(useTransform(my, [-60, 60], [10, -10]), { stiffness: 150, damping: 18, }); const ry = useSpring(useTransform(mx, [-60, 60], [-12, 12]), { stiffness: 150, damping: 18, }); function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; mx.set(e.clientX - rect.left - rect.width / 2); my.set(e.clientY - rect.top - rect.height / 2); } return (

{ mx.set(0); my.set(0); }} className={cn( "relative grid h-full w-full grid-cols-1 items-center gap-6 overflow-hidden rounded-2xl border border-line bg-panel px-8 py-6 sm:grid-cols-[1.1fr_1fr]", className )} > {/* ambient glow */}

{/* left: copy */}

{eyebrow} {headline} {subhead}

{/* right: floating product card with mouse-tilt */}

{/* header */}

{/* stat */}

$128,420

+18.2%

{/* mini bar chart */}

{[38, 55, 42, 70, 60, 88, 74].map((h, i) => ( ))}

{/* rows */}

{[70, 45].map((w, i) => (

))}

); } export default function Demo() { return (

); }

Split Hero

Ship interfaces people remember.