All
Experimental, physics and biology inspired UI: scientific principles and findings from publications, transformed into interface elements and animations. The whole set in one scroll: the interaction states, the three motion models, the five paper derived components, the seventeen models worn as interface, and the EyeWire 2 placements. Every demo pauses while it is off screen, so the page costs what the part you are looking at costs.
Group one
Buttons with a lifecycle, arrivals with an unread mark, and a change with a definite instant.
Nine sections registered. The stage is holding within tolerance and the detector is cold.
Group two
A travelling wave, coupled oscillators that lock by themselves, and a spring you can tune.
Group three
Each takes what a recent paper is arguing and turns it into a control.
One
Job: a value that only means something in its place
Scrub the stage and the form folds. The expression band is defined in the form's own coordinates rather than the canvas, so it stays on the same tissue and travels with it. A heatmap on a fixed image can get away with being a texture. The moment the form moves, the field has to be attached to the thing, and the difference becomes obvious in one drag.
After 3D spatial transcriptome atlases of early primate embryogenesis, Nature Cell Biology, 2026, where a programme is only meaningful in the piece of geometry it occupies and at the stage it occupies it.
Two
Job: compare layers without losing registration
Drag the divider. The geometry channel runs the full width and the molecular channel is clipped to one side, both drawn from one set of coordinates. Because the shapes never move as the divider passes, you can see they are the same tissue. A crossfade could not tell you that: fading looks identical whether or not two layers are registered, which hides the one property worth checking.
After light microscopy connectomic reconstruction of brain tissue, Nature, 2025, where the appeal is a wiring diagram that carries molecular identity instead of trading one for the other.
Three
Job: jump six orders of magnitude and stay oriented
Pick a cell by what it does and the view travels to what it is made of. The ladder is the component worth keeping: any interface that jumps between very different magnifications leaves people lost, because the destination gives no clue how far it sits from the origin. A rung per decade and a marker that travels rather than teleports costs almost nothing and answers the question the jump creates.
After correlative voltage imaging and cryo-electron tomography, Nature Communications, 2025, which links an electrical phenotype to the nanometre scale architecture of that same class of cell.
Four
Job: show what a summary throws away
Press collapse. Every point keeps its identity through the morph, so the eye follows individual projections into the grid and watches them pile into a single cell. Two pictures side by side would make the same claim and prove none of it. The morph is the argument, and it is the reason this is a component rather than a pair of charts.
After whole brain reconstruction of single neurons, Nature Methods, 2025, where the questions are about the trajectories that an adjacency matrix does not keep.
Five
Job: prove a set of layers is one object
Close the stack up, then switch registration off. Every section is unchanged and the structure running through the depth disappears, which is a stronger statement than any caption about alignment. When a set of layers really is one object, the control that can take the alignment away is what demonstrates it.
After 3D reconstruction of serial spatial transcriptomic sections, 2026, where the third dimension changes the inference rather than the presentation.
Group four
Recognisable pieces of UI whose behaviour comes from a named model. The model is the engine, never the exhibit.
Phyllotaxis
A contribution record with no bins and no axes. Every dot is one completed cube, placed in completion order by the golden angle: the first edit sits at the centre, the latest lands on the rim, and the disc packs evenly at forty cubes or four thousand. Colour is what the edit was, brightness is how recent. Complete more work and the whole history breathes outward to make room. Run the pointer over the disc to read any single cube back.
The concept, live: Phyllotaxis, the golden angle
Every dot is placed by one rule: turn by the divergence angle, step outward. At exactly 137.51 degrees the packing is even with no clumping and no ray seams, and a fraction of a degree either side it collapses into spokes and spirals. Nudge the slider and feel how narrow the good angle is. That fragility is the demonstration.
Poisson disc
A success burst whose particles are seeded by Poisson disc, so no two spawn on top of each other and the burst reads as designed rather than spilled. Flip the seeding to plain random and fire it again: same count, same physics, and it suddenly looks like an accident. The seeding is the entire difference.
The concept, live: Poisson disc sampling
Three ways to place the same number of points. Random clumps and leaves holes, which reads as a mistake. Grid reads as a grid. Poisson is random but never closer than a set distance, which is the texture eyes accept as natural. The points arrive in generation order, so the Poisson set visibly grows from its first seed.
Flow fields
Empty states are where interfaces go to die. This one drifts: particles ride a noise field behind the copy, slow enough to be furniture, alive enough that the screen does not read as broken. It runs only while on screen, and under reduced motion it lands as still streamlines.
Claim your first cell and it will appear here with its progress.
The concept, live: Flow fields from gradient noise
Particles follow a smooth vector field instead of a random walk, so the drift has direction and structure that persists. One noise function steers every particle. This is the one genuinely ambient sketch on the page: it runs while it is on screen and stops when it is not.
Fourier epicycles
A busy indicator that traces the mark with a chain of rotating circles and hands over a solid glyph the instant the work lands. It is a loop only while something is genuinely loading, which makes it honest in a way a spinner never is: when it stops, the drawing is the ready state.
The concept, live: Fourier series, drawn as epicycles
Any closed path is a sum of rotating circles. Here a heart is rebuilt from its coefficients: each circle spins at its own frequency and the tip of the chain traces the outline. Drop the term count and the heart degrades gracefully into a wobbling oval, which is the trade this representation lets you make.
Reaction diffusion
Default profile pictures, each one grown by Gray-Scott from a seed derived from the name. No two are alike, none was drawn, and a user's pattern is stable because their name is the seed. This is the identicon idea with tissue instead of pixels.
The concept, live: Reaction diffusion
Two chemicals, one spreading faster than the other, settle into spots, worms or a maze depending on two numbers. Nothing draws the pattern: it grows out of the arithmetic, never repeats, and never needs a texture file. It is genuinely slow, which is why it belongs on a background rather than a control.
Diffusion limited aggregation
A processing card where the progress indicator is a dendrite: every unit of finished work is one stuck particle, so the structure literally is the progress. At a glance you read both how much and how it went, and the finished crystal is a small reward a bar never manages.
The concept, live: Diffusion limited aggregation
Particles wander at random until they touch the structure and stick. The dendrite is nobody's drawing: it is the shape of the randomness itself, and it is different every run. As a progress indicator it encodes how much work is done in how much structure exists, rather than in a length.
Voronoi
Who is working where, as territory. Each teammate holds the region nearest to them, boundaries are exactly the points that cannot decide, and the shares in the legend are measured from the live partition. Drag your marker and watch your share renegotiate against everyone else's.
The concept, live: Voronoi cells
Space divided by nearest seed: no gaps, no overlaps, and every boundary is exactly the set of points that cannot decide. One seed is yours. Drag across the stage and watch the whole partition renegotiate around you, then let go and your seed drifts home on the decay from sketch nine.
Flocking
Move twenty four items to the library and they go as a shoal: three local rules give the flight its life, a fourth steers it home, and each arrival ticks the badge. The organic motion is not garnish, it is legibility: you can see that many things went to one place, and the count agrees with your eyes.
The concept, live: Flocking, three local rules
Every bird sees only its neighbours, and three rules make a flock: keep apart, point the same way, drift together. The toggles take one rule away at a time, which is the honest demo: kill separation and they collapse into knots, kill alignment and the shoal loses its grain, kill cohesion and it evaporates.
Exponential decay
The humblest one, doing the job it does in every good scoreboard: the displayed number chases the true value, so a burst of points reads as motion toward a fact rather than a slot machine. The bar to the next milestone rides the same chase, and crossing a milestone earns exactly one glow.
The concept, live: Exponential decay
The humblest model and the most reusable. Both dots chase your pointer. The warm one is a fixed duration tween, and every time you move mid flight it has to restart. The cool one moves a fraction of the remaining distance each frame, so interruption is not even a case: there is no duration to restart. Drag in circles and feel the difference.
Cool decay chaser, warm fixed tween
Quantum Mpemba effect
Distance from done is not time to done. Two jobs launch together, and the one that starts far behind finishes first, overtaking the nearer one on the way. Trapped ion experiments showed exactly this: prepare a state with no weight on the slowest decaying mode and it relaxes exponentially faster, and a 2026 follow-up watched trajectories cross more than once. The naive ETA under each bar is computed the way every progress bar implies, and the crossing is the proof that it lies.
The concept, live: relaxation modes and their overlaps
Relaxation is a sum of decaying modes, each with its own rate, and how fast a state equilibrates is set by how much of it sits on the slowest one. Slide the far state's overlap with the slow mode. At zero it beats the near state easily. Give it slow mode weight and the advantage dies, which is the whole effect in one slider.
Gravitational wave chirp
An irreversible combine, staged the way the universe does one: two segments inspiral, the orbit tightening and quickening, a merger, then a ringdown as the single new object settles. GW250114, the loudest event yet recorded, was used to test the rule this button obeys: the merged element's area is never less than the sum of its parents. A merge drawn this way visibly loses nothing.
The concept, live: the chirp waveform
The signal itself: amplitude and frequency climb together as the orbit shrinks, cut off at merger, then ring down as a damped tone. The mass ratio sets how long the chirp lasts and how it ends. Drawn schematically, no detector data.
Atom array assembly
Stochastic loading, guaranteed layout. Results arrive the way tweezer arrays load atoms, each slot filling by chance, and instead of showing you the gaps the grid runs a rearrangement pass: items are moved one by one into the target region until it is perfect, and only then does the state say complete. Optical tweezer arrays do exactly this at the scale of six thousand atoms. Loaded and assembled are different states, and hiding the pass between them is what ordinary grids get wrong.
The concept, live: rearranging atoms one tweezer at a time
The same mechanic with the physics showing: sites load at a probability you control, then a single tweezer drags atoms into the target block one at a time. Lower the odds and watch the pass work harder for the same guarantee.
Topological edge states
A control whose robustness is demonstrable, not asserted. Progress travels the boundary of the panel while the toggle riddles the bulk with defects, and the edge transport does not care, because in a photonic topological insulator light routed along the edge goes around trouble instead of scattering into it. The toggle that fails to break it is the proof, the same shape as taking registration off.
The concept, live: an edge mode routing around defects
A lattice with a pulse bound to its boundary. Tap the lattice to place defects. In the bulk they do nothing. On the edge the boundary itself deforms and the pulse follows the new contour around the damage, which is the property the whole field is named for.
Predicted confidence
AlphaFold colours every residue by how much to trust it, and people actually read that channel. Here the same move on generated content: an automatic segmentation drawn with its confidence baked into the rendering, certain anatomy crisp and cool, doubtful tips warm, soft and dashed. Press review and watch regions firm up as they are checked. Raw output should never be allowed to look as certain as reviewed anatomy.
The concept, live: a fold coloured by confidence
A schematic chain folded at random, each bead coloured by a confidence computed from its own packing: buried, well supported beads read cool, exposed loops read warm. Refold it and the colour map follows the structure, because the confidence is a property of the prediction, not paint.
Spindle assembly checkpoint
In mitosis a single unattached kinetochore vetoes the entire division, and when the last one attaches, release is not gradual, it is anaphase, all at once. Form validation with the same mechanism: every incomplete field visibly restrains the button, completion does not trickle, and the instant the last tether releases the whole thing snaps ready. Visual component only, nothing is submitted.
The concept, live: one kinetochore holds the division
Six chromosome pairs on the plate. Spindle fibres attach in their own time, the last unattached pair pulses its wait signal, and the moment it attaches everything separates at once. Nothing moves early, which is the point of a checkpoint.
Quorum sensing
Vibrio does not glow until the autoinducer it is releasing crosses a threshold, and then every cell lights at once. Batched alerts with the same honesty: each event adds to a visible signal that also decays, the threshold is drawn on the meter, and when it is crossed the whole pending batch delivers together. No mystery debounce, the batching rule is on screen.
The concept, live: a dish deciding to glow
Cells secrete into a shared medium, so density of neighbours is density of signal. Slide the population up and the dish crosses threshold and luminesces as one. Slide it down and no cell ever glows alone, which is the sensing part of quorum sensing.
Run and tumble
E. coli cannot steer. It runs straight, tumbles to a random heading, and simply tumbles less while things are improving, and that bias alone climbs the gradient. A search indicator built the same way: the cursor runs and tumbles up the relevance field and lands on the best match, so the search is seen to find its result rather than teleport to it. Berg and Brown timed the real cells in 1972.
The concept, live: chemotaxis without steering
A dish of cells doing only runs and tumbles. With the attractant on they pile up at the source without one of them ever turning toward it. Take the gradient away and the same rule scatters them, which is the honest control.
Group five
Three sketches rebuilt around the work of proofreading a connectome. The full panel mapping lives on the applied page.
From the channel wipe
The co-registered wipe, doing its real job. Left of the divider is the cell after proofreading, right is the raw segmentation before. Both sides are drawn from one skeleton, so the shared anatomy never moves as the divider passes: what changes is exactly the work. A merge error is removed, two truncated branches are extended to their real tips, and an orphaned fragment is attached. Drag the divider.
In EyeWire 2 this is the review moment: ProofreadingQueuePanel
showing what a submission changed, or SplitMergeOverlay
asking you to confirm an edit. The wipe answers the reviewer's only
question, which is what exactly did this edit do. The whatisabrain
interactive neuron was the reference for the morphology, drawn here as
a schematic pyramidal cell.
From the matrix morph
Every row in a connectivity table is a real synapse somewhere on a real arbor. Press morph: each dot keeps its identity as the table collapses onto the neuron, so you watch your partners land on the apical tuft, the basal skirt, the axon. The same argument as the matrix sketch, run in reverse: this time the geometry is what the table was hiding.
In EyeWire 2 this is CellLibraryPanel: a cell's partner
list is a grid until you ask where, and then the grid pours onto the
anatomy. The same move works for AnnotationPanel marks and
for a weekly recap, where the table of your edits lands back onto the
cells you fixed.
From the section stack
The section stack, carrying what connectomics actually stacks: electron microscopy images. Each slice is synthetic EM, membranes drawn as dark boundaries between cells, and one profile runs through the depth. Turn the segmentation on and that profile is painted across every slice, which is the whole pipeline in one control: images, aligned, becomes a volume, becomes a cell. Close the stack to see it as tissue.
In EyeWire 2 this belongs to Tutorial and
TutorialStep: the first thing a new player needs to
believe is that the 2D images and the 3D cell are the same object, and
this control demonstrates it instead of captioning it. It also fits
VolumesOverlay as the mental model behind the volume
picker.