Biblioteca
Barra que se vuelve cristal al hacer scroll
El título grande desaparece y la barra se convierte en cristal en cuanto el contenido pasa por debajo.
Ajustes
Código
<div class="uv-gsn"><header><span class="sm">Biblioteca</span><button type="button" aria-label="Añadir"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></header><div class="sc" tabindex="0" aria-label="Biblioteca"><h3 class="lg">Biblioteca</h3><div class="it" style="--h:0"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:47"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:94"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:141"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:188"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:235"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:282"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:329"><i></i><span><b></b><b></b></span></div></div></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 Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Los títulos grandes que se recogen en una barra de cristal compacta son un sello de las apps móviles actuales. Arriba de esta lista la cabecera es invisible y se ve un título grande y grueso; en cuanto el contenido pasa por debajo, la barra desenfoca lo que se mueve detrás, gana una línea fina de separación y aparece el título pequeño centrado.
Un script mínimo solo cambia una clase al pasar un umbral de scroll y todo el cambio visual ocurre en CSS. La demo baja y sube una vez para enseñar el efecto, y los controles de desenfoque y tinte deciden cuánto se esmerila la barra.