Modelo 1973

HTML + CSSLiquid Glass

Lampe à lave avec interrupteur

Une bouteille en verre où la cire chaude monte, descend et fusionne ; allumez-la et le mur prend sa lumière.

Réglages

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">Modèle 1973</p><button type="button" class="ch" role="switch" aria-checked="true"><i class="led"></i>Lumière</button></div></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Liquid Glass

Voir tout : Liquid Glass

Où l’utiliser

Une lampe à lave des années soixante-dix faite de formes CSS : chapeau et socle en laiton et bouteille en verre effilée aux reflets verticaux. À l’intérieur, des boules montent et descendent à des vitesses différentes et un filtre SVG collant les fait fusionner comme de la vraie cire. Éteinte, la cire s’arrête, le liquide s’assombrit et la lueur chaude sur le papier peint s’efface.

Choisissez les couleurs de la cire et du liquide pour passer de l’orange et du violet classiques au vert ou au bleu. Le réglage de vitesse calme le mouvement pour un chargement paisible ou un en-tête d’ambiance, et l’interrupteur est accessible.