llms.txt
# Bencho
> Bencho (bencho.dev) is a library of interactive React UI components and micro-interactions. Every block is live, not a recording: it can be played with, tuned with its own controls, and its source copied into a project.
- Built with React, TypeScript and framer-motion.
- The blocks are MIT licensed: https://bencho.dev/license
- 50 blocks, each with its own page, live demo and adjustable values; most include their full source to copy.
- Finds: a curated gallery of UI interactions by other designers, credited to their makers.
- Sounds: a library of synthesised sounds for UI interactions.
- Bench: a canvas for arranging and tuning blocks side by side.
- Made by Lorenzo Cabra. On X: @benchodev.
## Sections
- [Blocks](https://bencho.dev/): the full wall of interactive components
- [Finds](https://bencho.dev/finds): curated interactions from around the web
- [Sounds](https://bencho.dev/sounds): UI sound library
- [Bench](https://bencho.dev/bench): the workbench canvas
- [Licence](https://bencho.dev/license): terms of use
## Blocks
- [Folding bill](https://bencho.dev/blocks/folding-bill) (3D Folding Banknote with Cloth Physics): A bill you can grab, drag and fold; plain or with the dollar print.
- [Emoji reactions](https://bencho.dev/blocks/emoji-reactions) (Animated Emoji Reactions with a Flying Picker): 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.
- [Asset swap](https://bencho.dev/blocks/asset-swap) (Crypto Swap UI with Coin Picker): Flip the arrow to reverse the swap; tap a coin to pick another.
- [Heat map](https://bencho.dev/blocks/heat-word) (Heat Map Hover Effect): A field of grey dots that turns into a heat map under the cursor, the dots nearest the hand swelling and melting into each other; a press steps to an asterisk and the word BEND, in four palettes.
- [Image compare](https://bencho.dev/blocks/image-compare) (Image Comparison Slider): An image comparison of two pictures of one scene, an x-ray and a colour photograph: drag the line to see through the picture, or flick it and it glides to the edge.
- [Like](https://bencho.dev/blocks/like) (Animated Like Button): A like button whose heart pops full and throws off a ring of particles while the count rolls like an odometer, only the digits that change turning, and a carry travelling right to left.
- [Signature pad](https://bencho.dev/blocks/signature) (Signature Pad): A signature pad whose ink thins as the pen speeds up and pools as it slows; pause and it says Signed, and Clear rewinds the signature stroke by stroke back to empty.
- [Voice note](https://bencho.dev/blocks/voice-note) (Hold to Record Voice Note): Hold to record a voice note: the pill opens into a live waveform, slide left to throw it away, and let go to get a clip you can play and scrub by dragging across its bars.
- [Eye tracker](https://bencho.dev/blocks/eye-tracker) (Eyes Following the Cursor): A soft cube with two eyes that turn to follow your cursor while it is inside the block; heading for an edge, the far eye shrinks and the pair tilts, as if a real ball had turned to look.
- [Dynamic island](https://bencho.dev/blocks/dynamic-island) (Dynamic Island): A black pill that holds a live activity — a timer, a call or music. Press it and it grows into the full activity on one spring, the contents blurring across; press again and it tucks back in.
- [Time scrubber](https://bencho.dev/blocks/time-scrubber) (Time Picker Scrubber): A time over a ruler: drag the ruler under the centre mark and the digits roll with it, or fling it and it coasts and settles on the nearest step.
- [Upload dropzone](https://bencho.dev/blocks/upload-dropzone) (Drag and Drop File Upload): Drag a file from the tray into the box and it is drawn in, uploads with a progress bar and ticks; drop one that is over the size limit and the box refuses it, a little more indignantly each time.
- [Particles](https://bencho.dev/blocks/particles) (Interactive Particles Effect): A shape made of dots that scatter from your pointer and spring home behind it; press and a shockwave throws them out, and they gather again into the next shape.
- [Label input](https://bencho.dev/blocks/label-input) (Floating Label Input): A text field whose label is its placeholder until you focus it, then lifts into the top edge with a small hop along its letters while the outline parts beneath it.
- [One-time code](https://bencho.dev/blocks/one-time-code) (OTP Input): Six boxes for a verification code that are really one field, so paste, autofill and backspace all just work; each digit lands with a small swell and a wrong code shakes the row.
- [Generate](https://bencho.dev/blocks/generate) (AI Image Generation Loader): Press Generate and an image is made in front of you the way a generated one arrives — broad shapes first and fine detail last — under a glassy surface that settles as it finishes.
- [Step player](https://bencho.dev/blocks/step-player) (Step Progress Indicator): A row of dots and a play button: the current step stretches into a bar that fills while it runs, then eases over to the next dot with a small wave through the ones it passes.
- [Todo tower](https://bencho.dev/blocks/todo-tower) (Physics To-Do List): A to-do list stacked like bricks under real physics: check one off or pull one out and the rest come down after it, and a card left hanging off the edge tips over.
- [Image accordion](https://bencho.dev/blocks/image-accordion) (Image Accordion Gallery): A row of photographs in a fixed width; hover one and it opens while its neighbours give way on a falloff, so the whole row leans toward your pointer.
- [Glass bubble](https://bencho.dev/blocks/glass-bubble) (Liquid Glass Refraction Effect): A square picture and a ball of glass you drag over it. The picture is the only content; the bubble is the whole block.
- [Action node](https://bencho.dev/blocks/action-node) (Automation Node Card): A card for one step of an automation, with its controls folded into the corner until you want them.
- [Magnetic select](https://bencho.dev/blocks/magnet-select) (Magnetic Chip Select): A cluster of options set close enough together to be in each other's way, and a selection that behaves like a magnet rather than a highlight: the one you press swells and takes the ink, and the rest are shoved radially out of its way — hardest next to it, barely at all at the edges.
- [Slide to confirm](https://bencho.dev/blocks/slide-confirm) (Slide to Confirm Button): A handle you push across a track. It follows the finger exactly, and past the mark it takes over and finishes the journey itself.
- [Assignees](https://bencho.dev/blocks/picker) (Assignee Picker with Avatars): A pill that opens a list, and fills up with faces as you assign them. One, two, four — the pill grows to hold them and they overlap into a stack rather than a row. It was called "People picker", which named the widget rather than the job. What this is FOR is putting names against a thing — assigning a task, adding contributors — and the pill is the answer to "who is on this".
- [Checklist](https://bencho.dev/blocks/checklist) (Animated Checklist): Three tasks, and the only thing this block does is cross one out.
- [Carousel](https://bencho.dev/blocks/carousel) (3D Card Carousel): Cards on a turntable that drift at rest, give under the pointer, and can be swiped round.
- [Palette](https://bencho.dev/blocks/palette) (Color Palette Generator): Three to five colours that go together, and a button that finds you another set.
- [Aspect ratio](https://bencho.dev/blocks/aspect) (Aspect Ratio Crop Selector): A picture and a segmented control that crops it to 4:3, 1:1 or 3:4, keeping the same area in every shape so it reads as a crop rather than a resize.
- [Tilt card](https://bencho.dev/blocks/tilt) (3D Tilt Card Hover Effect): A photo card that sinks under your pointer instead of rising to meet it, with a shadow at the point you press and light catching the far edge.
- [Now playing](https://bencho.dev/blocks/sound) (Music Player Widget): A now-playing bar that opens into a full player and folds back, every size and corner driven by one number so it moves as a single object.
- [Dragging ball](https://bencho.dev/blocks/drag-ball) (Draggable Squishy Ball): One circle, and the only thing it does is follow your finger. What makes it worth a card is the
- [Search](https://bencho.dev/blocks/seek) (Expanding Search Bar): A search icon that becomes a search field as one object — the magnifier travels into place while the field opens around it, rather than one fading out for the other.
- [Pull to refresh](https://bencho.dev/blocks/pull) (Pull to Refresh): Pull the card down and it stretches with you; past the line it commits, springs back with a little overshoot and refreshes the balance.
- [Escape button](https://bencho.dev/blocks/escape) (Runaway Button): Two components whose behaviour is the joke. The material stays as quiet as everything else on this bench — no confetti, no exclamation marks, no sound. If the decoration is doing the work then the interaction is not.
- [Slosh slider](https://bencho.dev/blocks/slosh) (Liquid Fill Slider): A slider whose value has mass. The handle is rigid — it is under your finger and anything under a finger that lags it is broken. The
- [Create menu](https://bencho.dev/blocks/liq-create) (Gooey Create Menu): Three metaball studies: a toggle, a reorderable list, and a create menu.
- [Reorder list](https://bencho.dev/blocks/liq-arrange) (Drag to Reorder List): Three metaball studies: a toggle, a reorderable list, and a create menu.
- [Canvas toolbar](https://bencho.dev/blocks/toolbar) (Floating Canvas Toolbar): A floating tool bar, the kind every canvas app grows. No title, no chip — it is a bar, and a bar is the whole component. The shape slot keeps whichever shape you last chose, so the bar teaches you your own habit instead of resetting to a default every time. That is the small thing these get wrong most often.
- [Radial menu](https://bencho.dev/blocks/radial) (Radial Menu): A floating tool bar, the kind every canvas app grows. No title, no chip — it is a bar, and a bar is the whole component. The shape slot keeps whichever shape you last chose, so the bar teaches you your own habit instead of resetting to a default every time. That is the small thing these get wrong most often.
- [Drag stepper](https://bencho.dev/blocks/stepper) (Number Stepper with Drag): Tap for one, hold to sweep. A stepper is precise and slow; a slider is fast and vague. Almost every product picks one and makes the other job painful. This is both, on the same control, chosen by how long you hold it — so the coarse move never costs you the fine one.
- [Inline confirm](https://bencho.dev/blocks/confirm) (Inline Delete Confirmation): A floating tool bar, the kind every canvas app grows. No title, no chip — it is a bar, and a bar is the whole component. The shape slot keeps whichever shape you last chose, so the bar teaches you your own habit instead of resetting to a default every time. That is the small thing these get wrong most often.
- [Notify](https://bencho.dev/blocks/toasts) (Notify Me Button): The component is the button, alone in the middle of its stage. It used to raise a stack of draggable toasts, which made the study about the toasts rather than the button. A press does two things. The bell swings on a damped oscillation rather than a single shake — each pass smaller than the last, which is what a struck bell actually does. And the button stays down: it fills, and its label changes to the promise it just made. The confirmation is the control itself, so there is nothing to read and nothing to dismiss. Press it again to call the promise off. The label swap would jolt the pill from one width to another, so the two labels are stacked out of flow and the pill is given the width of whichever one is showing. It grows into its answer instead of snapping to it.
- [Icon bar](https://bencho.dev/blocks/icon-bar) (Animated Tab Bar): Same two phase indicator as the segmented pill: the leading edge runs ahead, the pill dilates across both slots, then the trailing edge catches up and overshoots on landing.
- [Magnifying dock](https://bencho.dev/blocks/dock) (macOS Magnifying Dock): Scale falls off with distance from the cursor rather than applying only to the hovered item, which is what stops it reading as a row of buttons that happen to grow.
- [Progress ticks](https://bencho.dev/blocks/progress) (Tick Slider): A row of ticks that is also the control: scrub along it to preview a value, with the number and the difference from where you started shown only while you scrub.
- [Wheel](https://bencho.dev/blocks/humidity) (Circular Dial Slider): A draggable ring of ticks with a reading in the middle; the lit band grows with a wave along its ticks and a brighter head leading it.
- [Command bar](https://bencho.dev/blocks/command) (Command Bar): A command bar whose button fuses into the field as it opens, with a snap at the neck, then slides back out when you are done.
- [Selection list](https://bencho.dev/blocks/roster) (Multi-Select List): A list of people you select with a tap; the rows lift as they are chosen and a button grows out from the middle once there is something to act on.
- [Range dial](https://bencho.dev/blocks/sleep) (Circular Range Slider): Same tick language as the humidity wheel, but the value is a range rather than a point, so the ticks fill between the two handles and the drag picks whichever handle is nearer.
- [Liquid toggle](https://bencho.dev/blocks/liq-toggle) (Liquid Toggle Switch): Three metaball studies: a toggle, a reorderable list, and a create menu.
