Good Flip Clock
Full-screen flip clock app with three modes, custom backgrounds and GPU-accelerated animations.
Overview
A full-screen flip clock built with React 19 and Vite. Three modes: Clock (real-time with animated flip cards), Timer (configurable countdown) and Pomodoro (focus/break cycles).
Features
- 16 WebP backgrounds with multiple fonts and color pickers
- Glassmorphic mode selector with smooth
scaleXtransitions - Floating panels for music (YouTube IFrame API), tasks and notes
- localStorage persistence for all customisation settings
Desktop
- 20-second idle fade-out for distraction-free display
- Full keyboard navigation
Mobile
- Portrait and landscape layouts
- Swipe-to-change mode
- Tap-to-focus chrome collapse
Animation Details
Each digit is split into two halves that rotate independently on the X axis. The top half flips down with rotateX(-180deg) to reveal the new number while the bottom half stays put, then snaps to match. All animations are GPU-safe using CSS transforms and backface-visibility.
What I Learned
A flip animation sounds like “just CSS” until you need it pixel-perfect and buttery smooth at every frame rate. Getting transform-origin, animation-timing-function and the backface visibility interactions right took more iterations than the rest of the app combined.