Gira la idea
Letter helix that turns on scroll
The phrase wraps around a 3D spiral that spins and rises as you scroll; letters at the back dim so the front reads clearly.
Settings
Code
<div class="uvq14-hlx"><div class="sc" tabindex="0" aria-label="Turn the idea"><div class="tr"><div class="st"><p class="sr">Turn the idea</p><div class="hx" aria-hidden="true" translate="no"><b class="pre">Turn the idea</b></div><i class="ax" aria-hidden="true"></i></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
This block winds a short phrase around a helix built with CSS 3D transforms. Scrolling inside the box turns the spiral and lifts it, a slow drift keeps it alive when nobody touches it, and each letter fades according to its depth so the front face stays legible. It works as a section opener, a festival poster or a playful brand motto.
Change the phrase in the text field; it repeats until the spiral is full. The main color tints the letters and the background glow. Screen readers get the phrase once as plain text, and with reduced motion the drift stops and only scroll moves it.