At the same time, I had an old phone sitting in a drawer, gathering dust. The screen was still perfect, so I thought: why not turn it into a dedicated desk clock?
I looked for existing solutions, but most were native apps requiring an install, cluttered with ads, or just didn't look right. So, I decided to build the tool I wished existed.
It's a dead-simple, fullscreen flip clock. As the title says: no app to install, no ads, and no signup needed. Just open the URL on your device, and you're done.
My plan is to always keep this core flip clock experience exactly as it is now: free and simple. To support the project, I might add more advanced widgets in the future as optional, paid features, like photo gallary, todo list, weather, timer, etc.
So, my question for you is: What's the one widget you would find most useful on a dedicated dashboard device like this?
I'd love to hear your feedback and ideas!
Shawn1991•6h ago
To make this runnable 24/7 on an old device without turning it into a hand-warmer. This meant focusing heavily on performance and efficiency.
The core idea was to separate static content from dynamic content to avoid unnecessary, expensive redraws on every frame. Here’s how I approached it:
This meant moving beyond simple CSS animations and focusing on a more optimized rendering approach.
Here's what I did:
- Off-Screen Canvas: Instead of manipulating DOM elements directly for each animation tick, I use an off-screen canvas to pre-render the state of the clock digits. This avoids triggering constant, expensive layout shifts and repaints on the main page, making the animation much smoother.
- Event-Driven Rendering: The clock doesn't just redraw on every requestAnimationFrame. It's smarter than that. I implemented an event-driven model where the rendering logic only triggers when a digit actually needs to change (i.e., once per second for the seconds, once per minute for the minutes, etc.).
This decoupling of rendering from the animation frame rate saves a surprising amount of CPU cycles, which is crucial for older devices.