Las buenas ideas siempre encuentran su camino
Phrase qui suit une vague au défilement
Deux phrases voyagent en sens inverse le long de deux courbes dessinées ; leur place sur la ligne dépend de ton défilement.
Réglages
Code
<div class="uvq14-wav"><div class="sc" tabindex="0" aria-label="Les bonnes idées trouvent toujours leur chemin"><div class="tr"><div class="st"><p class="sr">Les bonnes idées trouvent toujours leur chemin</p><svg viewBox="0 0 400 230" aria-hidden="true"><path id="uvq14-wav-a" class="g" d="M-30 92C40 22 110 162 200 92S330 22 430 92"/><path id="uvq14-wav-b" class="g" d="M-30 172C50 112 120 232 200 172S340 112 430 172"/><text class="t1"><textPath href="#uvq14-wav-a">Les bonnes idées trouvent toujours leur chemin</textPath></text><text class="t2"><textPath href="#uvq14-wav-b">doucement · sans hâte · pas à pas</textPath></text></svg><span class="pc" aria-hidden="true"><i></i></span></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
Un texte posé sur un tracé semble placé à la main, et le lier au défilement transforme la lecture en petit voyage. Ce bloc place deux phrases sur des courbes SVG avec textPath et déplace leur point de départ selon la progression du défilement de son propre conteneur, tandis qu'une fine barre indique où tu en es. Il convient aux manifestes, aux pages à propos et aux sections narratives posées.
Écris la phrase principale dans le champ de texte et la secondaire dans le SVG. La couleur principale peint la grande phrase et la barre de progression, la secondaire la ligne en capitales. Modifie le tracé pour une vague plus calme ou plus folle.