shadcn.io is not affiliated with official shadcn/ui
Coral Reefs Map Block for Vue
Nine reefs on a drawn sea with a warming scenario toggle (Today, +1, +2, +3 degrees) that sets bleaching risk by ring thickness and a word, three filter cells that count reefs at each level, and a reef list with species counts.
Installation
Overview
See which reefs bleach as the sea warms, with this coral reefs map for Vue with Ark UI. Atollwatch, a reef monitoring group, draws nine reefs on a stretch of sea. A Toggle Group picks a scenario (Today, +1, +2 or +3 degrees) and each reef's bleaching risk is set from its typed base and its sensitivity to each degree. Risk is told three ways: a ring of one, three or six pixels, a word under it (High, Medium, Low) and the number out of 100 in the list. Three cells under the map count the reefs at each level, for example "4 of 9 reefs at high risk", and are filters for the list, which holds its height and shows an empty state when a level has no reefs. The chosen reef's card gives its risk index and its coral and fish species counts. It's built from Toggle Group, Empty and Guides, with a CSS entrance only. For marine charities, reef managers and climate dashboards.
FAQ
How is the risk worked out?
riskOf adds the reef's sensitivity for every degree of warming to its base index and stops at 100. High is 70 and over, Medium 40 to 69, Low under 40. The bases and sensitivities are typed in LINES and invented for this demo.
How do the filter cells work?
Each of the three cells is a button with a pressed state: press one to show only the reefs at that level, press it again to clear. The list keeps a hidden copy of all nine rows so its height never changes, and the empty state is reachable, for instance High at Today.
Is ring thickness the only signal?
No. Every pin also says High, Medium or Low in words and carries its number, and the list repeats both for each reef.
Can I use it without a mouse?
Yes. The scenarios are a toggle group, the filters are buttons and every reef is a button in the list; the pins on the map are a pointer shortcut and are hidden from assistive technology. A polite message gives the counts and the chosen reef once the choice settles.
What stays local in the demo, and how do I wire it up?
All of it. The sea, the reefs, the risk model and the species counts are invented and typed into the file; nothing is fetched, published or saved. In your app replace riskOf with your bleaching model or a lookup of published projections and keep the three levels.