Good Flip Clock
Reloj flip a pantalla completa con tres modos, fondos personalizables y animaciones aceleradas por GPU.
Descripción
Un reloj flip a pantalla completa construido con React 19 y Vite. Tres modos: Reloj (tiempo real con tarjetas flip animadas), Temporizador (cuenta atrás configurable) y Pomodoro (ciclos de concentración y descanso).
Funcionalidades
- 16 fondos WebP con múltiples fuentes y selectores de color
- Selector de modo glassmórfico con transiciones suaves
scaleX - Paneles flotantes para música (YouTube IFrame API), tareas y notas
- Persistencia en localStorage para todos los ajustes de personalización
Escritorio
- Fade-out automático a los 20 segundos de inactividad para pantalla libre de distracciones
- Navegación completa por teclado
Móvil
- Layouts en vertical y horizontal
- Desliza para cambiar de modo
- Pulsa para ocultar la interfaz
Detalles de Animación
Cada dígito se divide en dos mitades que rotan independientemente en el eje X. La mitad superior gira hacia abajo con rotateX(-180deg) para revelar el nuevo número mientras la mitad inferior permanece fija y luego se ajusta. Todas las animaciones son seguras para GPU usando transformaciones CSS y backface-visibility.
Lo que Aprendí
Una animación flip suena a “solo CSS” hasta que necesitas que sea pixel-perfect y fluida a cualquier frame rate. Conseguir que transform-origin, animation-timing-function y las interacciones de backface visibility funcionasen bien llevó más iteraciones que el resto de la app combinada.