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 + CSSTexto y scroll
Tarjetas que se apilan al hacer scroll
Cada tarjeta se queda pegada arriba y la anterior se encoge y se oscurece cuando la siguiente pasa por encima.
Ajustes
16px
1x
Código
<div class="uv-tsc"><div class="sc" tabindex="0" aria-label="Cómo trabajamos"><h3>Cómo trabajamos</h3><article style="--c:#6366f1;--i:0"><span class="n">01</span><b>Investigación</b><p>Entrevistamos a quien usará el producto.</p></article><article style="--c:#ec4899;--i:1"><span class="n">02</span><b>Diseño</b><p>Prototipos que se pueden tocar en días.</p></article><article style="--c:#f59e0b;--i:2"><span class="n">03</span><b>Desarrollo</b><p>Código limpio, rápido y accesible.</p></article><article style="--c:#10b981;--i:3"><span class="n">04</span><b>Lanzamiento</b><p>Medimos, aprendemos y mejoramos.</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>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
Un proceso contado en cuatro tarjetas de color que se amontonan al bajar. Cada tarjeta usa position sticky con un desplazamiento algo mayor que la anterior, así que los bordes de los pasos previos siguen asomando como una baraja. Cuando una nueva tapa a la anterior, esta se encoge y se apaga para quedar al fondo.
El scroll ocurre dentro de su propio contenedor, de modo que funciona en una demo, un modal o cualquier sección. Un script pequeño solo mide cuánto se solapan y fija una variable por tarjeta. Cambia títulos, textos y colores para contar tu historia.