shadcn.io is not affiliated with official shadcn/ui
Ambient Generator Music Block for React
A soundscape mixer with six level sliders, three presets, a stacked proportion bar with a derived summary, and a rack of four saved mixes you can name, load and delete, with no audio.
Installation
Overview
Build a calming soundscape with this ambient generator for React with Base UI. It holds Softscape's mixer in a hairline frame with a plus mark on each corner. A Segment Group sets three presets, Rainy cabin, Forest morning and Ocean night. Six rows, Rain, Wind, Waves, Fire, Birds and Thunder, each have a glyph, a Slider and the level in percent, with a master Slider below. A soundscape bar stacks the six levels as proportions in foreground weights, with a legend of exact shares and the derived line "Mostly rain and fire". Name the mix and press Save mix, the one Shine Button, to fill a bay in the rack of four Saved mixes; Load puts a mix back on the sliders and Delete empties its bay, so the rack never changes height. Nothing sounds. It's built from Segment Group, Slider, Input, Shine Button, Button and Guides, with a CSS entrance only. For sleep and focus apps, mixers and any set of levels worth saving.
FAQ
How do I change the sounds and presets?
Edit SOUNDS for the six sounds (each has an icon, a name and the weight it has in the bar) and PRESETS for the presets, whose levels follow the order of SOUNDS. The shares in the bar and the legend are worked out from the levels with the largest remainder, so they always add up to 100, and the summary names the loudest sound and the second one when it is at least half as loud.
How does saving work?
Saving needs a name; without one the field says so and keeps focus. A new name takes the next free bay, up to four. Saving a name that already exists replaces that mix, and a fifth name is refused with a message until you delete one. Load puts the levels and the master back and clears the preset; Delete empties the bay and moves focus to the name field.
Why does the preset go blank when I move a slider?
Because the mix is then yours: the preset group clears as soon as you move any slider, since the levels no longer match the preset. Choosing a preset again puts its levels back.
What stays local, and how do I wire it for real?
Everything: the levels, the master and the saved mixes live in this page and reset on a reload, and no audio plays in this demo. To make it real, save the mixes to the user's account, and play one looping audio file per sound at its level times the master from level and moveMaster.