- Reunión de equipo
- Gimnasio
Circular theme switch reveal
Pressing the sun or moon expands the new theme in a circle from the button until it covers the card.
Settings
Code
<div class="uv-mth"><div class="sc"><header><div><small>Tuesday, 21 October</small><b>Good morning</b></div><button type="button" class="tg" aria-pressed="false" aria-label="Dark mode"><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>Sunny in Madrid</span></div><ul><li><i style="--c:#6366f1"></i>Team meeting<time>10:00</time></li><li><i style="--c:#10b981"></i>Gym<time>19:30</time></li></ul></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
Switching between light and dark becomes a small event. A copy of the interface in the new theme grows as a circle from the center of the toggle until it covers the whole card, so the change feels like light spreading rather than a flash. Sun and moon icons swap, and the weather card changes from warm orange to deep indigo.
The circle is a clip path animated with the Web Animations API from the button position. The toggle uses aria-pressed, keeps focus after the switch and skips the animation for reduced motion. Accent and dark background colors are adjustable.