Flüssiger Toggle
Der Knopf dehnt sich beim Überqueren der Schiene wie ein Tropfen und zieht sich am Ende wieder zusammen.
Einstellungen
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>Benachrichtigungen</label>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 Schalter
Alle ansehen: SchalterWofür du ihn nutzen kannst
Zwei weiße Kreise bewegen sich unter einem SVG-Gooey-Filter mit leicht unterschiedlichem Tempo. In Bewegung verschmelzen sie zu einem gedehnten Tropfen und werden am Ende wieder zu einem runden Knopf, während sich die Schiene mit der Hauptfarbe füllt. Das gibt Benachrichtigungseinstellungen, Musik-Apps und Wellness-Produkten ein weiches, organisches Gefühl.
Der Filter steckt im Komponenten-Code, auf der Seite muss nichts ergänzt werden. Die Geschwindigkeit bestimmt die Dauer der Dehnung: schnell wirkt es wie ein Spritzer, langsam wie Honig.