Profundidad
Zona iluminadaZona crepuscular
Submarine porthole
A brass porthole with thick glass that bends the sea at the edges; go deeper and the jellyfish arrive.
Settings
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">Depth</p><output class="dv">50 m</output><input type="range" min="0" max="200" value="50" aria-label="Depth"><p class="zn"><span class="z1">Sunlit zone</span><span class="z2">Twilight zone</span></p></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
A riveted hull with a brass porthole and eight bolts, looking out onto the open sea. The view is slightly magnified and a ring of stronger blur at the rim imitates thick, curved glass, with curved reflections on top. Light rays, fish, drifting particles and glowing jellyfish all react to the depth you set.
Drag the depth slider from the surface to two hundred meters to darken the water, fade the sunbeams and bring out the bioluminescence. Recolor the shallow water and the brass for diving schools, aquariums or ocean education.