Profundidad

50 m

Zona iluminadaZona crepuscular

HTML + CSSLiquid Glass

U-Boot-Bullauge

Ein Bullauge aus Messing mit dickem Glas, das das Meer an den Rändern verzerrt; tauch tiefer und die Quallen kommen.

Einstellungen

16px
1x

Code

<div class="uvq11-port" style="--dp:.25"><div class="ph"><div class="gl"><div class="sea" aria-hidden="true"><i class="ry"></i><span class="fs"><svg viewBox="0 0 24 12" style="top:30%;--sz:1.6em;--dl:0"><path d="M2 6c4-5 11-5 16 0-5 5-12 5-16 0zM18 6l5-4v8z"/></svg><svg viewBox="0 0 24 12" style="top:44%;--sz:3em;--dl:-3"><path d="M2 6c4-5 11-5 16 0-5 5-12 5-16 0zM18 6l5-4v8z"/></svg><svg viewBox="0 0 24 12" style="top:58%;--sz:2.2em;--dl:-6"><path d="M2 6c4-5 11-5 16 0-5 5-12 5-16 0zM18 6l5-4v8z"/></svg><svg viewBox="0 0 24 12" style="top:70%;--sz:1.1em;--dl:-2"><path d="M2 6c4-5 11-5 16 0-5 5-12 5-16 0zM18 6l5-4v8z"/></svg></span><i class="jf"></i><i class="jf b"></i><span class="sn"><i style="left:0%;--d:10.3;--dl:-8.2"></i><i style="left:96%;--d:11.6;--dl:-8.5"></i><i style="left:61%;--d:11.0;--dl:-8.3"></i><i style="left:15%;--d:11.9;--dl:-7.5"></i><i style="left:80%;--d:8.7;--dl:-7.0"></i><i style="left:89%;--d:10.3;--dl:-1.0"></i><i style="left:98%;--d:11.2;--dl:-4.3"></i><i style="left:93%;--d:9.9;--dl:-1.0"></i><i style="left:0%;--d:11.1;--dl:-2.0"></i><i style="left:50%;--d:8.4;--dl:-1.2"></i><i style="left:83%;--d:11.5;--dl:-4.1"></i><i style="left:62%;--d:9.4;--dl:-2.7"></i><i style="left:22%;--d:11.0;--dl:-8.8"></i><i style="left:75%;--d:7.3;--dl:-7.7"></i><i style="left:39%;--d:10.8;--dl:-4.7"></i><i style="left:94%;--d:7.3;--dl:-5.0"></i></span></div><i class="rim"></i><i class="rf"></i></div><i class="bt" style="--i:0"></i><i class="bt" style="--i:1"></i><i class="bt" style="--i:2"></i><i class="bt" style="--i:3"></i><i class="bt" style="--i:4"></i><i class="bt" style="--i:5"></i><i class="bt" style="--i:6"></i><i class="bt" style="--i:7"></i></div><div class="pn"><p class="lb">Tiefe</p><output class="dv">50 m</output><input type="range" min="0" max="200" value="50" aria-label="Tiefe"><p class="zn"><span class="z1">Lichtzone</span><span class="z2">Dämmerzone</span></p></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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Liquid Glass

Alle ansehen: Liquid Glass

Wofür du ihn nutzen kannst

Eine genietete Bordwand mit Messing-Bullauge und acht Schrauben, dahinter das offene Meer. Die Sicht ist leicht vergrößert, ein Ring mit stärkerer Unschärfe am Rand imitiert dickes, gewölbtes Glas, darüber liegen gebogene Reflexe. Lichtstrahlen, Fische, schwebende Partikel und leuchtende Quallen reagieren auf die eingestellte Tiefe.

Zieh den Tiefenregler von der Oberfläche bis auf zweihundert Meter, um das Wasser abzudunkeln, die Sonnenstrahlen auszublenden und die Biolumineszenz hervorzuholen. Färbe Wasser und Messing neu für Tauchschulen, Aquarien oder Meeresbildung.