"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { motion, type Transition } from "framer-motion"; import { MousePointer2 } from "lucide-react"; import { cn } from "@/lib/utils"; /** * PointerHighlight, wraps a word (or short phrase) and draws a * hand-drawn-style rectangle around it on a gentle, endless loop, while a * little cursor glides in to the corner and taps. A soft brand wash sits * behind the word so the highlight reads as intentional even between draws. * * The reusable component measures its own children, so it adapts to any word. * All animation loops share one `duration`, keeping the box, wash and pointer * in perfect sync. Nothing depends on hover, it is alive at rest. */ export type PointerHighlightProps = { children: React.ReactNode; /** Stroke color of the drawn rectangle. */ color?: string; /** Soft halo behind the stroke. */ glowColor?: string; /** Full loop length in seconds. */ duration?: number; /** Padding (px) between the word and the drawn box. */ pad?: number; className?: string; pointerClassName?: string; }; // Round any float that lands in a DOM attribute → no hydration drift. const r2 = (n: number) => Math.round(n * 100) / 100; const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1]; export function PointerHighlight({ children, color = "#7c6cff", glowColor = "rgba(91,140,255,0.55)", duration = 3.4, pad = 6, className, pointerClassName, }: PointerHighlightProps) { const ref = useRef(null); const [dims, setDims] = useState({ w: 0, h: 0 }); useEffect(() => { const el = ref.current; if (!el) return; const measure = () => { const rect = el.getBoundingClientRect(); setDims({ w: Math.round(rect.width), h: Math.round(rect.height) }); }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); const ready = dims.w > 0; const stroke = 3; // inset so the stroke + glow stay inside the svg box const boxW = dims.w + pad * 2; const boxH = dims.h + pad * 2; const radius = 10; // Hand-drawn rounded rectangle: traced clockwise from the top-left corner, // overshooting past the start along the top edge for a marker-pen crossover. const path = useMemo(() => { const iw = boxW - stroke * 2; const ih = boxH - stroke * 2; if (iw <= 0 || ih <= 0) return ""; const rr = Math.max(4, Math.min(radius, ih / 2 - 1, iw / 2 - 1)); const over = Math.min(18, iw * 0.28); return [ `M ${r2(rr)} 0`, `H ${r2(iw - rr)}`, `Q ${r2(iw)} 0 ${r2(iw)} ${r2(rr)}`, `V ${r2(ih - rr)}`, `Q ${r2(iw)} ${r2(ih)} ${r2(iw - rr)} ${r2(ih)}`, `H ${r2(rr)}`, `Q 0 ${r2(ih)} 0 ${r2(ih - rr)}`, `V ${r2(rr)}`, `Q 0 0 ${r2(rr)} 0`, `H ${r2(Math.min(iw - rr, rr + over))}`, ].join(" "); }, [boxW, boxH]); // Bottom-right corner of the drawn box, in the wrapper's coordinate space. const cornerX = dims.w + pad - stroke; const cornerY = dims.h + pad - stroke; const boxTransition: Transition = { duration, ease: EASE_OUT, times: [0, 0.3, 0.88, 1], repeat: Infinity, }; return ( {/* soft highlighter wash behind the word, keeps the accent present */} {ready && ( )} {children} {/* drawn rectangle */} {ready && path && ( )} {/* cursor that glides to the corner and taps */} {ready && ( )} ); } export default function Demo() { return (

{/* ambient brand glow so the panel reads premium at rest */}

The Lumenite way

Design that feels
effortless .

Motion, spacing, and type, tuned until nothing on the page feels accidental.

); }

Design that feels effortless .

Design that feels
effortless .

Pointer Highlight

Design that feelseffortless.

Design that feels
effortless.