Small interactive controls with a bench: every sample carries its own panel of switches and levels — pull, bounce, viscosity, arc, gravity — so you can tune the behaviour while it runs. Rebuilt 1:1 from the MIT-licensed block logic published by Lorenzo Cabra at bencho.dev, in plain HTML/CSS/JS with no framework.
Seven chips in a cluster (or three in a row). Pick one and it swells while the others are shoved outward along the line that joins them — a vector push that decays with real distance, on springs that go wide before they go tall. Pull, Bounce and Give are the knobs.
A toggle whose thumb is two blobs and one position: the thumb's x is written by the finger or settled by a spring, and a second drop is a softer spring chasing that value — so the pair stretches by exactly how fast you move it, and a goo filter fuses them into one liquid.
A track with a round handle. It follows the finger exactly — the grab offset is taken at the first move, never at the press — and when you let go past the threshold the handle does not hand over to a fill: it morphs, growing backwards to cover the track it crossed while its right edge stays put.
A − 24 + pill that is both a stepper and a slider, chosen by how long you hold: tap a button for one step; hold for 260ms and the press turns into a sweep where dragging sideways moves the value by the fraction of the control's width you travel.
A slider whose value has mass. The handle is rigid — it is under your finger — but the fill is a second, barely damped spring behind it: a fast drag throws it past the handle into the end stop, and it rocks back before settling, with a leaning meniscus at its leading edge. Viscosity, Momentum, Corner and Tilt.
Press the + and a fan of tools opens over it; drag toward one and it is aimed (ring, label); let go and it is chosen — opening, choosing and committing are one gesture. A plain tap leaves it open. The fan is polar CSS: index in, trigonometry out. Stagger, Tools, Radius and Arc are live.
A stack of todo cards that is a rigid-body simulation: each card is a box with a position, an angle and a velocity for both, in a room whose floor and walls are the stage. Nothing decides that a card tips — it turns because its centre of mass is past the edge of what it stands on. Drag one, throw it, pile them back. Gravity, Slip and the count are live.
A 24-hour ring of ticks with two handles. The span between them is measured the short way round, so either handle is free to cross midnight; the ticks inside the span darken and the centre reads the duration. Snap to 5, 15 or 30 minutes; tick density and handle reach are live.
A button that slides away from the cursor — and then stops. It bolts over the last third of its field (squared, not linear), dodges once per approach, and gives in after a fixed number of tries so the joke never becomes the dark pattern it imitates.
A drag-to-reorder list that does three things a normal one does not: the held row is free, not fenced to a rail; it stretches along the axis it is thrown and leans that way; and the rows are surfaces on a goo layer, so while they flow up to close a hole they briefly run together.
A band of ticks over a 300° sweep, each placed from its own index. The lit ticks carry a travelling wave whose amplitude scales with the reading — at 0 it is a still gauge — and dragging around the ring sets the value.
A checklist where each row is ONE spring and everything is read off it: the box fills from the centre (raw, may overshoot), the tick is drawn not faded (clamped), and the rule crosses the words as a window on the same number. Tick them all and the floor goes out from under the list.
The button becomes its own dialog. Nothing opens over the page and nothing shifts around it: 'Delete file' widens into 'Delete it? Delete / Keep', and after deleting the same footprint holds 'Deleted · Undo' with a burning timer — so the destructive path never needs a modal or a toast.
A percentage drawn as forty thin bars: the lit ones rise and fall like a waveform up to the reading, the rest stay flat and faint. Hover scrubs the reading and it springs back when you leave; click to set it.
Every tilt card on the internet rises to meet the cursor. This one sinks: the point you are over goes away and the far side comes up — one minus sign — while a dark dent tracks the pointer, a light rim sits opposite, and the shadow tightens because a pressed thing has less air under it.
A balance card you pull down. The commitment happens at a distance, not on release — crossing the threshold is what arms the refresh, while your finger is still down. The pull is rubber, not a rail, and the goo is the commitment: droplets are drawn together as you pull and fuse into one body exactly at the threshold.
A carousel that is a ring, not a row: nothing ever leaves the frame and the swipe never runs out or rubber-bands. The front card is big, the back rides up as it shrinks, and three motions live on three elements — the slot carries the ring, the floater the drift, the card the sinking tilt.
A floating tool pill — select, hand, frame, shape, pen, text — where the shape slot remembers whichever shape you last chose instead of resetting to a default. Hold it for the tray of shapes; the corner wedge is the universal 'there is more here'.
The component is the button. Press it and two things happen: the bell swings on a damped oscillation, and the button stays down — the confirmation is the control itself, nothing to read, nothing to dismiss. The label swap widens the pill instead of snapping it.
A list of people with a round check on each row and a 'Send N requests' button that counts them. Selection lives in a Set, so the order you clicked never leaks into the rendered order — and the count is derived, never stored.
A pill of faces that grows because one number changes — the width of the rail they sit in. Faces are placed by arithmetic, so nobody moves when somebody arrives; there is simply more room. Grid packs the same four into the footprint of one by subdividing, not filling.
A palette generator that picks in OKLCH — a ramp, not a spin: one hue family, lightness stepping from light to deep, chroma peaking in the middle, one set in three with an accent. The swap is hidden: every swatch draws into a circle, changes colour at the top of that, and spreads back — all at once, with a goo blur that rides the motion and is zero at rest.
An input whose send button is part of the same body of liquid. Type, and the button walks out from under the bar's right edge, necking thinner until the goo gives up — the morph pattern, not the move one. The bar never moves; the offset is all on the button, and the mic only ever fades.
One body, deformed by its own speed: the ball lengthens into its direction of travel instead of leaving a trail. And it has to be grabbed, not just dragged — hover swells it, the press pinches it (narrow across the grip, bulge along it), and letting go rounds it back out on a spring.
One shape, not two: the pill does not open a panel next to itself — it IS the panel, seen small. The press lands first (a plain 110ms shrink), the spread starts at 95ms while it is still on its way down, and width, height and corner run the same curve for the same time with nothing overshooting.
Three formats — 4:3, 1:1, 3:4 — with the same area, so switching reads as the same amount of picture held a different way, never as the picture growing. Width and height animate (never a scale, which drags the corner with it), the picture covers, and the tab thumb leads by arriving first.
A player bar that opens into a card, driven by one number: a single tween 0 → 1 and every position, size, radius and type size is a mix() of its two ends — eased, not sprung, because a spring past the target drags the corner with it. The cover is the hinge, the width never changes, the corners stay concentric, and the play mark is drawn, not swapped.
A row (or column) of icons whose active pill moves in two phases: the leading edge jumps and the pill dilates to span both slots, then the trailing edge catches up and contracts onto the target with a slight overshoot. Dilate, Bounce, Speed, Corner, Hug and the axis are live.
Full library — live sample, numbers, prompt and source — is for clients. I have the password