Proximity Weight Magnifier text animation: the word aimotions animated in this style
014ReactiveCSS

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-agnostic
Set [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

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Proximity Weight Magnifier look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

001ReactiveSVG

Bulge Warp Grid

op art hover · bulge distortion text · gravity well cursor · lens warp lines

Details →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥