Ruta por la costa
Controles de vídeo de cristal
Una cápsula de cristal con play, barra de progreso y tiempo sobre una escena de vídeo que cobra vida al reproducir.
Ajustes
Código
<div class="uv-gvc"><div class="sn" aria-hidden="true"><i class="sun"></i><i class="cl a"></i><i class="cl b"></i><i class="hl"></i></div><p class="ti">Ruta por la costa</p><div class="cb"><button type="button" class="pp" aria-label="Reproducir" aria-pressed="false"><svg class="pl" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="pa" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5.5" width="4" height="13" rx="1.2" fill="currentColor"/><rect x="13.5" y="5.5" width="4" height="13" rx="1.2" fill="currentColor"/></svg></button><span class="tm">0:42</span><input type="range" min="0" max="180" value="42" aria-label="Posición"><span class="tm du">3:00</span></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 reproductores de vídeo colocan cada vez más sus controles en una sola cápsula de cristal sobre la imagen. Esta va abajo en una escena de atardecer: el botón de play se transforma en pausa, el deslizador personalizado se llena con el tiempo y el tiempo transcurrido se actualiza cada segundo, mientras las nubes cruzan la escena solo durante la reproducción.
La barra es un input range nativo con un tirador que crece al arrastrarlo, así que funciona con teclado y táctil. Conecta el play y el range a un elemento video real y mantén el mismo diseño y los mismos estados.