pompas
Platzende Seifenblase
Eine Seifenblase mit schillerndem Film, die wackelt und dem Cursor ausweicht; tipp sie an und sie zerplatzt in Tröpfchen.
Einstellungen
Code
<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="Seifenblase platzen lassen"><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>Blasen</span></p></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.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Eine Seifenblase über einer sonnigen Wiese, gebaut aus einem am Rand maskierten konischen Verlauf für die Farben des dünnen Films, einem animierten Winkel, damit der Wirbel weiterdreht, und zwei Fensterspiegelungen. Die Kontur wabert langsam, die Blase weicht einem nahen Zeiger aus, und beim Platzen sprühen Tröpfchen, bevor aus dem Ring eine neue wächst.
Die beiden Farben steuern das Schillern, ein Zähler merkt sich die geplatzten Blasen. Ein fröhliches Detail für Kinder-Apps, Erfolgsmeldungen, Leerzustände oder einen verspielten Call to Action auf einer Landingpage.