- Reunión de equipo
- Gimnasio
Kreisförmiger Themenwechsel
Ein Klick auf Sonne oder Mond lässt das neue Thema als Kreis vom Knopf aus wachsen, bis die Karte bedeckt ist.
Einstellungen
Code
<div class="uv-mth"><div class="sc"><header><div><small>Dienstag, 21. Oktober</small><b>Guten Morgen</b></div><button type="button" class="tg" aria-pressed="false" aria-label="Dunkelmodus"><span class="su"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span><span class="mo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg></span></button></header><div class="wx"><b>22°</b><span>Sonnig in Madrid</span></div><ul><li><i style="--c:#6366f1"></i>Teammeeting<time>10:00</time></li><li><i style="--c:#10b981"></i>Fitnessstudio<time>19:30</time></li></ul></div></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 Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Der Wechsel zwischen hell und dunkel wird zu einem kleinen Ereignis. Eine Kopie der Oberfläche im neuen Thema wächst als Kreis aus der Mitte des Schalters, bis sie die ganze Karte bedeckt, sodass der Wechsel wie sich ausbreitendes Licht wirkt. Sonne und Mond tauschen, und die Wetterkarte wird von warmem Orange zu tiefem Indigo.
Der Kreis ist ein clip-path, animiert mit der Web Animations API ab der Knopfposition. Der Schalter nutzt aria-pressed, behält den Fokus nach dem Wechsel und verzichtet bei reduzierter Bewegung auf die Animation. Akzent und dunkler Hintergrund sind einstellbar.