shadcn.io is not affiliated with official shadcn/ui
Daily Mix Music Block for React Aria
Four daily mixes for the morning, afternoon, evening and late night, each a collage of four drawn covers, a freshness line worked out from a typed time, and eight tracks with a reason and a play toggle.
Installation
Overview
Give listeners a mix for each part of the day, with these daily mixes for React with React Aria. It shows Tideloop, a streaming app, as a header over a hairline frame with a plus mark on each corner. Tabs pick Morning, Afternoon, Evening or Late night, each with the hour it refreshes. A mix opens with a collage of four drawn covers, its name, a line such as "Refreshed 06:00, 5 hours before now" or "Refreshes at 12:00, in 1 hour" worked out from a typed time against a fixed now, the first three artists and the size, then eight rows. Each row has its own play Toggle, a drawn cover, the title with a reason ("Because you play Marlow Quay", or the genre and tempo it was matched on) and its length. Play all, the only Shine Button, starts the first row. The mixes are built by a plain distance to each part's pace, energy and mood, so no track is in two mixes, and every mix has the same height. It's built from Tabs, Toggle, Shine Button and Guides, with a CSS entrance only. For streaming apps and any feed that regroups by time of day.
FAQ
How are the mixes chosen?
Each part of the day has a target tempo, energy and mood in PARTS. A mix takes the eight tracks nearest that target, building the latest and the most active parts first so each keeps its best fits, and no track appears twice. The reason on each row comes from PLAYED: if you play the artist a lot it says "Because you play" them, otherwise it names the genre and tempo it was matched on. All of it is plain code over the typed tracks.
Where do the freshness lines come from?
Each part has a typed refresh time and the page has a fixed "now" (AS_OF_AT, 11:00 on 12 October 2026). The line is the whole hours between them, written as "Refreshed" for the past and "Refreshes at" for the future, so it never changes with the clock and never says "ago". To make it live, replace AS_OF_AT with the current time after the page mounts and keep the same helper.
How do I use my own tracks?
Edit LINES (id, title, artist, genre, tempo, energy from 0 to 4, mood, length in seconds and a cover pattern), PARTS for the targets and the hours, and PLAYED for the artists the listener plays. The totals, the artists line and the collage come from the rows. The covers are drawn in code: swap the Cover for an img and keep the title and artist beside it.
Does anything play, and what stays local?
No. A play toggle or Play all shows three moving bars on that row and the status line says there is no audio in this demo. Only one row plays at a time, and switching mixes stops it. Nothing is saved or sent; to make it real, hand the track ids of the shown mix to your player in play and playAll.