Affichage tête haute sur pare-brise
Vitesse, limite et prochain virage projetés sur la vitre de la voiture, avec la légère image double d’un vrai pare-brise.
Réglages
Code
<div class="uvq11-hud"><i class="sk" aria-hidden="true"></i><svg class="rd" viewBox="0 0 200 60" preserveAspectRatio="none" aria-hidden="true"><path class="as" d="M97 0H103L250 60H-50Z"/><path class="ln" d="M98 0L-28 60M102 0L228 60"/><path class="ds" d="M97.71 85.71L102.29 85.71L100.64 24.00L99.36 24.00ZM99.66 12.77L100.34 12.77L100.25 9.23L99.75 9.23ZM99.82 6.90L100.18 6.90L100.15 5.71L99.85 5.71ZM99.87 4.72L100.13 4.72L100.11 4.14L99.89 4.14ZM99.90 3.59L100.10 3.59L100.09 3.24L99.91 3.24ZM99.92 2.90L100.08 2.90L100.07 2.67L99.93 2.67ZM99.94 2.43L100.06 2.43L100.06 2.26L99.94 2.26ZM99.94 2.09L100.06 2.09L100.05 1.97L99.95 1.97ZM99.95 1.83L100.05 1.83L100.05 1.74L99.95 1.74ZM99.96 1.63L100.04 1.63L100.04 1.56L99.96 1.56Z"/></svg><div class="ws" aria-hidden="true"></div><div class="hud"><span class="lim"><b>90</b></span><span class="sp"><output>80</output><small>km/h</small></span><span class="nv"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 20v-7a4 4 0 0 1 4-4h8M15 5l4 4-4 4"/></svg><span><b class="dst">300 m</b><i>Grand-Rue</i></span></span></div><i class="pil l" aria-hidden="true"></i><i class="pil r" aria-hidden="true"></i><div class="db"><button type="button" class="ch br" aria-label="Freiner"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg></button><span class="lb">Vitesse</span><button type="button" class="ch ac" aria-label="Accélérer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></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
La vue du conducteur au crépuscule avec un affichage tête haute qui flotte sur le pare-brise. La route est un SVG en perspective dont les marquages défilent selon la vitesse, et l’affichage brille d’une seule couleur avec un fantôme décalé, le double reflet des deux faces du verre feuilleté. Au-delà de la limite, les chiffres passent à l’ambre.
Utilisez les boutons plus et moins, ou maintenez-les, pour changer la vitesse. Recolorez la projection et l’alerte et tapez la prochaine rue dans le champ texte. Il convient aux configurateurs automobiles, aux applis de navigation et aux sites de mobilité.