Interactionafter Bencho
Slide to approve
A handle you drag to the end of the track to commit; on release it plants itself and unfurls into the confirmation.
OpenKinetiq Lab
The details we sweat, working.
74 interaction studies, each rebuilt for a real studio use case. We started from the best open-source work we could find, kept what was right, and rewrote the rest. Every study credits its origin.
- WebGLafter React Bits
Chrome mark
The KI mark rendered as liquid champagne chrome in one shader, with a key light that trails the pointer.
Open - AI interfaceafter React Bits
Brief composer
A prompt bar where @ pulls in sources and / runs commands, picks become chips, and the send tile morphs into a stop button while the answer streams.
Open - Motionafter Bencho
Case fan
A deck of case studies that fans out when you reach it; flick the top card away and it tucks itself under the pile.
Open - Textafter React Bits
Split-flap board
A mechanical departure board that folds each changed tile through its drum until the next studio fact lands.
Open - WebGLafter Atelier UI
Sphere gallery
You stand inside a sphere of case studies and services; drag to look around, and a clicked frame peels off the globe, flattens and flies forward.
Open - Motionafter SmoothUI
Draw on scroll
A results chart draws itself as you scroll, with a marker riding the tip that reads out the week and the value under it.
Open - Textafter Fancy Components
Cut reveal
Each word of a headline rises out of its own clipped mask, one after another, then the supporting line settles in.
Open - Interactionafter Animata
Async status button
One button carries a long job from start to finish: it resizes to each label, rolls through reading and drafting, and lands on a sprung check.
Open - AI interfaceafter SmoothUI
Agent approval
The card an agent raises before it acts: the chosen option grows into the outcome and the alternatives collapse away.
Open - Dataafter Magic UI
Agent event feed
An activity log where each new step springs in at the top and the older steps reflow down beneath it, with the current step shown as running until the next one lands.
Open - Navigationafter Motion Primitives
Case study morph
A case study card that grows into the full study, its picture, name and type each travelling to their new place, then folds back into its tile.
Open - Mediaafter Bencho
Aspect switcher
One key visual shown as a 4:3 desktop hero, a 1:1 social card and a 3:4 mobile hero, all at equal area, so switching reads as a crop rather than a resize.
Open - WebGLafter Atelier UI
Velocity bend
Case-study covers that bow slightly and split their colour vertically when the list is scrolled fast, then settle flat and sharp at rest.
Open - Motionafter Fancy Components
Media between words
A sentence opens a gap between two of its words and plays a clip inside it, one line at a time.
Open - Textafter Atelier UI
Letter knock
Letters of the wordmark are knocked in the direction and with the force of the cursor passing through them, then spring home.
Open - Interactionafter Motion Primitives
Before and after
A redesign comparison: drag or click anywhere on the frame and a spring-weighted divider reveals the legacy site on one side and the rebuild on the other.
Open - AI interfaceafter SmoothUI
Agent plan
A nested plan an agent works through: checks draw themselves, finished rows go quiet, and one hairline travels under the step that is running.
Open - Dataafter SmoothUI
Inline quotes
Client voices woven into a paragraph: hover, tap or tab to a highlighted role and its full quote opens beside it, gliding to the next name when you move on.
Open - Navigationafter Cult UI
Direction-aware tabs
A tab bar whose selection bubble springs between tabs while the panel slides in from the side you travelled toward and the card eases to its new height.
Open - Mediaafter Bencho
Falloff accordion
A fixed-width strip of stills where the slice you point at opens and every other slice pays for it, the nearest ones swelling slightly on the way.
Open - WebGLafter Bencho
Glass loupe
A drop of glass you drag over an interface still: it magnifies the middle, bends type at the rim, and off the picture it is only light and shadow.
Open - Motionafter Fancy Components
Path marquee
Case-study cards ride a single hairline curve: they drift on their own, follow a drag with inertia and speed up while you scroll.
Open - Textafter Fancy Components
Letter roll nav
Navigation labels roll letter by letter to a second copy on hover or focus, and roll back when you leave.
Open - Interactionafter Cult UI
Brief morph
A Start a project pill springs open into a brief field, then folds back into a receipt pill that confirms the brief landed.
Open - AI interfaceafter SmoothUI
Artifact pane
A frame around something the model generated, where preview and code travel along one horizontal track instead of cross-fading.
Open - Dataafter Magic UI
Integration map
A wiring diagram drawn between real layout nodes, where a single pulse walks the order in which an AI copilot reads its sources and replies, with a caption for every step.
Open - Navigationafter Animata
Gooey tabs
Icon tabs that rest as one liquid bar; the chosen one opens to show its label and separates from its neighbours like a drop letting go.
Open - Mediaafter Atelier UI
Inertia gallery
An endless strip of shipped work that follows a drag with weight, keeps going when thrown, and turns each frame slightly on its axis in proportion to speed.
Open - WebGLafter Cult UI
Focus lens
A launch page drawn entirely in a fragment shader that sits out of focus until the pointer pulls a lens of sharpness across it.
Open - Motionafter Motion Primitives
Progressive blur
A work rail whose right edge loses focus gradually, with every caption set on the same optical falloff.
Open - Textafter Magic UI
Manifesto reveal
A pinned statement brightens word by word as you scroll, so the reader's pace sets the reading pace.
Open - Interactionafter React Bits
Budget slider
A thumbless bar slider: drag speed raises a wake of bars that trails the head and flattens as it settles, and the tiers the budget covers light up below.
Open - AI interfaceafter Animata
Content scan
One scanning pass over an inbound ticket that lights each intent and entity as the line reaches it, while a confidence score climbs with the evidence.
Open - Dataafter Animata
Metric ticker
Each digit of a figure is its own spring-driven wheel, rolling up from zero as the band enters view and landing one column after another.
Open - Navigationafter Fancy Components
Ink link
An inline link whose hairline underline springs up into a full highlight while the text inverts, on every line the link wraps across.
Open - Mediaafter Bencho
Ring carousel
Launch stills on a turntable: cards drift at rest, follow a drag one to one and glide on with the speed of the throw, and nothing ever leaves the frame.
Open - WebGLafter SmoothUI
Noise gate transition
Switching case studies pours a noise-edged gate across the frame; the content swaps underneath at the one instant the frame is fully covered.
Open - Motionafter React Bits
Scroll expand
A rounded case-study frame opens to full bleed as you scroll, then holds while the result lands over it.
Open - Textafter Fancy Components
Marker highlight
Key phrases in a block of copy get a champagne marker stroke drawn under them as each one scrolls into view.
Open - Interactionafter Fancy Components
Elastic divider
Section hairlines that catch the cursor as it passes through, bend under it and ring back to straight when it pulls away.
Open - AI interfaceafter SmoothUI
Proposed diff
An AI copy edit shown as a diff: new lines wipe in from the left, and accepting or rejecting collapses whichever side lost.
Open - Dataafter Animata
Presence cursors
Two named cursors work in one live file: the studio selects and rewrites a headline while the client clicks the proof metric and leaves a comment.
Open - Navigationafter React Bits
Proximity index
A plain list of links that leans toward the pointer: nearby rows brighten, slide and lengthen their marker on a smooth falloff.
Open - Mediaafter SmoothUI
Work index
A typographic list of case studies where a preview of each project trails the pointer on a spring and leans with its speed.
Open - Motionafter Animate UI
Stacked notices
An agent's run log that stacks its latest checks into a tidy pile and spreads into the full list when you reach for it.
Open - Textafter Fancy Components
Mono scramble
Case study metadata resolves left to right in Space Mono, with a short band of noise running just ahead of the real characters.
Open - Interactionafter React Bits
Hold to commit
A button that signs only if you keep pressing: the fill crosses the label while you hold and drains away the moment you let go.
Open - AI interfaceafter React Bits
Reasoning trace
A thinking header with a live clock that reveals each step, then settles into "Thought for 3.8s" and folds its trace away.
Open - Dataafter React Bits
Slosh gauge
A liquid level that chases its value with mass: it rocks, leans into the direction it is moving, and knocks off the lid when it reaches the top.
Open - Motionafter Fancy Components
Stacking process
Process phases land one on top of the other as you scroll, each earlier card shrinking back into a visible edge of the pile.
Open - Textafter React Bits
Stroke draw
A wordmark draws its outline letter by letter in champagne, then floods with platinum fill and lets the line go.
Open - Interactionafter Bencho
Launch checklist
Checking a line fills the box, draws the tick, strikes the words and fades their ink, all read off one spring per row.
Open - AI interfaceafter React Bits
Refine frame
A reserved-aspect frame that walks a generated image through queued, generating, refining and ready, resolving from coarse pixels to sharp.
Open - Motionafter Magic UI
Velocity marquee
A services band that drifts on its own, speeds up with how fast you scroll and turns round when you scroll the other way.
Open - Textafter SmoothUI
Text morph
A service title morphs into the next one: letters the two words share glide to their new place while the rest leave and arrive.
Open - Interactionafter Bencho
Magnet select
A honeycomb of choices where the one you pick swells and shoves the rest radially aside, so the selection reads from across the room.
Open - AI interfaceafter SmoothUI
Streaming answer
An answer that streams in uneven chunks, each new word blurring into focus as it arrives, with [n] markers turning into citation pills.
Open - Textafter ObsidianUI
Velocity reel
A vertical reel of services drifts on its own, then speeds up and reverses with the speed and direction of your scroll.
Open - Interactionafter Bencho
Palette builder
Generates a five-stop brand direction in OKLCH, morphs the swatches into it, and shows the set applied to a page with its contrast ratio.
Open - AI interfaceafter SmoothUI
Agent tool calls
Each tool an agent calls gets one status ring that breathes while queued, spins as a gap while running, then draws a check or a cross.
Open - Textafter Fancy Components
Weight proximity
Letters of a large Inter line thicken from 300 to 800 around the cursor along the font's weight axis, then relax as it moves on.
Open - Interactionafter Animate UI
Scope builder
Services you click fly between an available column and an in-scope column, and the estimate springs to the new total.
Open - Interactionafter Cult UI
Priority sort
Drag launch deliverables into order by their handles and watch each one's delivery weeks, and the headline estimate, recalculate as you go.
Open - Interactionafter React Bits
Rubber segment
A segmented control whose thumb reaches across to the new option, lets go of the old one and lands with a small squash; you can also grab it and throw it.
Open - Interactionafter Bencho
Engagement dial
A ring of ticks you turn by angle; the lit band springs past the new reading and settles, and the readout names the engagement and its price.
Open - Interactionafter React Bits
Scrub estimator
Number fields you drag sideways to scrub, with a rubber-band overrun at the limits, a live delta above the pointer and click-to-type.
Open - Interactionafter Bencho
Search morph
A search lens that becomes a field as one object: the circle stretches into a pill around a lens that never moves, and the list filters as you type.
Open - Interactionafter React Bits
Squish switch
A switch you can tap or drag: the thumb stretches with its own speed, keeps its area as it does, and flips state at the midpoint.
Open - Interactionafter Cult UI
Stepped panel
A compact toolbar of steps whose panel springs to the measured height of each step, with content sliding in the direction you moved.
Open - Interactionafter React Bits
Swipe toast
A confirmation that rises through the frame's edge, carries its remaining time as a hairline, and flicks away downward with real momentum.
Open - Interactionafter Bencho
Team picker
A pill that answers who is on it: pick people from the list and their monograms land in the pill, which grows to hold the stack.
Open - Interactionafter React Bits
Warm tooltips
A row of icons that share one tooltip: the first waits, then the group is warm and a single surface glides between icons, resizing as the label changes.
Open - Interactionafter React Bits
Undo fuse
Archive acts at once, then the button becomes Undo and its outline burns down as the time left to take it back.
Open