Most people meet the 20-20-20 rule as advice, follow it for one afternoon,
and lose it the first time work gets loud. The rule fails as a memory task
because it asks you to notice time while you are focused on something else.
Our eye break timer exists because a browser tab can hold the clock so your
attention stays on your work.
The rule, stated precisely
Every 20 minutes of screen work, look at something 20 feet away for 20
seconds. Twenty feet is 6.096 meters, and our tool displays it as
approximately 6 meters.
State the health claim carefully. The rule is a widely recommended habit for
reducing eye strain during long sessions of close-up focus. Our timer
enforces the timing. It does not measure your vision, and it does not treat
anything. If you have persistent headaches, blurred vision, or eye pain, see
an eye care professional instead of a timer.
How the timer counts
The implementation is deliberately small. Two constants define the whole
rhythm.
WORK_SECS = 20 minutes x 60 = 1200 seconds
REST_SECS = 20 seconds
A one-second interval increments a tick counter. When the work counter
reaches 1200, the tool plays a tone, switches to the rest screen, and resets
the counter. When the rest counter reaches 20, it plays the tone again,
increments the completed-cycle count, and returns you to work.
The tone is a 440 Hz sine wave that starts at gain 0.3 and fades to silence
over 0.8 seconds. It fires on every phase transition, so you get one beep to
stop and one beep to resume.
You choose 4, 6, 8, 12, or 16 cycles before starting, with 8 as the default.
Eight cycles cover 160 minutes of work. The label under the cycle buttons
reports that 160 directly as cycles times 20 minutes.
What the session label leaves out
The 160-minute figure counts work time only. Eight rests of 20 seconds add
160 seconds, which is 2 minutes and 40 seconds of wall-clock time. Your full
default session runs 162 minutes and 40 seconds from start to finish.
This is a labeling choice, and you should know about it before you plan a
calendar block around the tool. The cycle count is the number of completed
work-rest pairs, and the tool stops automatically after the final rest ends.
The failure mode we accept
The timer counts ticks, not wall-clock timestamps. It increments a counter
once per interval callback and never checks the real clock against the start
time.
Browsers throttle JavaScript timers in background tabs to save power. If you
move the timer tab to the background, its one-second interval fires less
often, and the 20-minute work phase stretches well past 20 minutes. The tip
line in the tool says to keep the tab open for exactly this reason. Keep the
tab visible in a second window or on a second monitor, and the drift
disappears.
The beep has a second known weakness. The code creates the audio context
inside the timer callback, and some browsers start audio contexts in a
suspended state until they see a direct user gesture. Treat the full-screen
rest overlay as the primary signal and the tone as a bonus that may stay
silent on strict browsers.
Stopping is explicit and destructive. The stop button resets the cycle count
to zero, so pressing it by mistake costs you the session tally.
How to run a session
1. Open the timer page and keep the tab visible for the whole session.
2. Choose a cycle count. Pick 4 for a first trial, which covers 80 minutes
of work.
3. Press Start and work until the rest screen appears.
4. Look out a window or down a corridor at a fixed distant object. Do not
swap one screen for a closer one.
5. Return to work when the timer switches back on its own.
6. Repeat until the tool announces that all cycles are complete.
What the timer does not do
It does not detect how far away you are actually looking. The 20-second rest
screen asks you to look about 6 meters away, and compliance is yours to
enforce. It also keeps no history between sessions, so tracking your daily
total is a manual job. None of our code touches your camera, because
verifying gaze direction that way would cost more trust than it buys.
Checklist for a session that works
- Timer tab stays visible for the entire session.
- Cycle count matches the length of your work block.
- A window or long room is within view for the rest phases.
- Volume is up if you depend on the beep.
- Persistent symptoms go to an eye care professional, not to another cycle.
Try the timer yourself at /eye-break. If you measured how far your work
phases stretched in a backgrounded tab, send us the browser and the numbers,
because that data would tell us exactly when to switch the implementation
from tick counting to wall-clock timestamps.
