shadcn.io is not affiliated with official shadcn/ui
Playlist Generator Music Block for Ark UI
A playlist builder with a length slider, three genre shares that always add up to 100, four drawn energy curves and a greedy Build that lists the tracks with the curve's goal as a dashed line over their real energy.
Installation
Overview
Build a playlist to a length, with this playlist generator for React with Ark UI. It shows Lengthwise, a music app, as a header over a hairline frame with a plus mark on each corner, in two cells and a foot. The start cell is the recipe: a length from 20 to 120 minutes, a genre mix of three shares (Acoustic, Electric, Electronic) that always add up to 100 because moving one moves the others in proportion, and four energy curves (Steady, Warm-up, Peak then cool, Rise) drawn as cards. Build playlist is the only Shine Button. The end cell shows the result: a small chart with the curve's goal as a dashed line under the playlist's real energies, then the tracks in a scroll region, each with a drawn cover, genre, five energy ticks and its length. The header of the cell says how many tracks it holds and how many minutes over or under the target they run, and a line reminds you when the settings changed since the last build. There is no model: a plain greedy pass does it. It's built from native ranges and radios, Empty, Shine Button and Guides, with a CSS entrance only. For music apps, radio schedulers and any list built to a budget.
FAQ
How does Build choose the tracks?
For each genre family it takes its share of the minutes and keeps adding the track that fits best: the one whose length is nearest what is still needed, with a nudge toward the energy the chosen curve averages. It stops when the next track would overshoot by more than the remaining time. Then it puts the picks in order: at each place it takes the unused track whose energy is nearest the curve's goal there. It is deterministic, so the same recipe always gives the same playlist, and the header says how far the total is from the target.
How do the three shares stay at 100?
Moving one range sets that share and splits the rest across the other two in proportion to what they had, rounded by largest remainder so the whole numbers add up exactly. If the other two were both 0 they share the rest equally. A share of 0 leaves that family out of the build.
How do I use my own library?
Edit LINES (id, title, artist, genre, tempo, energy from 0 to 4, mood, length in seconds and a cover pattern) and FAMILIES, which groups genres into the three shares. Add or rename a curve in CURVES and give goalOf its shape. The minutes, the counts and the chart are all worked out from the result, and the covers are drawn in code: swap the Cover for an img and keep the title and artist beside it.
Why does the result not change as I move the controls?
Building is an action, so the result changes when you press Build playlist, not under your hand. The controls hold a draft; the line under the button appears when the draft differs from what was built, and the line keeps its space so the button never moves.
What stays local?
All of it. Nothing is generated by a model, saved or played: the build runs in the page over the typed tracks and the status line says what it built. To make it real, call your catalogue in buildOf with the same recipe and return the same track fields.
How do I use it from the keyboard?
Tab runs the length range, the three share ranges (the arrow keys change them by one), the four curve cards (a radio group: arrows move and pick), Build playlist, and then the result region, which scrolls with the arrow keys. Each range is named with its value in words, and one polite status line says what was built.