HTML + CSSInterrupteurs
Toggle liquide
La bille s'étire comme une goutte en traversant le rail, puis se reforme en arrivant.
Réglages
16px
1x
Code
<label class="uv-tlq"><input type="checkbox" role="switch"><span class="tr"><svg width="0" height="0" aria-hidden="true"><filter id="uv-tlq-goo"><feGaussianBlur in="SourceGraphic" stdDeviation="3"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -9"/></filter></svg><span class="gg"><i class="a"></i><i class="b"></i></span></span>Notifications</label>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 Interrupteurs
Voir tout : InterrupteursOù l’utiliser
Deux cercles blancs bougent à des vitesses légèrement différentes sous un filtre SVG gooey : en mouvement, ils fusionnent en une goutte étirée, puis redeviennent une bille ronde à l'arrivée. En même temps, le rail se remplit de la couleur principale. Il apporte un toucher doux et organique aux réglages de notifications, aux applis de musique et aux produits de bien-être.
Le filtre est défini dans le composant, il n'y a rien à ajouter à la page. La vitesse change la durée de l'étirement : rapide, on dirait une éclaboussure, lente, du miel.