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

• Faster Motion docs map
• Faster Motion documentation overview
• Get started with Faster Motion
• Faster Motion concepts
• .fmtion file format

DOM animation

• DOM animation guide
• DOM selectors and targets
• Scroll animation
• Pointer, hover, and drag inputs
• Text, SVG, and path animation
• Responsive gates and parameter overrides

Canvas animation

• Canvas animation guide
• Canvas area lifecycle
• Canvas objects, assets, and rendering
• Canvas inputs and state machines

3D and procedural

• Canvas 3D and procedural guide
• 3D scenes, cameras, and lights
• Procedural geometry and fields
• Particles and physics

Reference

• Node reference index
• Node categories reference
• Runtime loading and publishing
• Runtime API reference
• Debugging and preflight
• Debug API reference
• Validation errors and warning codes
• Faster Motion production checklist
• Faster Motion recipes overview