- Reunión de equipo
- Gimnasio
Cambio de tema con círculo expansivo
Al pulsar el sol o la luna, el nuevo tema se expande en círculo desde el botón hasta cubrir la tarjeta.
Ajustes
Código
<div class="uv-mth"><div class="sc"><header><div><small>Martes, 21 de octubre</small><b>Buenos días</b></div><button type="button" class="tg" aria-pressed="false" aria-label="Modo oscuro"><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>Soleado en Madrid</span></div><ul><li><i style="--c:#6366f1"></i>Reunión de equipo<time>10:00</time></li><li><i style="--c:#10b981"></i>Gimnasio<time>19:30</time></li></ul></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Pasar de claro a oscuro se convierte en un pequeño momento. Una copia de la interfaz con el nuevo tema crece en círculo desde el centro del botón hasta cubrir la tarjeta entera, así el cambio parece luz que se extiende y no un parpadeo. Los iconos de sol y luna se intercambian y la tarjeta del tiempo pasa de naranja cálido a añil profundo.
El círculo es un clip-path animado con la Web Animations API desde la posición del botón. El interruptor usa aria-pressed, mantiene el foco tras el cambio y omite la animación con movimiento reducido. El acento y el fondo oscuro se pueden ajustar.