Faster FasterHQ
Open app
Help Center

Pointer, hover, and drag inputs

Updated Jun 20, 2026 3 min read

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

Pointer-driven motion should be bounded, smoothed only as much as needed, and designed with touch and reduced-motion behavior in mind.

Root input types

  • The root inputs[] union supports mouse, mouseVelocity, time, distance, scroll, drag.
  • mouse writes an axis value to a parameter, with optional normalize, elementSelector, invert, and smooth.
  • mouseVelocity writes pointer speed with optional maxVelocity, absolute, centered, smoothing, decayFactor, and elementSelector.
  • distance maps pointer distance from a circle, rectangle, polygon, point, or element shape into a parameter.
  • drag uses elementSelector, optional axis, inertia, throw resistance/duration, snap points, bounds, drag range, axis lock, and trigger.

Interaction rules

  • Scope Canvas-only interactions to the Canvas mount so page scroll and rendered-object interaction do not fight.
  • Hover-only effects need a touch fallback or a stable non-hover visual state.
  • Drag should not block page scroll unless the section intentionally owns that gesture.

Debug checks

  • Use debug.nodes({ type: "pointer" }) or nearby input node filters to inspect live values.
  • Use debug.inspect(selector) when a DOM interaction should target an element.
  • For physics drag, watch PHYSICS_MOUSE_DRAG_NO_MATCH and body reference errors.

Verified runnable example

This guide points to proof-backed sample coverage. The full ledger lives in Generated examples and proof log.

DOM: Scroll fade reveal

  • Source: faster-motion/demo/tests/dom/catalog/scroll-animations/fade-reveal/fade-reveal.domgraph.fmtion
  • Expected output: Sections fade and translate into place as their trigger elements enter the configured viewport range.
  • Validation: Schema validation passed. Runtime proof reports zero structural/runtime issues and 17 loaded nodes.
  • Desktop proof: generated-assets/faster-motion-docs/proofs/screenshots/dom-fade-reveal-desktop.png
  • Mobile proof: generated-assets/faster-motion-docs/proofs/screenshots/dom-fade-reveal-mobile.png

Guide-specific sample target: Pointer sample with normalized X/Y parameters, one hover gate, one drag bound, and mobile fallback proof.

Faster Motion docs

Use this local map together with the left navigation. The source-backed content tree controls the main article order; this section keeps related pages one click away.

Start

DOM animation

Canvas animation

3D and procedural

Reference

Was this guide helpful?