pompas
Bulle de savon qui éclate
Une bulle au film irisé qui tremble et esquive le curseur ; touchez-la et elle éclate en gouttelettes avant de revenir.
Réglages
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="Faire éclater la bulle"><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>bulles</span></p></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.
Plus dans Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Une bulle de savon au-dessus d’un pré ensoleillé, faite d’un dégradé conique masqué sur le bord pour les couleurs du film mince, d’un angle animé pour que le tourbillon continue et de deux reflets de fenêtre. Le contour ondule lentement, la bulle s’écarte du pointeur proche et, en éclatant, projette des gouttelettes avant qu’une nouvelle sorte de l’anneau.
Les deux couleurs pilotent l’irisation et un compteur garde la trace des bulles éclatées. Une touche joyeuse pour une appli pour enfants, un écran de réussite, un état vide ou un appel à l’action ludique.