HUD proyectado en el parabrisas
Velocidad, límite y siguiente giro proyectados en el cristal del coche, con la doble imagen fantasma de un parabrisas real.
Ajustes
Código
<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>Calle Mayor</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="Frenar"><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">Velocidad</span><button type="button" class="ch ac" aria-label="Acelerar"><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 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
La vista del conductor al atardecer con un head-up display flotando en el parabrisas. La carretera es un SVG en perspectiva cuyas marcas avanzan con la velocidad, y el HUD brilla en un solo color con un fantasma desplazado, el doble reflejo que dan las dos caras del vidrio laminado. Por encima del límite, los números pasan a ámbar.
Usa los botones de más y menos, o mantenlos pulsados, para cambiar la velocidad. Repinta la proyección y el tono de aviso y escribe la siguiente calle en el campo de texto. Encaja en configuradores de coches, apps de navegación y webs de movilidad.