Bienvenida al estudioDiseño de producto, marca y webs con alma.

Entra

HTML + CSSTexto y scroll

Titular que atraviesas al hacer scroll

Una palabra enorme crece al bajar hasta que la atraviesas y aparece el contenido que estaba detrás.

Ajustes

16px
1x

Código

<div class="uv-tzh"><div class="sc" tabindex="0" aria-label="Entra"><div class="tr"><div class="st"><div class="bg"><b>Bienvenida al estudio</b><span>Diseño de producto, marca y webs con alma.</span></div><h3>Entra</h3></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 scroll

Dónde usarlo

Una sola palabra gigante con relleno degradado vive en un escenario fijo. Al hacer scroll crece con una curva que acelera, así que primero se acerca despacio y luego pasa de golpe junto a quien mira, mientras detrás aparece un panel de color con un mensaje de bienvenida. Funciona muy bien como apertura de un estudio o un producto.

El scroll ocurre dentro de su propio contenedor y el script solo escribe el progreso en una variable; el zoom y los fundidos son CSS. Elige la palabra, los dos colores del degradado y la velocidad, y cambia el panel por tu presentación real.