20-20-20 Rule Timer — Eye Break Reminder

What it is

This is a repeating break timer built around the 20-20-20 rule, a widely known habit for people who spend long hours in front of a screen. You work for 20 minutes, then spend 20 seconds looking at something roughly 20 feet (about 6 m) away, then go back to work. The hard part is remembering, so the timer does the remembering for you. When a break starts, the whole panel turns green and shows a large prompt telling you how far to look and for how long. A short beep plays, an optional browser notification appears, and when the break ends the next work block starts on its own. The page also counts how many breaks you have taken in this session.

How to use

1. Keep the defaults (20 minutes of work, 20 seconds of rest) or type your own.
2. Press Start, or hit the Space bar. Space also pauses and resumes.
3. Set the alert volume. If you want a pop-up while you are in another window, tick the browser notification box and allow it when asked.
4. When the green break screen appears, look away from the screen at something far off.
5. The next work block starts automatically. Untick auto-repeat if you only want one round.
6. Skip phase jumps to the end of the current phase. Start over clears the timer and the break count.

How it works

• Work time is a whole number from 1 to 120 minutes (default 20). Break time is 5 to 300 seconds (default 20).
• The timer stores the moment you started and derives the current phase from the elapsed time. One cycle is work plus break, so the page always knows which cycle and which phase you are in.
• Because of that, a tab that was asleep jumps straight to the correct phase when it wakes up, and any breaks that finished in the meantime are counted.
• A break counts once it is finished. Skipping a break also counts it.
• With auto-repeat off, the timer stops after one work block and one break.
• 20 feet = 20 × 0.3048 m = 6.096 m, shown as about 6 m.
• Settings, the running timer, the volume and the notification choice are saved in this browser only, so a reload carries on where you left off.

Examples

Here is what happens with work set to 1 minute and the break to 5 seconds.

Time since Start	Phase	Time left	Breaks taken
0 s	Working	01:00	0
60 s	Eye break	00:05	0
65 s	Working	01:00	1
10 min	Working	00:45	9

Ten minutes is 600 seconds: nine full 65-second cycles take 585 seconds, which leaves 15 seconds into the tenth work block and 45 seconds to go.

Good to know

This is a habit helper for reference only. It is not a diagnosis or treatment, and it makes no promise about what the breaks do for your eyes. If your eyes hurt or your vision becomes blurred, doubled or otherwise changes, see an eye doctor. If you also want to structure focus sessions, the Pomodoro timer pairs well with it.