shadcn.io is not affiliated with official shadcn/ui
Music Map Music Block for React Aria
A dot map of ten genres pinned to the city they began in, a Born by year Slider that shows only the genres that had begun, a genre Select, and a detail cell with the era, two sentences and ancestors.
Installation
Overview
Let people see where music started and when, with this atlas for React with React Aria. It shows Terraphone, a music-history atlas, in a hairline frame with a plus mark on each corner. A stage band draws the world as a coarse bitmap of round dots, never a real map, with a pin for each of ten genres at its city of origin. Each pin is a real button with the genre's two letters. A "Born by year" Slider from 1880 to 2020 shows only the genres that had begun by that year, drawn heavier the older they are, and a Select in the header jumps to a genre, so the same ten genres are in a list for anyone who cannot use the map. Choosing a pin or an item fills the cell at the end with the genre, its city and country, its era, two sentences and its ancestors as Badges. The map stays left to right in a right-to-left page. No artists are named. It's built from Slider, Select, Badge and Guides, with a CSS entrance only. For music history, education and travel guides.
FAQ
How do I add my own genres?
Edit GENRES and GENRE_ITEMS. A genre has an id, a name, a two-letter mark, the city and country, the year it born, an era in words, two sentences, a list of ancestors and a column and row on the 48 by 20 grid of the land bitmap. A column is 7.5 degrees of longitude from 180 west and a row is 7 degrees of latitude down from about 80 north, so you can place a city by working them out from its coordinates. The pins, the Select and the detail are built from the list.
What does the year slider do?
It hides the pins of genres that had not begun by that year and draws the rest by age: solid for over a hundred years, ringed from 30 to 99 and faint under 30. The count beside the year is worked out from the same list. Choosing a genre that has not begun yet in the Select moves the slider to the year it began, so a chosen genre is never off the map.
Is it a real map?
No. The land is a bitmap of 48 by 20 cells in the source, drawn as one path of round dots, and the pins are placed on it by percentages. It is not to scale and shows no borders. The pins are real buttons with names, so the map is never the only way in: the Select lists the same ten genres.
Does anything play, and what stays local?
Nothing plays and no artists are named. The genres are real ideas with short, invented descriptions, and the years are rounded to the decade a genre is usually dated to. To make it real, load your own list and link each genre to its page.
How do I use it from the keyboard?
Tab through the pins, which are in the order of the list from the oldest genre, and press Enter or Space to choose one. The slider takes the arrow keys for one year and Page Up and Page Down for more, and a polite status line says how many genres are on the map once you stop moving it.