Text Axis Proximity Field

ProNew

Font weight and width rise with each letter's closeness to a focus point that sweeps on its own or follows the pointer.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Pointer-driven. This is an opt-in component: nothing in the library mounts it for you, and it renders nothing under reduced motion.


pnpm dlx shadcn@latest add @tealmac-pro/text-axis-proximity-field

Prop	Type	Default	Description
`children`	`string`	-	The text.
`weight`	`[number, number]`	`[250, 900]`	Lightest and heaviest weight.
`reach`	`number`	`3.5`	Reach in letter widths.
`pointer`	`boolean`	`false`	Follow the pointer instead of sweeping.
`sweep`	`number`	`5`	Seconds for the automatic sweep.
`className`	`string`	-	Classes for the root element.

The phrase is the aria-label of a role="img" element.
The pointer mode is opt-in (pointer prop) and is tagged pointer-driven; by default the focus point sweeps by itself.
Under prefers-reduced-motion the letters keep a uniform weight. The loop pauses off screen.

Guide and examples

Pointer-driven. This is an opt-in component: nothing in the library mounts it for you, and it renders nothing under reduced motion.


pnpm dlx shadcn@latest add @tealmac-pro/text-axis-proximity-field

Prop	Type	Default	Description
`children`	`string`	-	The text.
`weight`	`[number, number]`	`[250, 900]`	Lightest and heaviest weight.
`reach`	`number`	`3.5`	Reach in letter widths.
`pointer`	`boolean`	`false`	Follow the pointer instead of sweeping.
`sweep`	`number`	`5`	Seconds for the automatic sweep.
`className`	`string`	-	Classes for the root element.

The phrase is the aria-label of a role="img" element.
The pointer mode is opt-in (pointer prop) and is tagged pointer-driven; by default the focus point sweeps by itself.
Under prefers-reduced-motion the letters keep a uniform weight. The loop pauses off screen.