Webs para
Rotating word drum
A sentence that ends in a metal roller: scroll or use the arrow keys and the words turn like a combination lock.
Settings
Code
<div class="uvq14-drm"><p class="lb" id="uvq14-drm-l">Websites for</p><div class="dr"><div class="sc" tabindex="0" role="listbox" aria-labelledby="uvq14-drm-l"><div role="option" id="uvq14-drm-0" aria-selected="false">restaurants</div><div role="option" id="uvq14-drm-1" aria-selected="true">studios</div><div role="option" id="uvq14-drm-2" aria-selected="false">shops</div><div role="option" id="uvq14-drm-3" aria-selected="false">clinics</div><div role="option" id="uvq14-drm-4" aria-selected="false">bands</div><div role="option" id="uvq14-drm-5" aria-selected="false">weddings</div></div><i class="wn" aria-hidden="true"></i></div></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 headline finishes on a brushed metal drum, like the wheels of a combination lock. The words sit in a scroll snap container, and a few lines of JavaScript tilt each one in 3D depending on how far it is from the center window. It is a tactile way to show who a product is for on landing pages, agencies or booking tools.
Change the start of the sentence in the text field and the words in the list. The main color frames the window and the chosen word, the secondary one colors the rest. It behaves as a listbox: arrow keys, Home and End move it, and the choice is announced.