experimental-ui
Experimental, physics and biology inspired UI: an exploration of taking scientific principles and findings from publications and transforming them into interface elements and animations. Every state on this page is driven by a model rather than a curve. The button knows the difference between waiting and failing. The list knows the difference between arriving and being unread. The panel below knows exactly when it stopped being current.
Buttons and submission
Press and the control compresses on a critically damped spring. Send and a packet crosses it, so waiting has a direction instead of a spinner. Succeed and a mark lands on the same spring. Fail and that spring is given too little damping, so it rings and settles honestly rather than playing a canned shake at you.
Nothing is submitted. No form, no field name, no request.
New states
The entrance is over in half a second and only helps somebody who was looking. The mark decays over several seconds and is what tells somebody returning to the tab which rows they have not seen. Hover or tap a row and it is marked seen, because attention is the only honest way to clear a marker that means you have not looked at this yet.
Transitions
A crossfade has to show both states at once, which for two dense panels reads as a smear. A packet crosses instead and the content changes under the brightest part, so there is never a frame showing both and never a flash of empty container. The instant is the useful part: it says exactly when what you were reading stopped being current.
Nine sections registered. The stage is holding within tolerance and the detector is cold.
All experiments
This page shows the interaction set doing jobs. The models behind the movement, the five components built from five papers, and the eighteen borrowed models each have a page of their own with every control exposed, and every sketch on the models page has its own link.
Newest
A poster that wires its own borderA congratulations poster whose circuit border is routed rather than drawn. It measures the words it is carrying, then Lee's maze router fills the band around them, so no two posters come out alike. Add the ribbon and the corner it lands in rewires around it.
Open the posterMotion
Three models with the controls exposedThe travelling wave, the coupled oscillator cluster with its coupling slider, and the spring with its stiffness, damping and the trace of the path it actually took.
Open motionSpatial
Five components from five papersA field that folds with its form, the co-registered wipe, the scale bridge, trajectories collapsing into their matrix, and serial sections closing into a volume.
Open spatialModels
Eighteen models, worn as interfaceA work history that packs itself, a celebration that never clumps, grown avatars, a coverage map, a search that visibly finds, a poster that wires its own border, and a dozen more. Each one powered by a named model, each paired with the science it came from.
Open modelsPlayground
Adjust one thing, see the whole pictureInteraction experiments, starting with a settings panel that gets out of its own way: take hold of any control and every other control leaves, so you adjust the scene while looking at the scene.
Open the playgroundApplied
Placed in EyeWire 2Before and after proofreading behind a wipe, a connectivity table pouring onto its cell, EM sections closing into a volume, and a mapping from every experiment to a named panel.
Open applied