Use Canvas animation when the visual is rendered as a scene instead of ordinary page DOM. Canvas is the right surface for reusable visual moments, animated illustrations, sprites, imported animation playback, state machines, procedural 2D shapes, and visuals that need a stable render target.

Canvas area model

A Canvas area defines its mount, size, background, objects, skeletons, animations, state machines, and graph. It can use page inputs, parameters, assets, and timelines, but it renders through the Canvas runtime rather than direct CSS writes.

Use Canvas 2D for

• Animated product visuals that should stay contained in one render surface.
• Procedural shapes, SVG-like objects, paths, sprites, and image layers.
• Character, skeleton, IK, state machine, or imported motion-asset visuals.
• Reusable motion moments that can be published and inserted across pages.

Canvas authoring flow

1. Define the mount and raster size.
2. Add objects, assets, timelines, and state machines.
3. Drive properties with parameters, inputs, state, or graph nodes.
4. Check that the canvas renders nonblank, scales correctly, and does not overflow mobile viewports.

When not to use Canvas

• If the target is ordinary page copy or a simple section reveal, use DOM animation.
• If accessibility requires the animated content to be read as page text, keep semantic text in DOM and use Canvas as supporting media.
• If the visual needs to reflow as regular document content, Canvas may be too rigid.

Working sample slot

Canvas 2D sample: Insert a verified contained Canvas visual with a mount element, source .fmtion, and screenshot once available. 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