Cursor Highlight

1'use client';
2 
3import React, { useRef, useEffect, useState } from 'react';
4import { motion, useInView } from 'motion/react';
5import { cn } from '@/lib/utils';
6 
7interface CursorHighlightProps {
8  text?: string;
9  children?: React.ReactNode;
10  className?: string;
11  gradient?: string;
12  direction?: 'left' | 'right' | 'top' | 'bottom';
13  animate?: boolean;
14  duration?: number;
15  showPointer?: boolean;
16  pointerDuration?: number;
17  pointerClassName?: string;
18  containerClassName?: string;
19  rectangle?: boolean | string;
20}
21 
22const Pointer = (props: React.SVGProps<SVGSVGElement>) => (
23  <svg
24    stroke='currentColor'
25    fill='currentColor'
26    strokeWidth='1'
27    strokeLinecap='round'
28    strokeLinejoin='round'
29    viewBox='0 0 16 16'
30    height='1em'
31    width='1em'
32    xmlns='http://www.w3.org/2000/svg'
33    {...props}
34  >
35    <path d='M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z'></path>
36  </svg>
37);
38 
39interface PointerAnim {
40  initial: { x: number; y: number; rotate: number };
41  animate: { x: number; y: number; rotate: number };
42}
43 
44export function CursorHighlight({
45  text,
46  children,
47  className,
48  gradient = 'from-purple-800 via-purple-600 to-purple-800',
49  direction = 'left',
50  animate = false,
51  duration = 2,
52  showPointer = false,
53  pointerDuration = 1,
54  pointerClassName,
55  containerClassName,
56  rectangle = false,
57}: CursorHighlightProps) {
58  const containerRef = useRef<HTMLDivElement>(null);
59  const isInView = useInView(containerRef, { amount: 0.3, once: false });
60  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
61  const [resetKey, setResetKey] = useState(0);
62 
63  useEffect(() => {
64    const element = containerRef.current;
65    if (element) {
66      const { width, height } = element.getBoundingClientRect();
67      setDimensions({ width, height });
68    }
69 
70    const resizeObserver = new ResizeObserver((entries) => {
71      for (const entry of entries) {
72        const { width, height } = entry.contentRect;
73        setDimensions({ width, height });
74      }
75    });
76 
77    if (element) resizeObserver.observe(element);
78    return () => {
79      if (element) resizeObserver.unobserve(element);
80    };
81  }, [text, children]);
82 
83  useEffect(() => {
84    if (!isInView) {
85      const timeout = setTimeout(() => setResetKey((k) => k + 1), 200);
86      return () => clearTimeout(timeout);
87    }
88  }, [isInView]);
89 
90  const content = text || children;
91// … truncated