HTML + CSSText & scroll
Variable weight cursor headline
Letters near the pointer grow bolder, rise slightly and take the accent color, like a magnet for type.
Settings
16px
1x
140px
Code
<h3 class="uv-twc" aria-label="Design with intent"><span class="ws" translate="no" aria-hidden="true">Design with intent</span></h3>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Text & scroll
See all Text & scrollWhere to use it
A large headline set in a light weight reacts to the pointer letter by letter. Each character measures its distance to the cursor and blends from 300 to 900 in weight, lifts a little and fades into the accent color, so a soft wave of bold type follows the hand across the words.
Screen readers get the full sentence through aria-label while the split letters stay hidden. A slider sets the reach of the effect in pixels, and the text rebuilds itself when you change it, so it works with any headline you write.