Variable Font And Cursor

import { useState, useEffect, RefObject } from "react";

export const useMousePosition = (containerRef: RefObject<HTMLElement>) => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updateMousePosition = (ev: MouseEvent) => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        setMousePosition({
          x: ev.clientX - rect.left,
          y: ev.clientY - rect.top,
        });
      }
    };

    const container = containerRef.current;
    if (container) {
      container.addEventListener("mousemove", updateMousePosition);
    }

    return () => {
      if (container) {
        container.removeEventListener("mousemove", updateMousePosition);
      }
    };
  }, [containerRef]);

  return mousePosition;
}

The VariableFontAndCursor component allows you to create text that responds to cursor movement by adjusting its font variation settings. This component works with variable fonts and can track cursor movement either within a specific container or across the entire viewport.

It's important to note that the container used for tracking mouse position is not part of the component itself. To track mouse movement within a specific area, you need to create a container element, assign it a ref, and pass that ref to the component using the containerRef prop. You can use the window object as a reference to the entire viewport.

Font Variation Mapping

The fontVariationMapping prop allows you to define how cursor position maps to font variation settings. It has the following structure:

interface FontVariationMapping {
    x: { name: string; min: number; max: number };
    y: { name: string; min: number; max: number };
}

• x: Defines the font variation axis controlled by horizontal cursor movement.
• y: Defines the font variation axis controlled by vertical cursor movement.
• name: The name of the font variation axis (e.g., "wght" for weight, "slnt" for slant, see next section for more details).
• min: The minimum value for the axis, applied when the cursor is at the left/top.
• max: The maximum value for the axis, applied when the cursor is at the right/bottom.

The component interpolates between min and max based on the cursor position within the tracking area.

Understanding Variable Fonts

For more information about variable fonts and how they work, please refer to the Variable Font Hover By Letter documentation.

FontVariationMapping

FontVariationAxis