"use client"; import { useRef, useState } from "react"; import { motion, useMotionValue, useSpring, useTransform, } from "framer-motion"; import { MapPin, ArrowUpRight } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; /** * A product/link card that tilts back in 3D on hover while a glowing map pin * and its floating label rise above the surface. At rest it keeps a slow idle * float so the perspective stays legible in a static preview. */ export function ThreeDPin({ label, children, className, }: { label: string; children: React.ReactNode; className?: string; }) { const ref = useRef(null); const [hovered, setHovered] = useState(false); const px = useMotionValue(0); const rotateY = useSpring(useTransform(px, [-0.5, 0.5], [-14, 14]), { stiffness: 150, damping: 18, mass: 0.4, }); function onMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; px.set((e.clientX - rect.left) / rect.width - 0.5); } function onLeave() { setHovered(false); px.set(0); } return (

{/* padded block reserves vertical room so the rising pin is never clipped */}

setHovered(true)} onMouseMove={onMove} onMouseLeave={onLeave} className="relative" > {/* ambient floor glow */} {/* tilt + idle float layer */} {/* mouse yaw layer */} {/* thin bright top edge */}

{children}

); } function PinOverlay({ hovered, label }: { hovered: boolean; label: string }) { return (

{/* floating label + pin head */}

{label}

{/* connecting beam */} {/* dropped-pin ground marker with radar ripple */}

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

{/* mini product preview, gently floating */}

React components

Motion that feels engineered

Drop-in cards, heroes, and effects tuned to sixty frames a second. Ship the interface and skip the design review.

Free and Pro tiers Explore

); }

3D Pin

Motion that feels engineered