A .fmtion file is a JSON document that describes motion in a way the Faster Motion runtime can load, validate, and execute. It can contain DOM animation, Canvas animation, or both.

Common root fields

• meta: name, description, duration, fps, and other file-level information.
• parameters: named values that can be read or written by inputs, graphs, UI, or runtime code.
• inputs: scroll, pointer, time, keyboard, and other sources that update parameters or graph values.
• dom and domGraph: webpage animation definitions and node graphs.
• canvas or scenes: Canvas and 3D render surfaces, scene resources, and graph nodes.
• assets: images, fonts, audio, video, sprites, 3D assets, or other resources used by the runtime.

Minimal file

{
  "meta": { "name": "Untitled motion" },
  "parameters": {},
  "dom": [],
  "canvas": []
}

Connection shape

{
  "id": "write-title",
  "type": "domPropertyWrite",
  "params": {
    "selector": ".hero-title",
    "propertyName": "opacity"
  },
  "connections": {
    "value": { "nodeId": "fade", "port": "value" }
  }
}

Authoring principle

Prefer graph-readable structure over opaque custom code. If a value changes over time, make the driver, computation, and writer visible in the graph so the runtime, validator, editor, and docs can all reason about it.

Working sample slot

Format sample: Insert a complete small .fmtion file with one DOM graph and one Canvas graph after both are 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