Tu web en tres pasos
Tres opciones claras, sin letra pequeña.
Colores, logo y dominio en dos minutos.
Tu web en línea con un solo botón.
Scrollytelling steps with sticky phone
As you scroll, each step's text passes by while a phone mockup on the left stays fixed and changes screens.
Settings
Code
<div class="uv-tss"><div class="sc" tabindex="0" aria-label="Your website in three steps"><div class="gr"><div class="vs" aria-hidden="true"><div class="ph"><span class="fc on" style="--c:#6366f1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2.5"/><path d="M8 10h8M8 14h5"/></svg></span><span class="fc" style="--c:#ec4899"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="9" cy="10" r="1.2" fill="currentColor"/><circle cx="14.5" cy="9" r="1.2" fill="currentColor"/><circle cx="15.5" cy="14" r="1.2" fill="currentColor"/></svg></span><span class="fc" style="--c:#10b981"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c3 2.5 4.5 5.5 4.5 9l-2 3h-5l-2-3c0-3.5 1.5-6.5 4.5-9zM9.5 15l-2.5 4M14.5 15l2.5 4M12 9.5v.01"/></svg></span><i class="bar"></i></div></div><div class="ls"><h3>Your website in three steps</h3><section class="on"><span>01</span><b>Choose your plan</b><p>Three clear options, no small print.</p></section><section><span>02</span><b>Customize</b><p>Colours, logo and domain in two minutes.</p></section><section><span>03</span><b>Publish</b><p>Your site live with a single button.</p></section><div class="end"></div></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
A classic scrollytelling layout for onboarding or product tours. A phone mockup sits in a sticky column and swaps between three colored screens with icons, while the steps on the right scroll past. The step crossing the middle of the view is highlighted and the others fade back, so attention stays on one idea at a time.
The script compares each step with the center of the container and toggles a class, and CSS handles the screen transitions. Edit the step titles, descriptions, colors and icons to walk people through your own flow.