Badge de texte circulaire tournant
Un sceau rond avec un texte en cercle qui tourne lentement autour d'une flèche et accélère au survol.
Réglages
Code
<a class="uv-tcb" href="#" aria-label="Fais défiler pour en voir plus ·"><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">Fais défiler pour en voir plus ·</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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Texte et défilement
Voir tout : Texte et défilementOù l’utiliser
Studios et portfolios placent souvent un badge rond près de l'en-tête pour inviter à défiler. Le texte suit un tracé SVG sur le bord et tourne lentement, tandis qu'un disque plein au centre porte une flèche. Au survol, la rotation accélère et la flèche descend un peu.
Le texte est ajusté avec textLength pour que n'importe quelle phrase referme proprement le cercle. Le badge entier est un lien avec un nom accessible, le focus clavier affiche un anneau et le mouvement réduit arrête la rotation. Modifie le texte, les couleurs et la vitesse dans les réglages.