shadcn.io is not affiliated with official shadcn/ui
Mood Playlist Music Block for Radix UI
A five by five mood plane with energy from Calm to Intense and mood from Sad to Happy: pick or arrow to a cell and see the tracks within one cell of it, nearest first, with their tempo range and a mark of where each sits.
Installation
Overview
Let listeners pick a feeling instead of a genre, with this mood plane for React with Radix UI. It shows Feelfield, a mood-mapped player, as a header over a hairline frame with a plus mark on each corner, in two cells. The start cell is a five by five grid of buttons: energy runs from Calm at the bottom to Intense at the top and mood from Sad at the start to Happy at the end, and each cell shows how many typed tracks sit within one cell of it, with a darker fill for more. The end cell names the chosen cell ("Lively and warm"), works out the tempo range of the tracks near it, and lists up to eight of them, nearest first, each with a drawn cover, a small grid with a dot where the track sits and its tempo. Play these, the only Shine Button, shows three moving bars on the first track. A cell with nothing near it shows an Empty state at the list's height. It's built from native buttons, Empty, Shine Button and Guides, with a CSS entrance only. For music apps and any recommender with two axes.
FAQ
How do I use my own tracks?
Edit LINES (id, title, artist, genre, tempo, energy from 0 to 4, mood from 0 to 4, length and a cover pattern). A track sits in the cell whose row is its energy and whose column is its mood, and a cell lists the tracks within one step of it in either direction. PLANE drops the tracks that have not been analysed yet. The counts, the tempo range and the dot marks are all worked out from those two numbers.
What does near mean, and why is a corner empty?
Within one cell in both directions, so a cell has up to nine neighbours. They are sorted by how far they are from the chosen cell, then by tempo. The intense and sad corner (the top cells at the start) has nothing near it in the sample library, which is how you reach the empty state: it says to try a neighbouring cell, and the list keeps its height.
How do I use the grid from the keyboard?
The grid has one tab stop, on the chosen cell. The arrow keys move the choice across the plane (up is more intense, right is happier), Home and End jump to the start and end of the row, and the status line reads out the cell and what is near it. Every cell is a button named with its energy and mood words and its track count. The grid stays in the same order on a right-to-left page, because the axes are labelled in words.