Interactive React blocks and interface sounds.
44 blocks and 24 sounds, free and MIT licensed.

Sponsored by

Each block is a folder: the component, its stylesheet, and a README listing its props.

cp -r blocks/like src/components/like
npm install framer-motion lucide-react

import "./tokens.css";
import { Like } from "./components/like/Like";
import "./components/like/Like.css";

export default function Page() {
  return <Like color="Ink" burst={70} />;
}

• 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.

import { play } from "./sounds/sounds";

button.addEventListener("click", () => play("tick"));

24 sounds made with the Web Audio API, in one file with no audio assets. The list is in sounds/.

npm install
npm run dev

The playground puts every block and sound on one page.

• ASCII wake — A cube drawn in ink dots: the pointer drags a wake of characters through it that thicken under the hand and cool back to dots behind it, and a press sends a ring out. Try it
• 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

• Card swap — A stack of photo cards in depth: press the front card or fling it and it goes straight to the back while the rest step forward, or switch Auto on to have it swap by itself. Try it
• Carousel — Cards on a turntable that drift, lean under your pointer and swipe round. Try it

• Rolling counter — A number between a minus and a plus whose digits roll like an odometer, carrying column by column: tap, hold to speed up, or drag the number and fling it. Try it
• 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 the picture beneath. Try it
• Slide to confirm — Push the handle across; past the mark it takes over and finishes itself. Try it
• Pull to refresh — Pull the card down and it stretches; let go past the line to refresh. Try it
• Dragging ball — A ball you grab: it swells under the pointer and squeezes as you hold it. Try it

• 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

• Asset swap — Flip the arrow to reverse the swap; tap a coin to pick another. Try it
• Like — Press the heart and it pops with a burst while the count rolls up a digit. Try it
• Voice note — Hold to record a waveform, slide left to bin it, let go to play it back. Try it
• Dynamic island — A live timer in a black pill: press it to grow into the full activity, and back again. Try it
• Generate — Press Generate and an image resolves under glass, broad shapes first. Try it
• Step player — Press play and each step fills as a bar, then eases on to the next dot. Try it
• Todo tower — A to-do list stacked like bricks; take one out and the rest come down. Try it
• Checklist — Tick a task and the box fills, the tick draws in and the words strike out. Try it
• Palette — A set of colours that go together; press for a new palette. Try it
• Liquid toggle — A switch whose droplet stretches as it slides across the track. Try it
• Now playing — A now-playing bar that opens into a full player and folds back as one. Try it
• Search — Press the search icon and it opens into the field as one object. Try it
• Create menu — Press the pill and it spreads into the create menu it was all along. Try it

• Label input — A field whose label lifts into the top edge as you focus it. Try it
• One-time code — Six boxes that are one field: paste, autofill and backspace all just work. Try it

• Magnetic select — Press an option and it swells as the rest are pushed out of its way. Try it
• Assignees — Assign people from a list and their faces stack up in the pill. Try it
• Aspect ratio — Switch the crop between 4:3, 1:1 and 3:4, keeping the same area each time. Try it

This is a selection. Bencho Pro opens all 140+ blocks and 130+ sounds, with full source, sound layering and downloads, an unlimited Bench to arrange them on, and the Bencho MCP for Claude Code, Cursor and Codex. Everything added later comes with it.

MIT for everything in this repository: use it at work, change it, sell what you build with it.

The photographs on bencho.dev are not included (blocks that use pictures ship with grey placeholders), the Bencho name and goat are not part of the licence, two sounds are rebuilt from cuelume (notice), and Pro blocks stay under the Bencho Pro licence.

Made by Lorenzo Cabra. News at @benchodev.