Modelo 1973

HTML + CSSLiquid Glass

Lavalampe mit Schalter

Eine Glasflasche, in der warmes Wachs steigt, sinkt und verschmilzt; schalt sie ein und die Wand leuchtet mit.

Einstellungen

16px
1x

Code

<div class="uvq11-lava on"><svg class="df" width="0" height="0" aria-hidden="true"><filter id="uvq11-goo"><feGaussianBlur stdDeviation="6"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -10"/></filter></svg><i class="gw" aria-hidden="true"></i><div class="lp" aria-hidden="true"><i class="cap"></i><span class="vs"><span class="lq"><span class="bl"><i style="--x:22%;--s:1.7em;--d:11;--dl:-2"></i><i style="--x:55%;--s:1.3em;--d:14;--dl:-7"></i><i style="--x:38%;--s:2.1em;--d:17;--dl:-11"></i><i style="--x:62%;--s:1.1em;--d:9;--dl:-4"></i><i style="--x:30%;--s:1em;--d:12;--dl:-9"></i><i style="--x:48%;--s:1.5em;--d:20;--dl:-15"></i></span></span><i class="gx"></i></span><i class="bs"></i></div><div class="tx"><p class="nm">Modell 1973</p><button type="button" class="ch" role="switch" aria-checked="true"><i class="led"></i>Licht</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.

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 Lavalampe im Stil der Siebziger aus CSS-Formen: Kappe und Sockel aus Messing und eine konische Glasflasche mit senkrechten Glanzlichtern. Innen steigen und sinken runde Blasen in unterschiedlichem Tempo, ein klebriger SVG-Filter verschmilzt sie wie echtes Wachs. Ausgeschaltet stoppt das Wachs, die Flüssigkeit wird dunkler und das warme Leuchten auf der Tapete verblasst.

Wähle Wachs- und Flüssigkeitsfarbe, um vom klassischen Orange und Lila zu Grün oder Blau zu wechseln. Der Tempo-Regler beruhigt die Bewegung für einen gelassenen Loader oder einen Stimmungsheader, der Schalter ist barrierefrei.