shadcn.io is not affiliated with official shadcn/ui
Year Wrapped Music Block for Solid
A year-in-review deck of five cards for top artist, top song, minutes, genres and personality, each worked out from typed plays, with the personality rules shown beside the result and a button that copies a text summary.
Installation
Overview
Give listeners a recap they can read and trust, with this year-in-review deck for Solid with Ark UI. It puts five cards in a hairline frame with a plus mark on each corner, shown one at a time in the Carousel: your top artist, your top song, your minutes, your genres and your personality. Each card is a big figure beside a drawn cover, and every figure is worked out from thirteen typed tracks, so the artist's share, the day-and-hours total and the genre list always agree. The last card shows the three typed rules behind the personality, each with a check, the threshold it tested and the number it found; the first rule your plays meet wins. Previous and Next buttons, a five-segment progress strip of buttons and the arrow keys move the deck. A Share card button copies a text summary to the clipboard and nothing else leaves the page. On a phone the cover sits above the figure and the card keeps its height. It's built from Carousel, Button and Guides, with a CSS entrance only. For music apps, listening clubs and any yearly recap.
FAQ
How do I fill it with my listener's year?
Edit TRACKS: each has a title, an artist, a genre, its plays, its length in seconds, how many of those plays came late (after 22:00) and a drawn cover. The top artist and song, the minutes, the genre list and the personality are all computed from those rows, so changing a number changes every card that uses it.
How is the personality chosen?
RULES is an ordered list of tests: the Loyalist needs one artist at 30% of plays or more, the Night Owl needs 40% of plays after 22:00, the Explorer needs six genres, and the Regular is the fallback. The first rule that is met is your result. The last card prints all four, marks the ones that were met and shows the number each was tested against, so the label is never a mystery. The thresholds are three constants at the top of the file.
What does Share card do, and what stays local?
It copies a six-line text summary of the deck to the clipboard and says so in the status line, or says that copying is not available when the browser refuses. Nothing is posted, no image is made and no account is read; the plays are typed for the demo. To make it real, build the summary from your play events on the server and hand the text to your own share sheet or link.
How do I move through the deck from the keyboard?
Focus the deck and press the arrow keys to step, and Home or End to jump to the first or last card; in a right-to-left page the arrows follow the reading direction. Previous and Next are buttons that stay in place and mark themselves unavailable at the ends, and each segment of the progress strip is a button named with its card. The status line says which card is showing.