pompas
Pompa de jabón que estalla
Una pompa con película iridiscente que tiembla y se aparta del cursor; tócala y estalla en gotitas antes de volver a salir.
Ajustes
Código
<div class="uvq11-bub"><div class="bg" aria-hidden="true"></div><i class="wd" aria-hidden="true"></i><button type="button" class="bb" aria-label="Explotar la pompa"><span class="fm"></span><span class="hl"></span></button><span class="sp" aria-hidden="true"><i style="--a:0deg;--d:3.4em"></i><i style="--a:30deg;--d:4.1em"></i><i style="--a:60deg;--d:4.8em"></i><i style="--a:90deg;--d:3.4em"></i><i style="--a:120deg;--d:4.1em"></i><i style="--a:150deg;--d:4.8em"></i><i style="--a:180deg;--d:3.4em"></i><i style="--a:210deg;--d:4.1em"></i><i style="--a:240deg;--d:4.8em"></i><i style="--a:270deg;--d:3.4em"></i><i style="--a:300deg;--d:4.1em"></i><i style="--a:330deg;--d:4.8em"></i></span><p class="ct"><output>0</output> <span>pompas</span></p></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.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Una pompa de jabón sobre un prado soleado, hecha con un degradado cónico enmascarado en el borde para los colores de la película fina, un ángulo animado para que el remolino no pare y dos reflejos de ventana. El contorno tiembla despacio, la pompa se aparta del puntero cercano y al explotarla lanza gotitas antes de que salga otra del aro.
Los dos colores guían la iridiscencia y un contador lleva la cuenta de las pompas explotadas. Es un detalle alegre para apps infantiles, pantallas de éxito, estados vacíos o una llamada a la acción con gracia en una portada.