@dynt/formation
Line-led construction and reversible lifecycle.
Install independently when an interface should visibly establish and remove its geometry.
npm ↗Open-source project · v0.5.1
An interface can
construct and respond.
DYNT adds two optional capabilities to the HTML your application already owns: Formation constructs and withdraws through measured geometry; Kinetic responds to contact through directional tilt and turbulent cell waves.
@dynt/kinetic
Contact-led physical response and cells.
Install independently when surfaces should respond to input without changing semantic HTML.
npm ↗@dynt/react
Thin lifecycle bindings for React.
Mount and clean up the same framework-neutral engines from a component boundary.
npm ↗@dynt/web-components
Declarative custom-element lifecycle helpers.
Connect and disconnect engine boundaries without moving behaviour into a UI framework.
npm ↗Two engines, one boundary
Construct before revealing.
Viewport lines locate targets, permanent geometry closes, content appears, and withdrawal reverses the same sequence.
Formation studio →Respond from contact.
The near edge compresses, the far edge lifts, and an input-origin wave travels through a configurable cell field.
Kinetic studio →Keep the application yours.
Both engines work from a root and selector, adopt later content, preserve native semantics, and clean up what they own.
Integration handbook →Live package runtime
Study the engines together or one at a time.
Switch modes, change the Formation profile, reduce or open the cell field, send waves from real input points, reverse the lifecycle, and insert a surface after startup.
Construct
Interfaces form through reversible geometry.
Move to edgeClick · watch arrival order
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
Boundary contract
Matching elements participate without per-component edits.
Initialize once at a stable application boundary. The engine discovers matching elements inside that root, observes later insertions when requested, and restores owned state when destroyed.
const root = document.querySelector('#app');
createFormation({
root,
selector: '[data-surface]',
observe: true
});
createKinetic({
root,
selector: '[data-surface]',
observe: true,
cells: { size: [22, 18, 14] }
});Decoration stays decoration.
Native names, values, focus order, and input remain application-owned. Reduced motion preserves meaningful state without physical animation.
Read the contract ↗Work stops at rest.
Surface counts, active reactions, cell totals, device-pixel ratio, and simultaneous waves are explicit operational budgets.
Read the budgets ↗GPL-3.0, built in public.
Inspect the source, install the released packages, reproduce the examples, and propose changes through the repository.
Open GitHub ↗