Ruta por la costa
Commandes vidéo en verre
Une capsule en verre avec lecture, barre de progression et durée sur une scène vidéo qui s'anime en lecture.
Réglages
Code
<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">Route côtière</p><div class="cb"><button type="button" class="pp" aria-label="Lire" 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="Position"><span class="tm du">3:00</span></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Les lecteurs vidéo font de plus en plus flotter leurs commandes dans une seule capsule de verre au-dessus de l'image. Celle-ci se place en bas d'une scène de coucher de soleil : le bouton lecture devient pause, le curseur personnalisé se remplit au fil du temps et la durée écoulée se met à jour chaque seconde, tandis que les nuages ne défilent que pendant la lecture.
La barre est un input range natif avec une poignée qui grossit quand on la fait glisser, utilisable au clavier et au toucher. Relie la lecture et le range à un vrai élément vidéo en gardant la même mise en page.