shadcn.io is not affiliated with official shadcn/ui
Audio Effects Music Block for React Aria
A pedalboard of five effects whose order you change by dragging a grip or with Earlier and Later, each with an On switch, a Mix slider and one parameter, and a hint that depends on the order.
Installation
Overview
Shape a signal chain with this pedalboard for React with React Aria. It holds Chainloft's board in a hairline frame with a plus mark on each corner, in three bands. The first draws the signal path from Input through the five pedals to Output, with bypassed pedals struck through, and says it in words: "Overdrive to Delay to Reverb (3 on, 2 bypassed)". The second is the five pedal tiles on shared hairlines: Overdrive, Delay, Reverb, Chorus and Tremolo, each with an On Switch, a Mix Slider in percent wet, one parameter Slider (Drive, Time, Decay, Rate or Depth) with its value in units, and Earlier and Later Buttons. You can also drag a tile by its grip. The third is a hint that depends on the order: "Reverb after overdrive keeps the tail clean". Nothing sounds. There is no drag library: pointer capture and a hit test do the work. It's built from Switch, Slider, Button and Guides, with a CSS entrance only. For effects chains, signal flows and any list where order matters.
FAQ
How do I change the pedals?
Edit SPECS for what each pedal is (its name, its parameter, the range, the step and how the value is written: a scale, decimals and a unit) and START for the order and the starting state of each (on, mix, param). The signal path, the derived line and the hint are worked out from the current order, so nothing is typed twice.
How does the order hint work?
hintFor looks only at the pedals that are on, in their current order, and picks the first rule that applies: overdrive before reverb, reverb before overdrive, delay before reverb, reverb before delay, or tremolo last. A bypassed pedal is ignored. The hint is written advice about the order, not a measurement of any sound.
How does reordering work, and what if I can't drag?
Press a tile's grip and move: the tile follows the pointer's position and the others make room, and releasing drops it. The grip is a pointer route only; every tile also has Earlier and Later buttons, which are the keyboard and touch route, so nothing depends on dragging. At either end the button explains instead of moving, and after a move focus stays on the same button. On a phone the tiles stack and the buttons point up and down.
Do the controls say their value in words?
Yes. Each slider reads its value in units, such as "360 ms" or "25 percent wet", the switch says whether the pedal is on, and each tile says its place ("2 of 5"). The status line repeats the new chain after every move.
What stays local, and how do I wire it for real?
Everything: the order and the settings live in the page and reset on a reload, and no audio plays in this demo. To make it real, rebuild your audio graph from chain whenever it changes, connecting only the pedals that are on, in order, and map each parameter to the node's own setting.