Pointer Highlight

"use client";
import { useEffect, useState } from "react";
import { PointerHighlight } from "@/lab/aceternity/ui/pointer-highlight";

export default function PointerHighlightDemo() {
  // The original plays once when scrolled into view; replay it so the card keeps moving.
  const [run, setRun] = useState(0);
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => setRun((r) => r + 1), 4500);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="@container relative flex h-full w-full items-center justify-center px-6">
      <div className="max-w-[80%] text-[clamp(1.1rem,5cqw,2.5rem)] leading-snug font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
        The best way to grow is to
        <PointerHighlight key={run}>
          <span>collaborate</span>
        </PointerHighlight>
      </div>
    </div>
  );
}