Lab/16

Proximity Text

Each letter measures its distance to the pointer and springs toward a heavier weight, a little more scale, and vermilion.

Interaction
Typography

Move or drag over the letters

lab/proximity-text

Letters that lean in

Text

Radius180px

Installation

Add Proximity Text to your project with the shadcn CLI. The files land in components/lab, ready to edit.

$ pnpm dlx shadcn@latest add @soultel/lab-proximity-text

Or by URL: https://asafefe.dev/r/lab-proximity-text.json

Brings along

motion
utils
@soultel/use-reduced-motion-safe

Usage

example.tsx11 lines

import { ProximityText } from "@/components/lab/proximity-text"

export function Example() {
  return (
    <ProximityText
      text="Letters that lean in"
      className="flex min-h-72 items-center justify-center p-10"
      textClassName="text-6xl tracking-tight"
    />
  )
}

Props

Prop	Type	Default	Description
text	string	-	The text to render.
radius	number	180	Reach of the effect in px.
minWeight / maxWeight	number	300 / 900	Weight range. Needs a variable font.
scale	number	1.12	Letter scale under the pointer.
lift	number	4	Upward lift under the pointer, in px.
colors	string[]	["var(--foreground)", "var(--primary)"]	Color stops from far to near.
textClassName	string	-	Classes for the text. className styles the tracking area.