Entra
Zoom through headline on scroll
A huge word grows as you scroll until you pass right through it and the content behind appears.
Settings
Code
<div class="uv-tzh"><div class="sc" tabindex="0" aria-label="Enter"><div class="tr"><div class="st"><div class="bg"><b>Welcome to the studio</b><span>Product design, branding and websites with soul.</span></div><h3>Enter</h3></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
A single giant word with a gradient fill sits in a sticky stage. Scrolling scales it up with an accelerating curve, so it first creeps closer and then rushes past the viewer, while a colored panel with a welcome message fades in behind it. The moment works well as the opening of a studio or product page.
The scroll runs inside its own container and the script only writes progress as a variable, leaving scaling and fading to CSS. Choose the word, the two gradient colors and the speed, and replace the panel with your real introduction.