Mentalist OS - Stardance

Ship #1

@iamsrijitbanerjee on Mentalist OS · 5 days ago

This project started as a simple idea to build a browser-based operating system, but instead of going with the usual sleek dark-mode setup, I wanted to create something with real personality. I’m a huge fan of The Mentalist, so I decided to transform the desktop into a tactile, manila-folder-style detective station straight out of Sacramento CBI headquarters.

Building a Web OS in pure Vanilla JavaScript comes with its own set of puzzles. Balancing smooth window dragging, dynamic z-index stacking, and state management without using heavy frameworks forced me to get creative with DOM handling and local storage. Adding customized widgets—like a tea focus timer, an interactive evidence board, auto-saving field notes, and a Web Audio synth for ambient soundscapes—kept the challenge super fun throughout development.

Drag some case files around, steep a cup of tea in Patrick Jane’s lounge, or generate your own downloadable CBI ID badge. If you feel like exploring, try searching the 50+ character database or look for a few hidden easter eggs tucked away on the desktop.

3 devlogs
2h
WebOS 1

Try project → See source code →

Open comments for this post

@iamsrijitbanerjee on Mentalist OS · 5 days ago

19m 10s logged

The final phase was dedicated to deep show immersion, worldbuilding, and UI polish. I integrated a search bar into the top system bar that lets users look up characters, suspects, and team members from The Mentalist. I also built a CBI Consultant ID Generator that uses HTML5 Canvas to let users create and download their own custom digital badge. To ensure the UI looked polished, I tuned the CSS framing to prevent head cropping on character photos. Finally, to wrap it up, I hid a subtle Red John smiley face on the desktop—clicking it triggers eerie synthesized horror audio, falling blood animations, and flips the entire OS into a high-contrast dark mystery mode. With all submission requirements checked, Mentalist OS 1 is officially complete and ready for testing!

Open comments for this post

@iamsrijitbanerjee on Mentalist OS · 5 days ago

18m 33s logged

With the basic window manager up and running, Phase 2 was all about bringing functional detective utilities to the desktop. I created Patrick’s Tea Lounge, a built-in focus timer widget with steep presets (Earl Grey, Green Tea, Chamomile) and Web Audio API chimes to fulfill the unlisted extra feature requirement. Next, I designed the Evidence Pinboard app using corkboard textures, polaroid cards, and status tags. To make the system feel truly functional, I built the Encrypted Field Notes application. I wired it directly up to local storage so draft notes automatically save and persist even if you refresh the browser, and added a timestamped archive system so notes can be saved and reloaded later.

Open comments for this post

@iamsrijitbanerjee on Mentalist OS · 8 days ago

1h 11m 18s logged

Devlog 1: Laying the Foundation & The Manila VisionWhen I started working on Web OS 1 for the Stardance project, I knew right away that I didn’t want to build just another generic dark-mode desktop. I’m a huge fan of The Mentalist, so I decided to base the entire aesthetic on a warm, tactile CBI detective station. For the first phase, my main focus was setting up the baseline window architecture. I built a custom drag-and-drop window engine from scratch using vanilla JavaScript mouse events (mousedown, mousemove, and mouseup). The trickiest part was getting the dynamic $z$-index focal stacking to work smoothly so that whichever window you click automatically pops to the front. Once the core mechanics were solid, I applied the Manila folder styling, tab stamps, clean window bars, and basic close controls.