Oya

Designer & Developer2025Live

OYA: Free Countdown Timer

A keyboard-first countdown timer with Pomodoro mode, colour-coded urgency states, and audio cues. Designed and built as my first AI-assisted project.

freecountdown.xyz

Project details

Stack: HTML
CSS
JavaScript
Web Audio API for the cues

The story

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

This was my first project learning to incorporate AI into my design process. Before OYA, my workflow was strictly Figma → handoff → code. Building this taught me that when a designer can move directly into implementation, the feedback loop shrinks from days to minutes. That insight reshaped every project that followed, from Trainest to Spotta to The Seed Protocol.

Keyboard-first UX

Every action is mapped to a key: Space to start or pause, arrow keys for ±5 seconds, number keys for presets, R to reset. Designed for flow states where reaching for a mouse breaks concentration.

HotkeysAccessibilityFocus UX

Colour-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 colour, not through intrusive popups.

Colour systemVisual feedbackStates

Pomodoro mode

Built-in Pomodoro technique with configurable work and break intervals, round tracking, and automatic transitions. Audio cues notify at key moments without requiring visual attention.

PomodoroAudio cuesPresets

The platform

The OYA timer at rest, showing 00:00 above the minus, plus, play and reset buttons, with the format and preset options below — Main: Empty StateStripped to essentials: time, controls, presets. The grid background provides subtle spatial grounding.

The timer running at 00:15 in green, with a red pause button in place of play, on desktop and mobile — Active: Safe ZoneGreen signals plenty of time remaining. Pause button replaces play.

The timer at 00:06 in yellow, on desktop and mobile — Active: Warning ZoneYellow kicks in as urgency builds. The colour shift is the only signal needed.

The timer at 00:01 in red, on desktop and mobile — Active: Critical ZoneRed means seconds remain. Audio cues intensify alongside the visual urgency.

An “Added 5 seconds” toast above the paused timer at 00:15, on desktop and mobile — Inline FeedbackArrow key adjustments surface a toast: no modals, no disruption, just confirmation.

Pomodoro mode at 25:00, marked Round 1, Work 1, with 25m, 5m and 15m presets, on desktop and mobile — Pomodoro Mode25-minute work sessions with round and work tracking. Presets reconfigure for the technique.

The whole screen flooded red, with a “Time up” badge above a faded 00:00 — Time Up: Full TakeoverThe entire interface floods red. Impossible to ignore, impossible to miss. Audio alarm accompanies the visual shift.

Design decisions

Colour as communication: urgency states

Safe12:45More than half the time remains. Stay in flow; the green says you’re fine.
Warning00:06Time is running low. Yellow creates gentle tension without panic.
Critical00:01Final seconds. Red demands attention. The background floods on expiry.

OYA’s keyboard hotkeys: 1, 2 and 3 for presets, the arrow keys for minus or plus 5 seconds, and Space to start or pause

Keyboard-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 or pause, the universal play key
Arrow keys for ±5 second micro-adjustments
1, 2, 3 for instant preset switching
Double-click presets to customise values

OYA in Pomodoro mode at 25:00 on a laptop, dark against a grey room

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 colour shift demands your attention.

High-contrast typography for glanceability
Subtle grid pattern for spatial grounding
No chrome, no ads, no distractions

Tech stack

Built with

Core: HTML · CSS · JavaScript
Audio: Web Audio API · Custom cues
UX: Keyboard events · CSS transitions
AI workflow: Claude · Cursor

The journey

The 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.

AI accelerates, it doesn’t replace
The design decisions (colour states, keyboard-first UX, dark-by-default) were mine. AI handled the scaffolding; I made the choices that mattered.
Designing in code is designing faster
Iterating directly in the browser gave me feedback in seconds that would have taken hours through a Figma → dev cycle.
Simple products need careful design
With only one screen, every pixel carries weight. The colour transitions, the keyboard mapping, the toast feedback. These are small decisions that define the entire experience.