Proximity Text
betaText whose letters swell toward the pointer — larger, heavier and more tinted the nearer each one is — with the whole surrounding section live.
- Effects & motion
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add proximity-textNo npm packages are needed beyond what Dowel already requires.
import { ProximityText } from "@/components/ui/proximity-text";<ProximityText>
| Prop | Type | Default |
|---|---|---|
children (required)The text. Plain text: it is split into letters. | string | — |
accentColour the nearest letter takes: a token or CSS colour. Default "primary". | string | "primary" |
asThe element to render. Default "span". | ProximityTextElement | "span" |
radiusHow far the pointer's pull reaches, in pixels. Default 120. | number | 120 |
scaleSize of the nearest letter, as a multiple. Default 1.35. | number | 1.35 |
scopeWhere to listen for the pointer: this text alone, or its parent. Default "parent". | "self" | "parent" | "parent" |
weightWeight the nearest letter reaches, 100–900 (smoothly on a variable font). Default 800. | number | 800 |
Plus every attribute of <span> except children.
The text is read as written: a visually hidden copy carries it and the letters are aria-hidden. The effect is decoration that needs a mouse, so it is off for touch and under reduced motion, where the text is simply text. It listens on its parent without capturing events, so nothing in the section changes how it is used. Check that the accent colour meets contrast against the background, as the nearest letters take it fully.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes