Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
This map is the controlled table of contents for the Faster Motion docs. Use it to pick a learning path, then move through the left navigation in sequence.
Use the right path
- Getting started explains the minimum file shape, load flow, and verification loop.
- .fmtion file format is the source-backed schema reference for root keys, scenes, parameters, graph nodes, inputs, and assets.
- DOM animation is for webpage elements, selectors, scroll scenes, pointer interactions, text, SVG, paths, and CSS property writes.
- Canvas animation is for rendered 2D scenes, Canvas areas, objects, assets, state machines, and interactive visuals.
- Canvas 3D and procedural animation is for 3D scene graphs, cameras, lights, geometry, particles, physics, skeletons, and render planning.
Authoritative source facts
- Current file format constant:
FMTION_VERSION = 8. - Generated JSON schema coverage:
204definitions and top-level required keymeta. - Generated node registry coverage:
292node descriptors across20categories. - Source references for this docs pass:
src/fmtion/types/Fmtion.ts,src/fmtion/types/Scene.ts,src/core/GraphNode.ts,src/fmtion/RuntimeLoader.ts,src/fmtion/FmtionLoader.ts, andsrc/devtools/RuntimeDebugAPI.ts.
Recommended sequence
- Overview -> Getting started -> Concepts -> File format.
- DOM track: selectors -> scroll -> pointer and drag -> text, SVG, and paths -> responsive gates.
- Canvas track: area lifecycle -> objects and assets -> state machines.
- Reference track: runtime API -> debug API -> validation codes -> node categories -> production checklist.
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: Docs landing example that links one verified DOM sample and one verified Canvas sample after both pass validation and screenshot checks.
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