--- title: "Lab" url: "https://sanyam.sh/lab" --- # Lab - [Crack Button](https://sanyam.sh/lab/crack-button), 2026-09-13 A Save button made of glass. Every press cracks it from the point you hit, each one does a little more damage than the last, and the eleventh takes the face apart. Repair it half cracked and the cracks run back into the points they came from. Repair it in pieces and a new pane is set down, because a pane on the floor cannot be mended. - [Shelf Drop](https://sanyam.sh/lab/shelf-drop), 2026-09-12 Six prints standing on a picture ledge. Press one and it is knocked off, tumbling as it goes. Some fall in front of the ledge and some fall behind it, and which one you get is the whole experiment. - [Book Shelf](https://sanyam.sh/lab/book-shelf), 2026-09-11 A shelf of twelve books. Press a spine and that book comes out of the row, turns to face you and lands in the middle of the stage with a scrim behind it, which is what a modal opening looks like. Press the scrim, press the book again, or press Escape, and it goes back to its slot. - [Wrapped Pattern](https://sanyam.sh/lab/wrapped-pattern), 2026-09-09 A printed sheet that rolls into a column. Flat, it is a drawing: a half-drop grid of dots on pale paper, a hairline rule every third column and a hue that cycles every fifth. Press the mode and it curls until its two edges meet behind it, and from there a drag turns the column, it coasts when let go, and it idles on a slow turn. - [Flip Clock](https://sanyam.sh/lab/flip-clock), 2026-09-08 A flip clock in 24-hour time. Three cards, hours in blue, minutes in green and seconds in terracotta, each a number split at a hinge across its middle. When a number changes, the top half falls forward through 180 degrees as a real flap, showing its back on the way down, and lands on the stop with a small bounce. The cards flip in from 00 when the page arrives, and the seconds keep the mechanism moving. - [Radial Menu](https://sanyam.sh/lab/radial-menu), 2026-09-08 A file on a stage. Press it and pull, and a wheel of formats opens around the place it was, the shape of a game's weapon wheel: the hand carries the file, the wedge under the hand fills in and its name reads out in the empty slot, and letting go there converts the file. Letting go over the middle, or anywhere off a wedge, puts it back unchanged. - [Custom Cursor](https://sanyam.sh/lab/custom-cursor), 2026-09-07 A gallery of four cards under a cursor of its own. Crossing into the stage swaps the arrow for a dot that follows the hand a beat behind, and hovering a card grows the dot into a pill naming the lab the card opens. Move to the next card and the name morphs into the next one rather than popping out and back in. - [Island Menu](https://sanyam.sh/lab/island-menu), 2026-09-06 A pill of a nav bar that opens into a menu in two moves. It grows tall first, a black slab rising off the bar with the bar's three controls still pinned to its foot, then wide, and only once it is the size of a menu does the menu arrive in it, the links one after another and the picture after them. Closing is the same three moves backwards. - [Notch Drop](https://sanyam.sh/lab/notch-drop), 2026-09-04 A notch hanging from the top edge of a page, and a page of things to carry to it. Lift one and the notch opens and asks for it. Hold it over the notch and the notch asks louder while the thing in your hand shrinks to fit. Let go and it is swallowed, a black drop leaving the card and merging into the notch, which says so and then closes back to its resting word. - [Halftone Ripple](https://sanyam.sh/lab/halftone-ripple), 2026-09-03 A pill toggle with a count. Press it and a ripple of dots runs out across the button from under the pointer, on a fixed grid, so what spreads is a halftone screen being run rather than a glow. - [Sticker Peel](https://sanyam.sh/lab/sticker-peel), 2026-09-02 Five die-cut stickers loose on a board. Press one and pull, and the paper under your hand folds back over the rest of itself, so what is on top of the sticker is the back of the same sticker. Keep pulling and the last of it lets go, after which it follows the hand with the fold trailing behind it and lies down flat wherever it is dropped. - [Rain Splatter](https://sanyam.sh/lab/rain-splatter), 2026-08-29 Coloured rain over a floor drawn in perspective, and the floor keeps everything that hits it. Each drop picks a depth on the way in, which sets how big it is, how hard it falls and how far up the stage it lands, so the near ones are fat and quick and go off the bottom edge while the far ones are specks that land near the horizon. - [Window Shade](https://sanyam.sh/lab/window-shade), 2026-08-29 A cabin window with a shade you pull down by hand. The panel stays wherever it is let go, and the whole cabin crosses from a white ground to a near-black one as it comes, so half way down is a place to stop rather than a moment between two states. - [Folder Stack](https://sanyam.sh/lab/folder-stack), 2026-08-28 A drawer of card index folders, eight tabs deep, with alphabetical dividers between the groups and every tab cut to one of three positions the way a real index is. Hovering a folder pulls that one folder up out of the pile, and what it holds was behind the card in front of it the whole time. - [Book Opening](https://sanyam.sh/lab/book-opening), 2026-08-27 A book on a table, fourteen sheets deep. Hovering it fans every leaf off the spine and lays the front board out to the left, and in cursor mode the fan answers the pointer instead: the further left of the shut book's fore-edge it goes, the further the cover comes round. - [Stamp Collection](https://sanyam.sh/lab/stamp-collection), 2026-08-24 Three postage stamps laid out by hand on a dark table. Hovering one lifts it, clicking one brings it to the front of the stage and pushes the other two out behind it, and the print inside a focused stamp slides under its own window as the pointer moves around it. - [Event Stacking](https://sanyam.sh/lab/event-stacking), 2026-08-23 A four-day calendar whose events are dragged between slots. A card dropped onto another joins it as a stack: the pile compresses to fit the cell it is in, the card underneath keeps a sliver of its own colour showing, and clicking the front card sends it to the back. Holding a press on a stack takes the whole thing, which then travels and lands as one. - [Document Pocket](https://sanyam.sh/lab/document-pocket), 2026-08-20 A pocket of paper. Hovering it fans the cards up and tilts the front panel forward, hovering one card sinks the rest so that one stands clear, and clicking a card grows it to the middle of the stage with the others pushed off to the sides. Each sheet carries its own hue, since five skeletons built from three arrangements are otherwise one texture. - [Tether Button](https://sanyam.sh/lab/tether-button), 2026-08-20 A button pressed from a distance. The cursor shoots a web at the button's nearest edge, and the button goes down when the web lands rather than when the mouse does. Hold it and the strand pays out, hangs slack as the hand comes closer, and falls as it snaps back on release. - [Tab Overview](https://sanyam.sh/lab/tab-overview), 2026-08-19 a terminal-style tab strip with three stages of one window: a row of labels, a taller strip where every tab shows what it holds on hover, and an overview grid filling the window so a tab can be picked by its shape rather than its title. - [Animated Dashed Border](https://sanyam.sh/lab/animated-dashed-border), 2026-02-21 an SVG-based animated dashed border that appears on hover. the dashes march around the border continuously using `stroke-dashoffset` animation. - [Morphing Icons](https://sanyam.sh/lab/morphing-icons), 2026-01-15 minimal keyboard-like UI for smooth icon morphing using Framer Motion. preview icon at top with dot indicators showing sequence position, keyboard grid below with 21 icons arranged 6 per row. - [Multi Step Form](https://sanyam.sh/lab/multi-step-form), 2025-12-27 a sequential multi-step form with a smooth height transition between steps (no layout jump). - [Number Counter](https://sanyam.sh/lab/number-counter), 2025-12-22 animated number counter with directional slide transitions using Framer Motion's AnimatePresence. - [Extended Sonner Toast](https://sanyam.sh/lab/sonner-extended-toast), 2025-12-07 custom sonner toast layout with animated background fill, icon states, footer, and promise-aware durations. - [File Tree Explorer](https://sanyam.sh/lab/file-tree-explorer), 2025-11-07 framer-motion powered tree view with animated expand/collapse interactions and subtle hover reactions. - [Discount Code Input](https://sanyam.sh/lab/discount-code-input), 2025-10-10 stripe-inspired button-to-input morph built with framer motion. implements a single state machine driving four distinct UI states: idle, editing, loading, and applied. - [Spring Image](https://sanyam.sh/lab/spring-image), 2025-08-11 a draggable profile image with smooth spring physics using Framer Motion's `useMotionValue` and `useSpring` hooks. - [Split to Edit](https://sanyam.sh/lab/split-to-edit), 2025-09-04 my take on `split-to-edit` interaction. built using Next.js + Framer Motion. - [Phrase Transition](https://sanyam.sh/lab/phrase-transition), 2025-09-27 Built a phrase transition component using Framer Motion's `AnimatePresence` with staggered opacity/y transforms. - [Cursor Origin Button](https://sanyam.sh/lab/cursor-origin-button), 2025-08-23 A button component that follows the cursor's position for its hover effect origin point. The expansion animation originates from wherever your cursor enters the button.