"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { motion, useMotionTemplate, useMotionValue, useSpring, useTransform, } from "framer-motion"; import { Search } from "lucide-react"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------ */ /* Lens: a circular magnifier that enlarges whatever sits under it. */ /* It drifts across the panel on a loop at rest, and follows the */ /* cursor on hover. The scene is rendered twice: once as the base, */ /* once inside the clipped lens, scaled up about the point under the */ /* lens center so the two copies stay perfectly registered. */ /* ------------------------------------------------------------------ */ type LensProps = { children: React.ReactNode; className?: string; /** Lens radius in px. */ radius?: number; /** Magnification factor. */ zoom?: number; }; const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v)); export function Lens({ children, className, radius = 82, zoom = 1.9, }: LensProps) { const ref = useRef(null); // Panel size, measured on the client. Defaults keep the first paint // deterministic so hydration never mismatches. const [size, setSize] = useState<{ w: number; h: number }>({ w: 640, h: 380, }); const sizeRef = useRef(size); const hoveringRef = useRef(false); // Raw target (updated by drift loop or cursor) -> spring for the glide. const targetX = useMotionValue(320); const targetY = useMotionValue(190); const x = useSpring(targetX, { stiffness: 90, damping: 18, mass: 0.6 }); const y = useSpring(targetY, { stiffness: 90, damping: 18, mass: 0.6 }); // Gentle scale bump while the cursor is inspecting. const hoverScale = useSpring(1, { stiffness: 220, damping: 22 }); // Lens top-left = center - radius. const lensX = useTransform(x, (v) => v - radius); const lensY = useTransform(y, (v) => v - radius); // Inner wrapper offset: puts the scene origin back at panel (0,0) // inside the lens-local coordinate space. const innerX = useTransform(x, (v) => radius - v); const innerY = useTransform(y, (v) => radius - v); // Magnify transform: scale about the scene origin, then translate so // the point beneath the lens center stays fixed. const magX = useTransform(x, (v) => (1 - zoom) * v); const magY = useTransform(y, (v) => (1 - zoom) * v); const magnify = useMotionTemplate`translate(${magX}px, ${magY}px) scale(${zoom})`; // Measure the panel and keep the ref/state in sync. useEffect(() => { const el = ref.current; if (!el) return; const measure = () => { const rect = el.getBoundingClientRect(); const next = { w: Math.round(rect.width), h: Math.round(rect.height), }; sizeRef.current = next; setSize(next); }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); // Idle drift loop. A slow Lissajous wander keeps the lens alive at // rest; pauses while the cursor is driving it. useEffect(() => { let raf = 0; let t = 0; let last = 0; const loop = (now: number) => { if (last === 0) last = now; const dt = Math.min(0.05, (now - last) / 1000); last = now; const { w, h } = sizeRef.current; if (!hoveringRef.current && w > 0 && h > 0) { t += dt; const bx = Math.max(0, w / 2 - radius - 14); const by = Math.max(0, h / 2 - radius - 14); const nx = w / 2 + Math.sin(t * 0.45) * bx * 0.86; const ny = h / 2 + Math.sin(t * 0.63 + 1.4) * by * 0.78; targetX.set(nx); targetY.set(ny); } raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [radius, targetX, targetY]); function onMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; const px = clamp(e.clientX - rect.left, radius + 6, rect.width - radius - 6); const py = clamp(e.clientY - rect.top, radius + 6, rect.height - radius - 6); targetX.set(px); targetY.set(py); } return (

{ hoveringRef.current = true; hoverScale.set(1.06); }} onMouseLeave={() => { hoveringRef.current = false; hoverScale.set(1); }} onMouseMove={onMove} className={cn( "relative overflow-hidden rounded-2xl border border-white/10 bg-[#080810]", "shadow-[0_30px_80px_-30px_rgba(0,0,0,0.9)]", className )} > {/* Base scene */}

{children}

{/* Lens */} {/* Magnified content, clipped to the circle */}

{children}

{/* Glass rim, refraction tint, specular highlight */}

{/* Chrome, stays crisp above the glass */}

Optical loupe

{zoom.toFixed(1)}×

); } /* ------------------------------------------------------------------ */ /* RidgeScene: the CSS/SVG art panel the lens inspects. */ /* Deterministic star field, layered gradient ridgeline, fine */ /* contour lines and tiny type so magnification reads clearly. */ /* ------------------------------------------------------------------ */ type Star = { x: number; y: number; r: number; o: number; twinkle: boolean; dur: number; delay: number; }; const seed = (i: number) => { const v = Math.sin(i * 127.1 + 311.7) * 43758.5453; return v - Math.floor(v); }; const round2 = (n: number) => Math.round(n * 100) / 100; function RidgeScene() { const uid = useId().replace(/:/g, ""); const sky = `sky-${uid}`; const sun = `sun-${uid}`; const bloom = `bloom-${uid}`; const r1 = `r1-${uid}`; const r2 = `r2-${uid}`; const r3 = `r3-${uid}`; const haze = `haze-${uid}`; const blurId = `blur-${uid}`; const stars = useMemo(() => { return Array.from({ length: 20 }, (_, i) => { const twinkle = i % 4 === 0; return { x: round2(seed(i + 1) * 600), y: round2(10 + seed(i + 9) * 220), r: round2(0.5 + seed(i + 3) * 1.3), o: round2(0.25 + seed(i + 5) * 0.6), twinkle, dur: round2(2.6 + seed(i + 7) * 3.2), delay: round2(seed(i + 11) * 3), }; }); }, []); return ( ); } /* ------------------------------------------------------------------ */ /* Demo */ /* ------------------------------------------------------------------ */ export default function Demo() { return (

); }