Start by deciding whether the animation belongs to the page DOM or to a Canvas-rendered scene. The same .fmtion container can describe both, but the authoring model and verification checks are different.

Basic workflow

1. Pick the surface: DOM, Canvas 2D, or Canvas 3D/procedural.
2. Create or update the .fmtion file with metadata, parameters, inputs, and the relevant graph section.
3. Load the file with the Faster Motion runtime in the page that owns the target DOM or Canvas mount.
4. Run preflight and runtime validation before publishing.
5. Verify the public page at desktop and mobile sizes, including reduced-motion behavior when relevant.

Minimal authoring shape

{
  "meta": { "name": "Example motion" },
  "parameters": {},
  "dom": [],
  "canvas": [],
  "domGraph": {
    "nodes": []
  }
}

Start with one visible result

For the first version of a motion file, make one result easy to verify: a section fades in, a card follows pointer progress, a Canvas object moves, or a particle system renders in a known mount. Add complexity after that result passes validation.

Do not skip validation

• Use Debugging and preflight before treating a file as production-ready.
• Check that selectors match real DOM, ports exist, graph wires resolve, and the runtime can mount the target surface.
• When a page uses both DOM and Canvas, verify each surface independently before checking the combined visual.

Working sample slot

Getting-started sample: Insert a minimal .fmtion file and matching HTML mount once the example is verified. This page intentionally reserves the sample location so the live docs can ship before the verified examples are inserted.

Faster Motion docs

Use these pages as the first public Faster Motion documentation set. Working samples will be inserted after each sample is verified.

Start

• Faster Motion documentation overview
• Get started with Faster Motion
• Faster Motion concepts

Surfaces

• DOM animation guide
• Canvas animation guide
• Canvas 3D and procedural guide

Reference

• .fmtion file format
• Runtime loading and publishing
• Debugging and preflight
• Node reference index

Related product guides

• Add motion to a page
• Use the visual editor for page motion
• Create a Canvas visual
• Meet the Visual Motion Editor