Proximity Weight Magnifier
Variable font text effect: letters swell from hairline to black weight and grow taller as the cursor approaches. A smooth magnifying wave rolls through the word. Ideal as an interactive, animated website hero title for type-driven brands.
Prompt · replace [TEXT]
Tool-agnosticSet [TEXT] large in a clean neo-grotesque lowercase with a variable weight axis, white on a deep ultramarine background. Every letter's weight depends on its distance to the pointer: far letters are hairline thin, the nearest swell to ultra-black, grow up to a third taller from the baseline and tint acid lime, with a smooth bell-shaped falloff so the word reflows like a magnifying wave. At rest an invisible point drifts slowly along the word so a soft weight wave keeps rolling through it. On hover the bell tightens and the effect doubles, tracking the pointer with a slightly springy lag; when the pointer leaves the letters thin out again within a second. A press sends a weight pulse rippling outward through the letters. Show a thin falloff curve above and weight bars below. Touch follows the finger.
Visual DNA
- Neo-grotesque lowercase in white on deep ultramarine
- Weight axis follows pointer proximity: hairline far away, black up close
- Nearest letters grow taller and tint acid lime
- Neighbors reflow as widths change, like a magnifying app bar
- Live falloff curve and weight bars as specimen chrome
- Category
- Reactive Styles
- Demo built with
- CSS
- Energy
- Lively
- Background
- Dark bg
Also known as
No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.
Keys: ← → browse · C copy