Modelo 1973

HTML + CSSLiquid Glass

Lámpara de lava con interruptor

Una botella de vidrio con cera que sube y baja fundiéndose; enciéndela y la pared se tiñe con su luz.

Ajustes

16px
1x

Código

<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">Modelo 1973</p><button type="button" class="ch" role="switch" aria-checked="true"><i class="led"></i>Luz</button></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Liquid Glass

Ver todos: Liquid Glass

Dónde usarlo

Una lámpara de lava de los setenta hecha con formas CSS: tapa y base de latón y una botella de vidrio ahusada con brillos verticales. Dentro, las bolas suben y bajan a distintas velocidades y un filtro SVG pegajoso las funde como cera de verdad. Al apagar el interruptor, la cera se detiene, el líquido se oscurece y se apaga el resplandor cálido del papel pintado.

Elige los colores de la cera y del líquido para pasar del naranja y morado clásicos a verde o azul. El control de velocidad calma el movimiento para un cargador tranquilo o una cabecera de ambiente, y el interruptor es accesible.