The runtime API is the bridge between page code and source-authored motion. Keep ownership clear so page code controls lifecycle and parameters without duplicating graph behavior.

FmtionLoader methods

• load(file): validates basic shape, optionally rejects legacy shapes, normalizes authoring mistakes, runs compound preflight, clones source, builds runtime graphs, and returns a load result.
• save(): returns a clone of the post-normalize, pre-expansion source snapshot after successful load.
• snapshot(): captures parameter values and state-machine layer state. It does not capture derived visual outputs.
• restoreSnapshot(snapshot): writes captured parameters and state-machine state back into the current loaded graph.

Load result methods

• play() starts Canvas timelines, video playback where present, and animation controllers where present.
• pause() pauses Canvas timelines, video playback where present, and animation controllers where present.
• dispose() releases graph registrations, listeners, loaded assets, records, render resources, and runtime state owned by the result.

Parameter and data access

• Use runtime getters/setters for page-owned controls. Avoid page code writing DOM transforms that the graph owns.
• Use data-table helpers when motion reads structured records rather than one-off scalar parameters.
• Use onPropertyChange(path, callback) for UI that must reflect parameter changes.

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: Runtime API sample that saves a loaded file, captures a snapshot, changes a parameter, restores the snapshot, and validates.

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