cabralorenzo / bencho

Interactive React blocks and interface sounds. 41 blocks and 24 sounds , free and MIT licensed. 
 Sponsored by 
## Take a block
Each block is a folder: the component, its stylesheet, and a README listing its props.
 [code] 
 [code] 
- **Props are the knobs.** Whatever you set on bencho.dev, pass the same values here. Every prop is optional.
- **`tokens.css`** holds the colours the blocks read, light and dark. Include it once, or map the names to your own theme.
- **Dark mode** follows `data-theme="dark"` on any parent, or the system setting.
- **Using an agent?** Each block on bencho.dev has a Copy prompt button with the file and how to wire it in.
## Take a sound
 [code] 
24 sounds made with the Web Audio API, in one file with no audio assets. The list is in `sounds/`.
## See them all
 [code] 
The playground puts every block and sound on one page.
## The shelf
### Slide
- **Wake slider** — A range made of thin bars with no thumb; drag fast and the bars you sweep past spring up in a wake behind the hand. Try it
- **Time scrubber** — Drag the ruler to set a time; fling it and it coasts to the nearest step. Try it
- **Slosh slider** — A slider whose fill has weight: drag fast and it sloshes past the handle. Try it
### Hover
- **Stacked bars** — A month of visits as stacked bars; run along them and one day is ringed while a tooltip glides beside it, and Day / Week regrows the bars. Try it
- **Toast stack** — Three toasts stacked at the edge, the two behind peeking out above the front one; point at them and they spring apart into a list. Try it
- **Emoji reactions** — Press the button and the message turns into a pill of emoji; pick one and it flies down to its reaction chip as the count rolls up. Try it
- **Heat map** — Dots that melt into a heat map under your cursor; press for the next shape. Try it
- **Eye tracker** — Two eyes on a soft cube that turn to follow your cursor around the block. Try it
- **Particles** — Dots scatter from your pointer and spring home; press for a shockwave. Try it
- **Image accordion** — Hover a photo and it opens while its neighbours give way around it. Try it
- **Action node** — An automation step card with its controls folded into the corner. Try it
- **Magnifying dock** — A dock whose icons swell toward your cursor, the nearest growing most. Try it
- **Escape button** — A button that slides away from your cursor, and then gives up. Try it
- **Tilt card** — A photo card that sinks under your pointer instead of rising to meet it. Try it
### Drag
- **Folding bill** — A bill you can grab, drag and fold; plain or with the dollar print. Try it
- **Image compare** — Drag the line to compare two pictures; flick it and it glides to the edge. Try it
- **Signature pad** — Sign it; the ink thins with speed, and Clear rewinds it stroke by stroke. Try it
- **Upload dropzone** — Drag a file into the box to upload it; one that is too big gets refused. Try it
- **Glass bubble** — Drag a ball of glass over a photo and watch it bend