Gestures

@* CSS tier: the class plus its variable, straight on the element. *@
<button class="motion-press" style="--navius-motion-press-scale: 0.94">Press me</button>
<button class="motion-hover" style="--navius-motion-hover-lift: 4">Hover me</button>

CSS tier

Two classes, both timed with the snappy spring. .motion-press uses :active, which also covers keyboard activation on a real <button>. .motion-hover sits behind @media (hover: hover), so emulated touch hover never triggers a stuck lift.

Splat helpers

Motion.Press and Motion.Hover return the class plus the custom-property override as a dictionary to splat with @attributes. Splat instead of a literal class (last wins), or write the class and the --navius-motion-* variable directly.

@* Or splat the helper (it owns the class attribute). *@
<button @attributes="Motion.Press(scale: 0.94)">Press me</button>
<button @attributes="Motion.Hover(lift: 4)">Hover me</button>

Runtime gestures

For keyboard parity and event callbacks, bind CreateGestureAsync. The animation runs JS-side (one WAAPI tween at a time, snapshotting the live transform so changes flow smoothly); only coarse start/end edges cross to C#. Pass a DotNetObjectReference to receive them.

@inject IJSRuntime JS

var interop = new MotionJsInterop(JS);
var self = DotNetObjectReference.Create(this);
_gesture = await interop.CreateGestureAsync(
    _element, "press", self, MotionPrograms.Gesture(pressScale: 0.92));

[JSInvokable] public void OnGestureStart(string kind) { /* press | hover */ }
[JSInvokable] public void OnGestureEnd(bool success)  { /* activated / cancelled */ }

// Later: await _gesture.DisposeAsync();

MotionJsInterop

Bind a press or hover gesture (kind is press or hover). The overload with a callback reports edges to it. Returns a MotionGesture; dispose it to remove the listeners.

GestureOptions

Serialized to the executor. Timing is the baked spring the gesture animates with; build it with MotionPrograms.Gesture.

Interaction semantics

The runtime press mirrors a real activation, not just a pointer-down. It engages on the primary button of the primary pointer only, so right-clicks and secondary touches are ignored. Keyboard Enter presses and releases the element in parity with a pointer, and a blur while the key is held cancels the press. Hover ignores pointerType === "touch", so a tap never leaves the element hovered.

Under prefers-reduced-motion (or ReduceMotion = "always") the transform animations are skipped, but the start and end callbacks still fire: behaviour is not decoration. Set ReduceMotion = "never" to opt a single gesture out.