Docs
→
Variable Font Cursor Proximity

Variable Font Cursor Proximity

A text component that animates the font variation settings of letters based on the cursor proximity. Works only with variable fonts.

Open in
OverstimulatedUnderutilizedFamiliarExtraordinary

A generalized version of this component (where you can control any CSS property) is available in the Text Cursor Proximity component.

Installation

npx shadcn@latest add "https://fancycomponents.dev/r/variable-font-cursor-proximity.json"

Understanding the component

The VariableFontCursorProximity splits its text into letters, that respond to cursor movement by adjusting their font variation settings, based on the distance between the letter and cursor distance. This component works only with variable fonts.

  1. Splitting text into individual letters
  2. Tracking cursor position relative to each letter
  3. Smoothly transitioning font variations based on proximity
  4. Supporting multiple falloff patterns for the effect

This component requires the use of variable fonts to function properly. Otherwise it will not work.

How it works

The component calculates the distance between the cursor and each letter in real-time. When the cursor comes within the specified radius of a letter, that letter's font variations (like weight, slant, etc.) smoothly interpolate between two states:

  • The default state (fromFontVariationSettings)
  • The target state (toFontVariationSettings)

The closer the cursor gets to a letter, the closer that letter moves toward its target state.

Understanding Variable Fonts

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

Examples

Falloff

With the falloff prop, you can control the type of falloff. It can be either linear, exponential, or gaussian. The following demo showcases the exponential one. The effects are best observed on a larger block of text.

Open in
                                                                                                                          Modern typography is based primarily on the theories and principles of design evolved in the 20's and 30's of our century. It was Mallarmé and Rimbaud in the 19th century and Apollinaire in the early 20th century who paved the way to a new understanding of the possibilities inherent in typography and who, released from conventional prejudices and fetters, created through their experiments the basis for the pioneer achievements of the theoreticians and practitioners that followed. Walter Dexel, El Lissitzky, Kurt Schwitters, Jan Tschichold, Paul Renner, Moholy-Nagy, Joost Schmidt etc. breathed new life into an unduly rigid typography. In his book "Die neue Typografie" (1928) J. Tschichold formulated the rules of an up-to-date and objective typography which met the needs of the age.

Notes

It seems like interpolating on large number of letters simultaneously can be a bit slow, even when we're avoiding re-renders with state updates. If you're experienceing performance issues, try to limit the length of the text you're animating.

Props

PropTypeDefaultDescription
label*string-The text to be displayed and animated
fromFontVariationSettings*string-Default font variation settings
toFontVariationSettings*string-Target font variation settings
containerRef*React.RefObject<HTMLElement>-Reference to the container for mouse tracking
radiusnumber50The radius of the proximity effect
falloff"linear" | "exponential" | "gaussian""linear"The falloff type of the proximity
classNamestring-Additional CSS classes for styling