127 Components
Variable Proximity Text
TextInteractive kinetic typography where each glyph interpolates vertical lift, scale, and contrast based on real-time 2D cursor proximity.
Kinetic typography engineered with spring physics.
Sweep cursor across glyphs • Radius 120px
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/variable-proximity-text.json"
Props
TypeScript props supported by <VariableProximityText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Kinetic typography engineered with spring physics." | The text string rendered as proximity-reactive glyphs. |
| radius | number | 120 | Pointer influence radius in pixels around the cursor. |
| maxLift | number | -10 | Peak vertical displacement in pixels at zero pointer distance. |
| maxScale | number | 1.22 | Peak glyph scale factor at zero pointer distance. |
| stiffness | number | 300 | Spring stiffness coefficient for glyph lift and scale. |
| damping | number | 22 | Spring damping coefficient controlling glyph oscillation decay. |
Key Features
- Per-glyph 2D Euclidean distance field driven by Framer Motion MotionValues without React state re-renders.
- Word-aware wrapping that prevents mid-word line breaks on responsive viewports.
- Screen-reader safe architecture pairing a single sr-only text node with aria-hidden visual spans.
Keyboard & Accessibility
- Provides a single uninterrupted sr-only text string so screen readers never stutter over split characters.
- Marks individual animated glyph spans with aria-hidden='true'.
- Respects prefers-reduced-motion by locking glyphs at resting baseline and full contrast.