shadcn.io is not affiliated with official shadcn/ui
Earthquake Monitor Map Block for React Aria
Forty sample quakes as rings on a dot map of the world, a magnitude slider, a two-thumb slider for the fortnight under a day-by-day bar chart, and a list of the five largest in the window.
Installation
Overview
Watch where the ground has moved, with this earthquake monitor map for React with React Aria. Tremorwell, a seismology service, draws forty sample quakes on a dot map of the world: each is a ring that grows with its magnitude and carries a tick below it that gets longer with its depth. A single Slider sets the smallest magnitude shown (2 to 8), and a two-thumb Slider under a day-by-day bar chart sets the time window across the last 14 days; the bars outside the window fade so the chart and the map always agree. The five largest quakes in the window are a list of buttons, and pressing one rings it on the map with its magnitude, region, depth and age. A window or a magnitude with nothing in it shows an empty state inside the list's own box, so the page never changes height. The map scrolls sideways on a phone. A polite message reads the count and the largest quake once a slider settles. It's built from Slider, Empty and Guides, with a CSS entrance only. For seismology, insurance, education and news tools.
FAQ
How do I use my own quakes?
Edit LINES, one quake per line: id, region, column, row, magnitude, depth in kilometres and hours ago. The column and row are positions on the 48 by 20 dot grid, where a column is 7.5 degrees and a row 7. The rings, the bars, the counts and the list are all worked out from those lines and the two sliders.
Is this a live feed?
No. The forty quakes are a typed sample written once, placed along real fault regions named in text, and the caption says so. In your app load the catalogue from a seismic service for the window you show, and keep the same filtering on the client.
How is the depth shown?
By the tick under each ring (short, medium or long) and by a word in the list, shallow under 70 km, intermediate to 300 km and deep beyond. Nothing depends on colour.
Can I use it without a mouse?
Yes. Both sliders take the arrow keys and speak their values ("From 9 days ago"), the five largest quakes are buttons, and the map section scrolls with the arrow keys on a phone. A polite message gives the new count once a slider settles.