Faster FasterHQ
Open app
Help Center

Faster Motion concepts

Updated Jun 19, 2026 3 min read

Product media placeholder

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

Faster Motion authoring is graph-first. The source file declares what should exist; the loader builds runtime graphs; debug APIs expose the evaluated state.

Core objects

  • .fmtion file: JSON source with metadata, parameters, assets, inputs, DOM graph, Canvas areas, scenes, and optional media sections.
  • Surface: DOM, Canvas 2D, or Canvas 3D/procedural. Pick the surface based on what owns the pixels.
  • Scene: a modern scenes[] entry with kind: "2d" or kind: "3d", width, height, mount or output, and renderer settings.
  • Graph node: a typed unit with id, type, optional params, and optional connections.
  • Port: a typed input or output. Wires connect output ports to input ports by name.
  • Parameter: named data exposed to graph nodes, inputs, UI, data binding, or code.

Serialized graph node shape

  • {
  "id": "write",
  "type": "domPropertyWrite",
  "version": 1,
  "params": { "selector": ".hero-title", "propertyName": "opacity" },
  "connections": {
    "value": { "nodeId": "scroll", "port": "progress" }
  },
  "activeWhen": "(min-width: 900px)",
  "overrides": [
    { "when": "(max-width: 767px)", "set": { "distance": 24 } }
  ]
}

Important distinctions

  • Root inputs[] write values into parameters. Graph connections wire node outputs directly into node inputs.
  • activeWhen gates a node or scene at load time. overrides[] changes node parameters at load time.
  • Normal wires must form a directed graph. Feedback wires use { "kind": "feedback" } and intentionally read the previous frame.
  • The loader snapshot APIs capture inputs such as parameter values and state-machine state. Derived outputs are recomputed by the graph.

Verified runnable examples

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

Canvas: Fill rule diagnostic

  • Source: faster-motion/demo/tests/canvas/fillrule-diagnostic/fillrule-diagnostic.fmtion
  • Expected output: A contained Canvas scene renders paired path cases so nonzero and evenodd fill handling can be compared visually.
  • Validation: Schema validation passed. Runtime proof reports zero blocking runtime issues and 10 rendered objects; the accepted metadata note is preserved in the proof ledger.
  • Desktop proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-desktop.png
  • Mobile proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-mobile.png

Guide-specific sample target: Concept diagram sample showing a scroll input node driving remap, gate, writer, and debug validation output.

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?