Entrevistamos a quien usará el producto.
Cómo trabajamos
Prototipos que se pueden tocar en días.
Código limpio, rápido y accesible.
Medimos, aprendemos y mejoramos.
HTML + CSSText & scroll
Cards that stack on scroll
Each card sticks to the top while the previous one shrinks and darkens as the next card slides over it.
Settings
16px
1x
Code
<div class="uv-tsc"><div class="sc" tabindex="0" aria-label="How we work"><h3>How we work</h3><article style="--c:#6366f1;--i:0"><span class="n">01</span><b>Research</b><p>We interview the people who will use it.</p></article><article style="--c:#ec4899;--i:1"><span class="n">02</span><b>Design</b><p>Prototypes you can touch within days.</p></article><article style="--c:#f59e0b;--i:2"><span class="n">03</span><b>Development</b><p>Clean, fast and accessible code.</p></article><article style="--c:#10b981;--i:3"><span class="n">04</span><b>Launch</b><p>We measure, learn and improve.</p></article><div class="end"></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 process told in four colored cards that pile up as you scroll. Every card uses position sticky with a slightly larger offset than the one before, so the edges of earlier steps remain visible like a deck. As a new card covers the previous one, it scales down and dims to push it into the background.
The scroll happens inside its own container, so the effect works in a demo, a modal or any section of a page. A small script only measures overlap and sets one variable per card. Swap titles, texts and colors to tell your own story.