Stillroom

A 7-day map of when your room is actually quiet enough to work.

Comment

Inspiration

I lose more evenings to "I'll start when it gets quieter" than to hard problem sets. Hostels and shared flats do not publish a hallway schedule. You guess, put on headphones, and still jump when a door slams.

If the room has a pattern, a week of measurements should show it. If it does not, you learn that too, and you stop waiting for a silence that is never coming.

What it does

Open https://devsuryansh.github.io/build-beyond-hackathon-devpost/ and allow the microphone. Stillroom scores this room 0-100 from microphone RMS on the device. Audio is never uploaded.

  • Quiet is 32 and below. Workable holds until 55. Above that the room is loud.
  • Start a focus session when you sit down. It records duration, average score, quiet share, and interruptions.
  • An interruption counts only after the score stays at 58 or above for three samples. It ends when the score drops to 42. One slam is not three events.
  • Those samples fill a 7-by-24 heatmap, one cell per hour. From that grid it ranks the quietest two-hour blocks.

The map starts empty. It fills as you measure. Everything lives in localStorage on this browser. No account.

How I built it

TypeScript and Vite, no UI framework. Web Audio API (getUserMedia, AudioContext, AnalyserNode) turns RMS into the room score. Session logic, heatmap buckets, and storage parsing have Vitest coverage. The static build is on GitHub Pages.

Challenges I ran into

Turning RMS into a 0-100 "room" score took more taste than math. Raw decibels feel like a lab instrument. The cutoffs (32 / 55 / 58 / 42) are the part people actually use, so they had to survive a real hallway, not just a unit test.

A generated hostel week made the heatmap look finished on first load. That hid whether the product worked. I deleted the mock week, bumped storage to stillroom.v2, and let the grid start blank.

The needle also lied when I rotated it with CSS. transform-origin in pixels does not follow a scaled SVG. It now rotates in user space around the hub, and eases back to 0 when the mic or session stops.

getUserMedia needs a click and HTTPS. The live demo is on GitHub Pages for that reason.

Accomplishments I am proud of

The app does not fake a week of data. You measure, or the map stays dark.

Interruptions use hysteresis, so one door slam is one cut. That was the difference between a toy meter and a log I would trust after a two-hour session.

The scoring, session, heatmap, and storage paths have tests. The whole thing ships as static files.

What I learned

A demo mode that fills the UI is a liar. Empty is more honest, and it forces the live path to be the product.

Web Audio is local and fast. The hard part is the scale: what number means "I can work" in a hostel at 11pm.

SVG geometry and CSS transforms are different coordinate systems. I learned that the noisy way.

What's next for Stillroom

Per-device calibration, so a laptop mic and a phone agree on 32. Export a week as a file. A reminder when a quiet two-hour block is about to start, still on-device. I am not adding an account.

Built With

Share this project:

Updates

Submission history