"use client"; import { useMemo, useRef } from "react"; import { motion, useMotionTemplate, useMotionValue, useSpring, useTransform, } from "framer-motion"; import { ArrowUpRight, Star } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; /** * CometCard, a 3D tilt card with cursor parallax and a comet/aurora sheen * that sweeps across the surface on a continuous loop. It looks alive at rest * (the sweep + aurora drift never stop) and gains depth + a cursor-tracked * glow on hover. */ export function CometCard({ children, className, }: { children: React.ReactNode; className?: string; }) { const ref = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); const spring = { stiffness: 160, damping: 20, mass: 0.4 }; const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [9, -9]), spring); const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-9, 9]), spring); const glowX = useSpring(useTransform(x, [-0.5, 0.5], [18, 82]), spring); const glowY = useSpring(useTransform(y, [-0.5, 0.5], [8, 74]), spring); const pointerGlow = useMotionTemplate`radial-gradient(420px circle at ${glowX}% ${glowY}%, rgba(124,108,255,0.20), transparent 68%)`; function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; x.set((e.clientX - rect.left) / rect.width - 0.5); y.set((e.clientY - rect.top) / rect.height - 0.5); } function onMouseLeave() { x.set(0); y.set(0); } return (

{/* base wash */}

{/* slow aurora drift, keeps the card alive at rest */} {/* cursor-tracked glow */} {/* content */}

{children}

{/* comet aurora sheen, sweeps across the whole surface on a loop */} {/* comet head + tail streak */} {/* glossy rim highlight */}

); } /* ------------------------------ Demo ------------------------------ */ type Twinkle = { left: number; top: number; size: number; delay: number; dur: number; }; export default function Demo() { const stars = useMemo(() => { const seed = (i: number, k: number) => Math.abs(Math.sin((i + 1) * 12.9898 + k * 78.233)) % 1; const round = (n: number) => Math.round(n * 1000) / 1000; return Array.from({ length: 11 }, (_, i) => ({ left: round(seed(i, 1) * 100), top: round(seed(i, 2) * 66), size: round(0.8 + seed(i, 3) * 1.6), delay: round(seed(i, 4) * 3.5), dur: round(2.6 + seed(i, 5) * 2.8), })); }, []); return (

{/* hero visual */}

{/* twinkling starfield */} {stars.map((s, i) => ( ))} {/* pedestal glow under the orb */}

{/* the product, an aurora glass orb, rendered in pure CSS */}

{/* specular highlight */}

{/* status badge */}

In stock

{/* body */}

Ambient Lighting 4.9 · 128

Halo Aurora Lamp

A hand-blown glass orb that drifts your room through slow aurora light. App-tuned scenes, 16M colors, USB-C.

$189 $249

); }

Comet Card

Halo Aurora Lamp