A Minimalist 12‑Minute Meeting Timer Runs Anywhere in the Browser
I stumbled across a single‑page web app that turns a blank screen into a 12‑minute countdown you can start with a random click, and it runs just as well on a laptop as on a phone—no download, no plug‑in, nothing to install. It feels like a tiny hack for anyone who’s ever wished they could set a timer without opening a separate app or digging through settings.
The same page also lets you play a loop of realistic office chatter. The idea is simple: schedule a “meeting” that never actually happens, click the link in the invite, and let the background noise do the talking. It’s a low‑tech way to protect your calendar from well‑meaning interrupters who love to steal a few minutes. When the reminder pops up, you can join the phantom meeting and look busy without ever opening a video call.
If you’ve ever tried to hide a quick break or needed a hard stop for a task, this might be the tool you didn’t know you needed. I’ll walk through how the timer works, why the audio loop is more than a joke, and what the limits are when you try to use it in a real workday. Ready to see if a blank page can actually save you time?
Why a 12‑Minute Timer Matters
Most daily stand‑ups try to stay around twelve minutes because that window forces the team to surface blockers without drifting into status reports. When a clock isn’t visible, the conversation easily slips past the sweet spot and you end up with “meeting creep” – a few extra minutes that feel harmless until the day’s schedule is shredded. A dedicated timer puts the limit in front of everyone’s eyes, so the pressure to wrap up comes from the UI, not from a vague agenda note.
The timer we built sticks to a single purpose and does it without any fluff:
- twelve minutes per meeting
- random start point so the first round never feels rehearsed
- full‑screen toggle with the F key, which also works when the site is added to a phone’s Home Screen
- “Back‑to‑back meetings” option that switches between sequential playback and looping playback
“Awesome, if I worked in the UK.” – a user who appreciates the strict cut‑off. “haha, now I can always use this website if I don’t want to be interrupted lol” – another who likes the lean design.
Below is a minimal HTML / JavaScript snippet that demonstrates the core behavior. It sets a 12‑minute countdown, picks a random offset, listens for F to go full screen, and toggles looping with a checkbox. The code is self‑contained and can be dropped into any static page.
<!-- Simple 12‑minute timer with random start, fullscreen (F), and loop toggle -->
<!DOCTYPE html>
<html lang="en">
<body>
<div id="timer"></div>
<label><input type="checkbox" id="loop"> Back‑to‑back meetings (loop)</label>
<script>
const TOTAL = 12 * 60; // 12 minutes in seconds
let offset = Math.floor(Math.random() * TOTAL); // random start point
let remaining = TOTAL - offset;
const timerEl = document.getElementById('timer');
const loop = document.getElementById('loop');
function update() {
const m = Math.floor(remaining / 60);
const s = remaining % 60;
timerEl.textContent = `${m}:${s.toString().padStart(2, '0')}`;
if (--remaining < 0) {
if (loop.checked) remaining = TOTAL; // restart if looping
else clearInterval(id);
}
}
const id = setInterval(update, 1000);
update();
// fullscreen toggle with the F key
document.addEventListener('keydown', e => {
if (e.key === 'f' || e.key === 'F') {
if (!document.fullscreenElement) document.documentElement.requestFullscreen();
else document.exitFullscreen();
}
});
</script>
</body>
</html>Core Features and Interaction Model
The timer starts at a random point inside the twelve‑minute window each time you load the page, so the countdown never feels stale. When you enable the “Back‑to‑back meetings” switch, the app either loops the same random slice or queues a new slice for the next meeting, which mimics the way real‑world calendar slots can bleed into each other. I like that the randomness is deterministic only while the page lives—refresh and you get a fresh start, which keeps the mental model simple.
Full‑screen mode is bound to the F key, so you can hide the browser chrome with a single press and focus on the countdown. On mobile, selecting “Add to Home Screen” installs a manifest that launches the app in true full‑screen, eliminating the address bar and any accidental taps outside the UI. The interface itself is deliberately thin: a large numeric timer, a green “in‑meeting” badge, and nothing else. As one user put it, “Awesome, if I worked in the UK,” while another laughed, “haha, now I can always use this website if I don’t want to be interrupted lol.”
<!-- Minimal page that hooks F‑key fullscreen and shows the timer -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meeting Timer</title>
<link rel="manifest" href="/manifest.json">
<style>
body { margin:0; display:flex; align-items:center; justify-content:center; height:100vh; background:#111; color:#fff; font-family:sans-serif; }
#timer { font-size:8rem; }
#badge { position:absolute; top:1rem; right:1rem; background:#0c0; padding:.3rem .6rem; border-radius:.3rem; }
</style>
</head>
<body>
<div id="badge">in‑meeting</div>
<div id="timer">12:00</div>
<script>
// F‑key toggles fullscreen; if already fullscreen, exit
document.addEventListener('keydown', e => {
if (e.key === 'f' || e.key === 'F') {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
});
// Simple countdown logic (12 min → 0)
let remaining = 12 * 60;
const timerEl = document.getElementById('timer');
setInterval(() => {
remaining--;
const m = String(Math.floor(remaining / 60)).padStart(2, '0');
const s = String(remaining % 60).padStart(2, '0');
timerEl.textContent = `${m}:${s}`;
if (remaining <= 0) clearInterval(this);
}, 1000);
</script>
</body>
</html>The manifest referenced above contains only the fields required for a true full‑screen launch:
{
"name": "Meeting Timer",
"short_name": "Timer",
"display": "standalone",
"start_url": "/",
"icons": [{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }]
}Both snippets are small enough to drop into an existing static site and give you the exact interaction model the description promises.
Building the Timer with Plain HTML/CSS/JS
The timer is a single‑page app that runs entirely in the browser. It picks a random start offset between 0 and 11 minutes, counts down in real time, and lets you flip into fullscreen with the F key. Because it’s just HTML, CSS, and a few lines of JavaScript, you can drop it into any static site or serve it from a CDN without pulling in a framework.
<!-- index.html: minimal markup for the clock -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12‑minute meeting timer</title>
<link rel="manifest" href="manifest.json">
<style>
body {font-family: sans-serif; text-align: center; margin-top: 20vh;}
#clock {font-size: 4rem;}
button {margin-top: 1rem; padding: .5rem 1rem;}
</style>
</head>
<body>
<div id="clock">12:00</div>
<button id="fsBtn">Fullscreen (F)</button>
<script src="timer.js"></script>
</body>
</html>The JavaScript lives in timer.js and does three things: generate a random offset, drive the countdown, and bind the fullscreen toggle to the F key. The “back‑to‑back meetings” option flips a Boolean that determines whether the timer restarts automatically after hitting zero.
// timer.js: core logic – no framework, no build step
const clockEl = document.getElementById('clock');
const fsBtn = document.getElementById('fsBtn');
let sequential = false; // toggled elsewhere if you need looping
function startTimer() {
const offset = Math.floor(Math.random() * 12) * 60; // 0‑11 min in seconds
let remaining = 12 * 60 - offset;
updateDisplay(remaining);
const tick = setInterval(() => {
remaining--;
updateDisplay(remaining);
if (remaining <= 0) {
clearInterval(tick);
if (sequential) startTimer(); // loop for back‑to‑back meetings
}
}, 1000);
}
function updateDisplay(sec) {
const m = String(Math.floor(sec / 60)).padStart(2, '0');
const s = String(sec % 60).padStart(2, '0');
clockEl.textContent = `${m}:${s}`;
}
// Fullscreen on button click or “F” key
function requestFS() { document.documentElement.requestFullscreen(); }
fsBtn.addEventListener('click', requestFS);
window.addEventListener('keydown', e => { if (e.key === 'f') requestFS(); });
startTimer();> “Awesome, if I worked in the UK.” > “haha, now I can always use this website if I don’t want to be interrupted lol”
To make the page installable on a phone, we ship a tiny Web App Manifest and a service worker that caches the three assets above. When the user taps “Add to Home Screen,” the browser launches the page in a standalone window, and the fullscreen API ensures the clock fills the screen just like a native timer app.
// sw.js: extremely small service worker for offline support
self.addEventListener('install', e => {
e.waitUntil(caches.open('timer-v1').then(cache =>
cache.addAll(['/', '/index.html', '/timer.js', '/manifest.json'])
));
});
self.addEventListener('fetch', e => {
e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});The specs that drive the behavior are:
- twelve‑minute meeting length
- random start point between 0 and 11 minutes
- fullscreen toggle bound to the F key
- “Add to Home Screen” launches in full‑screen mode on mobile
- optional “back‑to‑back meetings” switch that loops the timer
All of that fits in under 200 lines of code and runs in any modern browser. No build step, no npm install, just open index.html and you’ve got a functional, PWA‑ready timer.
Deploying and Using It in Real Meetings
People have turned the YouTube “generic meeting” clip into a kind of office meme: drop it into a calendar invite, hit “share screen,” and you instantly have a backdrop that says “I’m in a meeting” without anyone having to actually speak. That trick works because the video is long enough to cover most time slots and the visual cues—people nodding, a whiteboard, a projector—are generic enough to pass as any typical sync. The downside is obvious: the audio is a single British accent, which makes the illusion break for teams that aren’t used to it, and it also highlights how thin the supply of ready‑made meeting assets really is.
The thread about technical glitches shows the practical friction point. When the video loops or the file size stalls, the whole charade collapses, and people end up troubleshooting the playback instead of focusing on their work. That has a two‑fold implication. First, it reveals a latent demand for higher‑quality, low‑latency meeting stand‑ins that can survive the bandwidth constraints of corporate VPNs. Second, it pushes the conversation toward more authentic sounding audio—real‑human clips that can be swapped in without re‑encoding the whole video.
I suspect we’ll see a modest wave of community‑built replacements: short, modular video snippets that let you mix and match visual and audio tracks, perhaps hosted on a lightweight CDN. Whether that will evolve into a standard “meeting placeholder” library or stay a niche workaround depends on whether the cost of creating and maintaining those assets is lower than the friction they’re trying to hide. If the latter, we might see a small market for plug‑and‑play meeting “ghosts” that are more adaptable than the current one‑size‑fits‑all clip. The open question is whether organizations will tolerate the hygiene risk of faking presence, or if policy will shift to make such tactics overtly undesirable.
Conclusion
Twelve minutes feels oddly specific, but the timer’s random start point and built‑in background audio make it more than a plain countdown—it's a cheap, browser‑native way to convince anyone within earshot that you’re “in a meeting.” The fact that you can drop a fake invite into your calendar, hit F for fullscreen, and let a plausible‑sounding recording run without any server side code is impressive in its own right, even if it’s essentially a clever UI trick.
I’m still not sure whether this solves the underlying issue of time‑theft at work or just adds a new layer of performative busyness. If you’re curious, spin it up on a static host, set the timer for a slot you know will be empty, and see whether the illusion actually buys you any breathing room. If it doesn’t, you’ll at least have a tidy piece of vanilla JavaScript to study.