Hacemos quelas ideasse veany se usen
Texte en contour qui se remplit au défilement
Des lignes de texte en contour se remplissent de couleur de gauche à droite au défilement, l'une après l'autre.
Réglages
Code
<div class="uv-tof"><div class="sc" tabindex="0" aria-label="Nous faisons"><div class="tr"><div class="st"><p><span style="--i:0">Nous faisons</span><span style="--i:1">que les idées</span><span style="--i:2">se voient</span><span style="--i:3">et servent</span></p></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>Défiler</span></div>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
Quatre lignes courtes en caractères épais commencent en simples contours. Au défilement, chaque ligne se remplit de couleur pleine de gauche à droite, et la suivante ne démarre qu'une fois la précédente terminée, pour que la phrase se lise au rythme de ta main. Une ligne sur deux prend la seconde couleur.
Le remplissage est un fond découpé sur le texte avec un arrêt net piloté par une seule variable de progression, ce qui reste fluide et léger. L'effet fonctionne en mode clair et sombre, et tu peux changer les mots, les couleurs et la vitesse.