An interactive disaster simulator for the Philippines. Simulate earthquakes and typhoons, visualize their impact across 26 major cities, and see how terrain affects intensity in real time.
Built as a personal project to better understand how natural disasters affect different regions of the country — and to make that information visual and intuitive.
TremorPH lets you simulate two types of natural disasters:
Click a location on the map to set the epicenter, adjust the magnitude and depth, then hit Simulate:
- Seismic wave propagation — P-waves (blue) and S-waves (red) expanding outward at realistic speeds
- Progressive city impacts — cities light up as the S-wave reaches them, closest first
- Screen shake — the interface shakes during simulation, scaled to the earthquake's magnitude
- Isoseismal contours — concentric rings showing PEIS intensity zones
- Detailed impact data — click any city to see PEIS level, estimated PGA, distance, and wave arrival time
Draw a typhoon track on the map by clicking waypoints, set the wind speed and radius, then simulate:
- Track drawing — click to add waypoints, forming the typhoon's path across the Philippines
- Animated typhoon eye — a rotating spiral moves along the drawn track
- Terrain interaction — the typhoon weakens over land and mountains, recovers over warm ocean
- Wind signal contours — PAGASA Signal #1–#5 zones shown after simulation
- Rain overlay — animated rain effect scaled to storm intensity
- City impacts — wind speed, rainfall, storm surge risk, and terrain effects per city
- Intensity Prediction Equation — Bakun & Wentworth (1997) and Allen et al. (2012), the same approach used by USGS ShakeMap
- Hypocentral Distance — true 3D distance from source, so depth matters
- Near-Source Saturation — Wells & Coppersmith (1994) fault rupture scaling prevents unrealistic intensity spikes
- PHIVOLCS PEIS — results mapped to the official Philippine Earthquake Intensity Scale (I–X)
- PGA Estimation — Wald, Quitoriano, Heaton & Kanamori (1999) MMI-to-PGA relationship
- Wave Speeds — P-waves at ~6 km/s, S-waves at ~3.5 km/s (average upper-crustal velocities)
- Holland (1980) Wind Profile — standard parametric model used by PAGASA and JTWC for radial wind distribution
- PAGASA PSWS — Philippine Public Storm Warning Signals #1–#5 classification
- Kaplan & DeMaria (1995) Decay — exponential weakening over land (~9.5%/hr for flat terrain)
- Terrain Interaction — Philippine terrain map with Sierra Madre, Cordillera, and urban areas. Mountains increase decay rate (Philippine Journal of Science 2023)
- Emanuel MPI Theory — slight intensity recovery over warm ocean based on sea surface temperature
- Empirical Rainfall Model — eyewall-centered distribution with outer rain band structure
- Storm Surge Risk — simplified wind speed-based assessment
This is an educational tool, not a hazard assessment platform. It does not account for:
- Local soil conditions or site amplification
- Fault geometry, rupture directivity, or slip type
- Typhoon track dynamics, forward speed variability, or Coriolis effects
- Actual bathymetry for storm surge modeling
- Building vulnerability or structural response
For official information, always refer to PHIVOLCS and PAGASA.
Make sure you have Node.js (v18+) installed.
# Clone the repository
git clone https://github.com/jansencruz23/tremor-ph.git
cd tremor-ph
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:5173 in your browser.
- React 18 with TypeScript
- Vite for development and builds
- Leaflet + React-Leaflet for interactive mapping
- Framer Motion for UI animations
- Tailwind CSS 4 for styling
- Select Earthquake mode in the sidebar
- Click the map to set the epicenter
- Adjust magnitude (4.0–9.0 Mw) and depth (1–100 km)
- Click Simulate and watch the waves propagate
- Click city markers for detailed impact data
- Select Typhoon mode in the sidebar
- Click the map to draw a track (at least 2 waypoints)
- Adjust max wind speed (45–350 km/h) and radius of max winds
- Click Simulate and watch the typhoon traverse the path
- Observe how the typhoon weakens over mountains and land
src/
├── components/
│ ├── Map.tsx # Leaflet map with earthquake/typhoon visualization
│ ├── ControlPanel.tsx # Mode toggle, parameters, presets, stats
│ └── InfoModal.tsx # About/disclaimer modal
├── data/
│ ├── cities.ts # 26 Philippine cities
│ ├── faultLines.ts # Major fault lines
│ ├── historicalEarthquakes.ts # 6 historical earthquake presets
│ └── historicalTyphoons.ts # 6 historical typhoon presets with tracks
├── utils/
│ ├── simulation.ts # Earthquake physics engine
│ ├── typhoonSimulation.ts # Typhoon physics engine (Holland model, PAGASA)
│ └── terrainModifier.ts # Philippine terrain map + wind decay model
├── hooks/
│ └── useMediaQuery.ts # Responsive design hook
├── App.tsx # Main state management and orchestration
├── main.tsx # Entry point
└── index.css # Theme, animations, typhoon eye, rain overlay
MIT