OYA – Free Countdown Timer
A keyboard-first countdown timer with Pomodoro mode, color-coded urgency states, and audio cues. Designed and built as my first AI-assisted project.
The first project where I used AI as a building partner. Learning to design in code instead of designing then coding.
OYA started as a simple need: a countdown timer that felt focused and intentional, not cluttered with ads and unnecessary features. Every free timer online felt like it was designed by committee.
More importantly, this was the project where I first explored AI-augmented development. Instead of designing in Figma first, I worked directly in code, using AI to rapidly prototype ideas, iterate on interactions, and ship a polished product in a fraction of the usual time. It changed how I think about the design-to-code pipeline.
The result is a tool I use every day: dark, distraction-free, keyboard-driven, and honest about time running out.
Where it began
Keyboard-First UX
Every action is mapped to a key: Space to start/pause, arrow keys for ±5 seconds, number keys for presets, R to reset. Designed for flow states where reaching for a mouse breaks concentration.
Color-Coded Urgency
The timer transitions from green → yellow → red as time depletes, with a full-screen red takeover when time expires. Urgency is communicated through color, not through intrusive popups.
Pomodoro Mode
Built-in Pomodoro technique with configurable work/break intervals, round tracking, and automatic transitions. Audio cues notify at key moments without requiring visual attention.
Color as communication
Urgency StatesKeyboard-first, not mouse-optional
Most timer apps treat keyboard shortcuts as a nice-to-have. OYA was designed around them. When you're deep in a work session, moving your hand to a mouse breaks flow. Every action (start, pause, adjust, reset, switch presets) lives on a key you don't have to look for.
- Space for start/pause, the universal play key
- Arrow keys for ±5 second micro-adjustments
- 1, 2, 3 for instant preset switching
- Double-click presets to customize values
Dark by default, distraction-free
The dark interface isn't an aesthetic choice. It's a functional one. When OYA is running on a second monitor or in a corner of your screen, it shouldn't compete with your actual work. The dark background disappears into your periphery until the color shift demands your attention.
- High-contrast typography for glanceability
- Subtle grid pattern for spatial grounding
- No chrome, no ads, no distractions
Built With
Full StackThe project that changed my process
OYA was small in scope but massive in impact. It was the proof-of-concept that a designer could use AI to skip the handoff entirely: going from idea to live product in a matter of days rather than weeks.