shadcn.io is not affiliated with official shadcn/ui
Playlist Mood Ring Music Block for Radix UI
A mood ring of five moods drawn from thirty typed tracks, each arc a button with its own fill pattern that counts the mood in or out, a list of the moods in words, and a tempo histogram and median that re-derive.
Installation
Overview
Show what a playlist feels like and how fast it goes, with this mood ring for React with Radix UI. It draws Tonecircle, a mood-visual player, in a hairline frame with a plus mark on each corner, split in two. At the start is a ring of five moods, Calm, Warm, Bright, Tense and Wistful, sized by their share of thirty typed tracks. Each arc is a real button that counts its mood in or out, and each mood has its own pattern (dots, solid, diagonals, a grid, lines) so no colour carries the meaning; the centre names the dominant mood among those counted, for example "Mostly warm, 37%". Under the ring a list gives every mood in words with its count, and a Count all moods button puts them all back. At the end, a tempo histogram with six bins from under 80 BPM to 140 and over, and the median tempo, re-derive from the moods that count. On a phone the ring keeps its size, with the list and the histogram stacked under it. It's built from native buttons, SVG patterns, Button and Guides, with a CSS entrance only. For music players, mood playlists and listening apps.
FAQ
How do I use my own tracks and moods?
Edit LINES, one "mood:BPM" entry for each track, and MOODS, which holds each mood's id, label and pattern. The arcs, the counts in the list, the centre text, the histogram bins and the median are all worked out from the tracks, so nothing is typed twice. The bin edges live in BINS.
How do the arc buttons work?
Each arc is a button inside the ring, pressed with the mouse on the coloured band itself and reached with Tab like any button. Its name is the mood and its track count, and it reports whether it counts as pressed. A mood that does not count is drawn as a pale outline of the same size, so the ring never changes shape. You cannot count every mood out: the last one stays on and the status line says so.
Why patterns instead of colours?
A ring of five hues is unreadable for many people and in a greyscale print, so each mood gets a fill you can tell apart by shape: dots, a solid, diagonal lines, a grid and horizontal lines. The list under the ring draws the same swatch next to each mood's name, so the legend never relies on colour either.
How are the histogram and the median worked out?
Only the tracks of the moods that count are used. Each falls into one of six tempo bins, the bars are scaled to the fullest bin, and the median is the upper median of the tempos, so an even number of tracks takes the higher of the two middle values. A hidden list gives the count for every bin, and the status line reads the new median after every change.
What stays local, and what would a real version need?
All of it: the tracks are typed here and nothing is analysed or played. In a real app, tag your tracks with a mood and a tempo from your catalog or an analysis service and feed the same list in. The patterns, the geometry and the derived numbers need no change.