Apps Blog About
Web App · Fun · Vanilla JS

QR Clock

To find out what time it is, you must scan a QR code. That's it. That's the whole app.

🗓️ 17 Mar 2026 🤖 Built with Claude Code ⬛ JS · QR · GitHub Pages

live — scan to read the time

What is QR Clock?

QR Clock is a clock that refuses to show you the time. Instead, it fills the entire screen with a QR code. The QR code contains the current time — plus a short message. The only way to read it is to scan it with your phone.

It updates every second. The message changes every 10 seconds. The whole thing is slightly absurd on purpose.

What you get when you scan

  • The current time in HH:MM:SS format
  • A rotating message — quotes, jokes, fun facts, or a secret code
  • Occasional multi-part stories that unfold across consecutive scans
  • Easter eggs hidden at specific timestamps (try scanning at 11:11:11)

Secret codes

Mixed into the rotation are messages like "Code: DRINK-42 — show this to the bartender." They appear unpredictably. There's no backend, no leaderboard — just the absurdity of discovering a code inside a QR clock and wondering what to do with it.

Why does this exist?

Because the most interesting design constraint isn't "how do we show the time more clearly?" — it's "what if we made it as inconvenient as possible, and put something worth reading inside?"

"The best clock I've ever had to work for."

The idea

I wanted something genuinely weird to put on a screen at an event. Not a slideshow, not a countdown — something that made people reach for their phones for the right reasons. The constraint of "you can only read the time by scanning" felt like the right amount of absurd.

Building with Claude Code

The spec grew quickly once I started writing it out. What started as "QR clock that updates every second" became a layered message system with categories, stories that unfold across time slots, weighted random selection, and easter eggs at exact timestamps.

Claude Code handled all of it in one session — including a production fix when the initial QR library CDN URL turned out to be a dead path, and a full retina/DPI upgrade when it became clear the QR needed to be crisp enough to actually scan.

The entire project — spec, code, deployment, and this page — took a single afternoon.

"The clock works. The messages are better than expected. Scanning a QR to check the time never stops being funny."
Vanilla JS
📷qrcode-generator
🖼️Canvas API
🔷HiDPI / devicePixelRatio
📄Static HTML
🐙GitHub Pages
📊Google Sheets CSV (optional)
🤖Claude Code

No build step. No framework. No backend.

The entire app is three files: index.html, app.js, and messages.js. Open it in a browser and it works. Messages can optionally be pulled from a public Google Sheet CSV — swap the URL in the config and the clock reads from your sheet automatically.

View Source on GitHub →

Got thoughts?

Questions, feedback, or just want to say it helped? All welcome — no account needed, just drop a name and write.