Construct
Interfaces form through reversible geometry.
Move to edgeClick · watch arrival order
@dynt/formation
Construction before appearance.
Formation treats arrival as a visible process: locate the target, construct its boundary, reveal the content, then reverse the entire sequence when it withdraws.
Live Formation lab
Nine profiles. One lifecycle contract.
Choose a profile, replay the construction, and use Withdraw to observe the reverse choreography.
Respond
Surfaces react at the point of contact.
Local originDistance-led wobble
Integrate
One boundary enhances existing HTML.
Owned fieldSemantic reactors
Remain semantic
Motion stays separate from accessible meaning.
Native HTMLDecoration hidden
Cell scale22 · 18 · 14 pxWave characterStructuralInput ownershipDeepest surfaceDynamic contentObserved
Cell geometry
Read the choreography
Every stage has a visible purpose.
Travel lines acquire targets
Transient lines enter from viewport boundaries and strike each measured surface in sequence.
Geometry becomes permanent
The selected profile closes its rails or responsive path without replacing the host element.
Content follows enclosure
Meaning appears only after the boundary reaches its enclosed phase.
The order reverses
Targets withdraw in reverse sequence before their permanent geometry deconstructs.
Profile registry
Geometry changes. Integration does not.
line-push
Horizontal rails lead before vertical closure.
line-rise
Vertical rails lead before horizontal closure.
arc-trace
One continuous rounded perimeter draws and erases in opposite registers.
squircle-sweep
A superellipse closes with opposing registration marks.
chamfer-fold
Clipped edge joints establish the shell before straight rails.
magnetic-segment
Distributed half-rails converge on four edge locks.
radial-compass
Cardinal spokes locate the centre before enclosure.
aperture-iris
Curved sections converge like a controlled aperture.
elastic-membrane
Opposing curves tension into a bounded membrane.
Lifecycle
Reversible state, not a one-way entrance.
The engine moves through locating, constructing, enclosed, revealing, and formed phases. Withdrawal and deconstruction reverse those stages deterministically.
const formation = createFormation({
root: document,
selector: 'main section',
profile: 'line-push',
observe: true,
viewportFlow: true
});
formation.withdraw();
formation.form();Application patterns
Use formation where arrival carries meaning.
Application shells
Acquire primary regions in a deliberate order while a route or workspace becomes ready.
Scroll-loaded sections
Observed targets join the same lifecycle when the application inserts them later.
Panels and dialogs
Use the reversible command path so dismissal feels like the inverse of arrival.