The fastest path is one visible result, one mount or selector, one validation pass, and one public verification pass. Add more graph complexity after that loop works.

Minimum file shape

• A valid source file can be as small as { "meta": { "name": "Example" } } because meta is the only root key required by the generated schema.
• Use fmtionVersion: 8 when you want an explicit version marker.
• Add parameters, inputs, domGraph, canvas, or scenes only when the first visible result needs them.

Starter JSON

• {
    "fmtionVersion": 8,
    "meta": { "name": "Hero fade" },
    "parameters": {
      "hero/progress": { "type": "float", "default": 0, "min": 0, "max": 1 }
    },
    "domGraph": {
      "nodes": [
        {
          "id": "scroll",
          "type": "scrollTrigger",
          "params": { "selector": ".hero", "startEdge": "top bottom", "endEdge": "bottom top" }
        },
        {
          "id": "write",
          "type": "domPropertyWrite",
          "params": { "selector": ".hero-title", "propertyName": "opacity" },
          "connections": { "value": { "nodeId": "scroll", "port": "progress" } }
        }
      ]
    }
  }

Load and check

• Use RuntimeLoader or FmtionLoader depending on whether you need the compact runtime API or the full loader lifecycle.
• Call load(file), then play() if the result does not autoplay through the scene timeline.
• Call await FasterMotion.debug.validate() after the page is mounted. A zero-length array is the target result.
• Dispose the loader or result when the route, section, modal, or preview unmounts.

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: Minimal hero fade sample with one scroll trigger, one property writer, validation output, and a screenshot at start/mid/end scroll positions.

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