Inspiration

A driver's risk is invisible until it isn't. We wanted to make it tangible—not through a dry quiz or a PDF of statistics, but through an experience you can actually feel. Inspired by WEHack's "Night at the Museum" theme, we asked: what if your driving history became an exhibit? What if the risks you take on the road were artifacts on display, waiting to be examined? NocTurn was born from that idea: a living museum where you are the primary collection.

What it does

NocTurn is a personalized driving risk assessment experience built for the State Farm challenge. Users enter our digital museum, sign the guest register, and step through a multi-part journey:

The Registry: A 7-question Risk Intake Quiz covering driving history, vehicle type, and past accidents.

The Guide: Users select a historical Tour Guide (like Marcus Aurelius) who narrates their journey through a unique philosophical lens.

The Driving Chamber: The centerpiece of the app. It's a 30-second interactive simulation where the user navigates a corridor using arrow keys, dodging artifacts and reacting to prompts. "The Curator" tracks speed, distractions, hard brakes, and collisions in real-time to generate a live Risk Index Score out of 100.

The Exhibit: Users walk through a personalized gallery of relics collected during their drive.

State Farm Integration: A dynamic final panel showing crash detection features, digital claims eligibility, and actual State Farm discounts based on the user's specific simulation performance and estimated monthly savings.

How we built it

We kept the stack lightweight and fast: pure HTML, CSS, and vanilla JavaScript, deployed directly via GitHub Pages. We built a custom 2D lane-rendering system for the driving simulation. To sell the theme, we leaned heavily into a "dark academia" aesthetic using custom CSS animations, intricate gold borders, and a deep navy color palette.

Challenges we ran into

Tuning the physics and artifact spawn rates in the driving simulator was a massive time sink. We had to iterate constantly to make the simulation feel fair while still generating enough behavioral variance across different users to be useful. Deployment also fought us—GitHub Pages introduced pathing and asset-loading issues that we had to debug while the clock was ticking down. Design-wise, keeping the museum metaphor cohesive from the landing page to the final State Farm results panel without it feeling forced or cheesy was a tough balancing act.

Accomplishments that we're proud of

The end-to-end flow just works. It feels like a cohesive, polished product rather than a duct-taped hackathon prototype. We're incredibly proud that the State Farm panel dynamically reacts to actual behavior—if you crash in the simulation, your "collision-free discount" instantly updates to show as not earned, making the final output brutally personalized. The visual design was dialed in enough that multiple people stopped by and asked if it was an official branded State Farm experience. Also, shipping a working, interactive simulator in a single hackathon session is a huge win for the team.

What we learned

Narrative framing completely changes how people engage with their personal data. By wrapping risk statistics in a museum metaphor, users actually wanted to see their score rather than dreading it. We also realized that real-time behavioral data—even in a web game—is infinitely more compelling than a static multiple-choice quiz. Finally, we learned that under intense time pressure, executing a clean aesthetic and a few core features flawlessly beats trying to cram in everything.

What's next for NocTurn

AI Tour Guides: Hooking up a real LLM API so the historical guides deliver fully conversational, dynamic commentary based on the user's exact driving profile.

Advanced Simulation: Adding weather events, night driving conditions, and distraction prompts (like pop-up text messages) to the Driving Chamber.

Retention Mechanics: Implementing streaks and badges for return visits so users can actively track their risk score improvements over time.

Mobile & Telematics: Building mobile support for the driving chamber and eventually pulling real accelerometer data from the user's phone to bridge the gap between simulation and actual driving habits.

Real-Time Dash Cam Integration: We want to incorporate live dash cam support using computer vision to monitor the driver and the road. This would let NocTurn determine risk scores dynamically and provide active, in-the-moment assistance to help users navigate hazards as they are actually driving.

Built With

  • animation
  • backend
  • css
  • fonts
  • frontend
  • geminiapi
  • graphic
  • html
  • javascript
  • storage
  • svg
  • webaudioapi
  • windsurf
+ 2 more
Share this project:

Updates