Head-up-Display in der Windschutzscheibe
Tempo, Limit und nächste Abbiegung auf der Autoscheibe, mit dem leichten Doppelbild einer echten Windschutzscheibe.
Einstellungen
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>Hauptstraße</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="Bremsen"><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">Geschwindigkeit</span><button type="button" class="ch ac" aria-label="Beschleunigen"><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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Der Blick des Fahrers in der Dämmerung mit einem Head-up-Display, das auf der Scheibe schwebt. Die Straße ist ein perspektivisches SVG, dessen Markierungen sich mit dem Tempo bewegen, und das HUD leuchtet einfarbig mit einem leicht versetzten Geisterbild, der Doppelspiegelung der beiden Seiten von Verbundglas. Über dem Limit werden die Zahlen bernsteinfarben.
Mit Plus und Minus, auch gedrückt gehalten, änderst du das Tempo. Färbe Projektion und Warnton neu und trag die nächste Straße ins Textfeld ein. Passt zu Fahrzeugkonfiguratoren, Navigations-Apps und Mobilitätsseiten.