Variable Font And Cursor

import { useRef } from "react";
import { useMousePosition } from "@/components/hooks/use-mouse-position";
import { useMousePositionRef } from "@/components/hooks/use-mouse-position-ref";
import { VariableFontAndCursor } from "@/components/ui/variable-font-and-cursor";

function InteractiveFontDemo() {
  const containerRef = useRef<HTMLDivElement>(null);
  const { x, y } = useMousePosition(containerRef); // Для полосок
  const mousePositionRef = useMousePositionRef(containerRef); // Для текста

  return (
    <div
      className="w-full h-full rounded-lg items-center justify-center font-overusedGrotesk p-24 bg-background relative cursor-none overflow-hidden"
      ref={containerRef}
    >
      <div className="w-full h-full items-center justify-center flex">
        <VariableFontAndCursor
          label="fancy!"
          className="text-5xl sm:text-7xl md:text-9xl text-orange-500"
          fontVariationMapping={{
            y: { name: "wght", min: 100, max: 900 },
            x: { name: "slnt", min: 0, max: -10 },
          }}
          containerRef={containerRef}
        />
      </div>

      <div className="absolute bottom-8 left-8 flex flex-col font-azeretMono">
        <span className="text-xs text-foreground/60 tabular-nums">
          x: {Math.round(x)}
        </span>
        <span className="text-xs text-foreground/60 tabular-nums">
          y: {Math.round(y)}
        </span>
      </div>

      <div
        className="absolute w-px h-screen bg-foreground/20 top-0 -translate-x-1/2"
        style={{
          left: `${x}px`,
        }}
      />
      <div
        className="absolute w-screen h-px bg-foreground/20 left-0 -translate-y-1/2"
        style={{
          top: `${y}px`,
        }}
      />
      <div
        className="absolute w-2 h-2 bg-orange-500 -translate-x-1/2 -translate-y-1/2 rounded-xs"
        style={{
          top: `${y}px`,
          left: `${x}px`,
        }}
      />
    </div>
  );
}

export { InteractiveFontDemo }