Las buenas ideas siempre encuentran su camino
Frase que recorre una onda al hacer scroll
Dos frases viajan en sentidos opuestos por dos curvas dibujadas; su posición sobre la línea depende de cuánto bajes.
Ajustes
Código
<div class="uvq14-wav"><div class="sc" tabindex="0" aria-label="Las buenas ideas siempre encuentran su camino"><div class="tr"><div class="st"><p class="sr">Las buenas ideas siempre encuentran su camino</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">Las buenas ideas siempre encuentran su camino</textPath></text><text class="t2"><textPath href="#uvq14-wav-b">despacio · sin prisa · paso a paso</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>Desplázate</span></div>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
El texto sobre un trazado parece colocado a mano, y unirlo al scroll convierte la lectura en un pequeño viaje. Este bloque pone dos frases sobre curvas SVG con textPath y mueve su punto de inicio según el progreso de scroll de su propio contenedor, mientras una barra fina indica cuánto llevas. Encaja en manifiestos, páginas de quiénes somos y secciones narrativas pausadas.
Escribe la frase principal en el campo de texto y la secundaria en el SVG. El color principal pinta la frase grande y la barra de progreso, y el secundario la línea en mayúsculas. Edita el trazado para dibujar una onda más tranquila o más salvaje.