Hacemos quelas ideasse veany se usen
Outline text that fills on scroll
Lines of outlined type fill with color from left to right as you scroll, one line after another.
Settings
Code
<div class="uv-tof"><div class="sc" tabindex="0" aria-label="We make"><div class="tr"><div class="st"><p><span style="--i:0">We make</span><span style="--i:1">ideas</span><span style="--i:2">visible</span><span style="--i:3">and useful</span></p></div></div></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>Scroll</span></div>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
Four short lines of heavy type start as thin outlines. While you scroll, each line fills with solid color from left to right, and the next one only begins when the previous line is complete, so the statement reads itself out in time with your hand. Alternate lines use the second color for rhythm.
The fill is a background clipped to the text with a hard stop driven by one progress variable, which keeps it smooth and cheap. It works in light and dark mode, and you can change the words, colors and scroll speed.