Rotating circular text badge
A round seal with text set on a circle that turns slowly around an arrow, speeding up on hover.
Settings
Code
<a class="uv-tcb" href="#" aria-label="Scroll down to discover more ·"><svg class="rg" viewBox="0 0 120 120" aria-hidden="true"><defs><path id="uv-tcb-p" d="M60 60m-44 0a44 44 0 1 1 88 0a44 44 0 1 1-88 0"/></defs><text><textPath href="#uv-tcb-p" textLength="272" lengthAdjust="spacing">Scroll down to discover more ·</textPath></text></svg><span class="ct"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg></span></a>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
Studios and portfolios often place a circular badge near the hero to invite visitors to scroll. The text follows an SVG path around the edge and rotates slowly, while a solid disc in the middle holds an arrow. Hovering speeds up the spin and nudges the arrow downward.
The text is stretched with textLength so any phrase closes the circle neatly. The whole badge is a link with an accessible name, keyboard focus shows a ring, and reduced motion stops the rotation. Change the text, both colors and the speed from the controls.