Team Snoopy

• 

  Main Menu

• 

  Buildings Collasping

• 

  End Game

Inspiration

Southern California’s seismic history is rich with real data, but it is typically experienced as static charts or isolated event reports. The goal of The Quake Driver was to transform that data into something interactive, allowing users to experience time as a physical journey through decades of real earthquakes and their ground-level effects.

What it does

The Quake Driver lets users drive through 26 years of real Southern California earthquake history. As the car moves forward, time advances and the environment updates using USGS earthquake data and Scripps ground velocity simulations. Buildings, terrain, and surroundings respond dynamically to each seismic event, creating a continuous, interactive timeline of real-world earthquakes.

How we built it

We built the application using TypeScript, React, and Next.js (App Router), with Three.js (WebGL) for 3D rendering in the browser. A Rapier physics engine (@dimforge/rapier3d-compat) was used to simulate realistic physical responses of buildings, terrain, and environmental structures during earthquakes. The system runs locally with static datasets loaded from public assets (USGS and Scripps data), which are mapped onto a time-based simulation layer that drives world updates as the player moves forward. Node.js and npm/bun manage the runtime and tooling, with CSS, TailwindCSS, ESLint, and TypeScript ensuring structure and type safety across the codebase. For deployment, we use a self-hosted server with a Railpacks configuration for the project.

Challenges we ran into

The hardest technical challenge was building the interaction between the car and the dynamic, shaking world. Getting the vehicle to behave correctly under changing ground forces, physics disturbances, and collision updates was extremely difficult. We had to carefully tune Rapier physics constraints to ensure the car remained controllable while still reacting realistically to seismic motion. Synchronizing vehicle movement with earthquake-driven terrain deformation was another major difficulty.

Accomplishments that we're proud of

We successfully integrated real seismic datasets with a fully interactive 3D physics simulation. The combination of Rapier physics and Three.js allowed us to simulate both structural destruction and ground motion in real time. Most importantly, we built a system where time, physics, and navigation are unified into a single coherent experience.

What we learned

We learned how to combine geospatial time-series data with real-time physics simulation in a browser environment. We also gained experience in managing complex interactions between vehicle dynamics and environmental physics, especially under non-stationary forces like earthquakes. Additionally, we improved our understanding of WebGL performance constraints and physics tuning in real-time systems.

What's next for The Quake Driver

We plan to expand beyond Southern California to include broader global seismic datasets, improve destruction modeling for more accurate structural failure, and refine vehicle dynamics under extreme conditions. Future versions may include analytical overlays for fault lines, predictive seismic visualization tools, and improved terrain deformation systems for higher fidelity earthquake simulation.

Built With

• css
• next.js
• node.js
• rapier
• react
• tailwind
• three.js
• typescript