Music Disc
Rotating music disc with floating notes animation for map locations.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the music disc component:
npx shadcn@latest add https://www.terrae.dev/music-disc.jsonWith Album Cover
Add a custom album cover image using the image prop. The image will be displayed in the center of the disc.
Custom Colors
Customize the disc appearance with discColor, centerColor, and noteColor props. Adjust the spin speed with spinDuration (in milliseconds).
Static Mode
Disable the spinning animation with spinning=false and hide the floating notes with showNotes=false for a static vinyl record appearance.
Flat on Map
Use pitchAlignment="map" to make the disc lay flat on the map surface when the map is tilted. The default "viewport" keeps it always facing the screen.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
coordinates | [number, number] | required | Map coordinates [longitude, latitude] |
size | number | 64 | Disc size in pixels |
image | string | - | Album cover image URL |
spinning | boolean | true | Enable disc rotation |
spinDuration | number | 4000 | Full rotation duration in milliseconds |
showNotes | boolean | true | Show floating music notes |
noteColor | string | #a855f7 | Color of floating music notes |
discColor | string | #0a0a0a | Main disc background color |
centerColor | string | #171717 | Center label area color |
pitchAlignment | "map" | "viewport" | "auto" | "viewport" | How disc aligns when map is pitched. "viewport" keeps it upright, "map" lays it flat |
className | string | - | Additional CSS classes |
Use Cases
Music Venues
Show concert venues, music stores, or recording studios on the map
Audio Tours
Indicate audio playback points on interactive tour maps