Owned surface · live input
Contact has a location.
The response comes from the point you approach, then settles back to a neutral plane.
Native HTMLBounded responseIdle at rest
@dynt/kinetic
Response begins where contact happens.
Kinetic resolves the nearest owned surface, compresses the near edge, raises the far edge, and sends circular turbulent waves outward from the actual input point.
01 · Directional Tilt
See exactly which side compresses and which side rises.
This isolated demonstration turns waves and drift off. Move across the plate or use the four edge-position triggers to study contact location, opposing depth, content travel, and the return to rest.
Tilt isolated
A directional plate, not a card wobble.
Move across the plate or trigger an edge position. The contact side compresses, the opposite side lifts, and locally owned content follows at a bounded depth.
Contact zoneCentreInput origin
Near sideBalancedCompresses
Far sideBalancedRaises
Demonstration strength
Studio strength is intentionally clearer for learning. Product defaults remain restrained.
Compression follows input
The edge nearest the pointer moves down and inward instead of expanding the entire surface indiscriminately.
Depth opens opposite contact
The far edge lifts with an opposing shadow, producing a readable plate response from one bounded transform.
Interior groups respond locally
Semantic content uses its own translate channel while the application-owned element transform remains untouched.
02 · Wave and cell geometry
Smaller cells reveal a more precise turbulent front.
Tilt is disabled in this lab, so every click teaches the wave system alone. Switch geometry, density, and wave character; then click any card or use Send wave.
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
Cell geometry
One wave model across four renderers.
Square
A regular rectilinear field for structured surfaces.
Connected hexagon
A continuous honeycomb with shared visual adjacency.
Circle
Separated radial cells that clarify wave-front curvature.
Interlocked diamond
Offset cells that emphasize directional propagation.
Tilt only
createKinetic({
root,
selector: '[data-tilt-surface]',
effects: {
tilt: true,
content: true,
wave: false,
drift: false
},
motion: { maxTilt: 1.35, response: 0.18 }
});Wave only
createKinetic({
root,
selector: '[data-wave-surface]',
effects: {
tilt: false,
content: true,
wave: true,
drift: false
},
cells: { shape: 'hexagon', size: [22, 18, 14] },
flow: { turbulence: 0.42, maxWaves: 3 }
});