Variable Font And Cursor

Installation

1pnpm dlx shadcn@latest add "https://fancycomponents.dev/r/variable-font-and-cursor.json"

Usage

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:

1interface FontVariationMapping {
2  x: { name: string; min: number; max: number };
3  y: { name: string; min: number; max: number };
4}

• 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.

Notes

Make sure the main container has enough space to hold the text at its full weight to avoid layout shifts. For example, you can use negative margins, or an invisible pseudo element.

Props

Interfaces

FontVariationMapping

FontVariationAxis