Sello de texto circular giratorio
Un sello redondo con el texto en círculo que gira despacio alrededor de una flecha y acelera al pasar el ratón.
Ajustes
Código
<a class="uv-tcb" href="#" aria-label="Desplázate para descubrir más ·"><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">Desplázate para descubrir más ·</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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Estudios y portfolios suelen colocar un sello circular junto a la portada para invitar a bajar. El texto sigue un trazado SVG por el borde y gira despacio, mientras un disco sólido en el centro lleva una flecha. Al pasar el ratón el giro se acelera y la flecha baja un poco.
El texto se ajusta con textLength para que cualquier frase cierre bien el círculo. El sello entero es un enlace con nombre accesible, el foco de teclado muestra un anillo y el movimiento reducido detiene el giro. Cambia el texto, los colores y la velocidad desde los controles.