MRMENDEZ
← back to projects
UI physics library / 2026

FlowMorph

A layout transition engine that keeps relationships between elements intact while the structure changes.

working prototypeTypeScriptPhysicsUI
FlowMorph project overview

Why it exists

Most layout animation systems interpolate each rectangle from its old box to its new box. That is predictable, but the layout often stops reading as one structure while it moves.

FlowMorph treats the screen as a graph. Nodes have target positions, but they also have temporary relationships to nearby nodes and groups.

The simulation

Target springs pull every node toward its next layout. Structural springs preserve old relationships long enough for the transition to remain legible, then decay as the new structure takes over. A pre-integration AABB separation pass prevents obvious overlaps before the physics step.

The integrator uses fixed-step semi-implicit Euler. Node order is stable, so the same transition produces the same result. Convergence is measured from position error, velocity, overlap, and spring energy instead of a timer that assumes the layout should be done.

What I am testing

The main question is whether structural motion feels meaningfully better than coordinated rectangle tweens once the system is used on real interfaces. The prototype includes debug views for forces, collisions, topology edges, and convergence because this kind of animation becomes impossible to tune when the mechanism is hidden.