Las buenas ideas siempre encuentran su camino
Sentence riding a wave on scroll
Two sentences travel in opposite directions along two drawn curves; their place on the line depends on how far you scroll.
Settings
Code
<div class="uvq14-wav"><div class="sc" tabindex="0" aria-label="Good ideas always find their way"><div class="tr"><div class="st"><p class="sr">Good ideas always find their way</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">Good ideas always find their way</textPath></text><text class="t2"><textPath href="#uvq14-wav-b">slowly · no rush · step by step</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>Scroll</span></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Text & scroll
See all Text & scrollWhere to use it
Text on a path feels hand placed, and tying it to scroll turns reading into a small journey. This block sets two phrases on SVG curves with textPath and moves their start offset with the scroll progress of their own container, while a thin bar shows how far along you are. It suits manifestos, about pages and slow storytelling sections.
Write your main sentence in the text field and the secondary one in the SVG. The main color paints the big phrase and the progress bar, the secondary one the small caps line. Edit the path to draw a calmer or wilder wave.