A Canvas area is a rendered surface with its own mount, dimensions, graph, assets, and lifecycle. Treat it as a component that must start, render, pause, and dispose cleanly.

Where this fits

• Faster Motion docs map shows the full documentation structure.
• Faster Motion documentation overview explains the high-level surfaces and reading order.
• Debugging and preflight explains validation before publish.

Mounting and sizing

• Every Canvas area should have a stable mount selector and known sizing behavior. The mount owns where the rendered scene appears in the page.
• Use authored width, height, and aspect ratio intentionally. If the page resizes the mount, verify how the scene adapts.
• A Canvas visual should not rely on invisible or zero-size mounts; validation and browser inspection should catch that before publish.

Runtime lifecycle

• Load the file, attach the Canvas area, start the graph, and dispose when the page section or route is no longer active.
• Pause or reduce work when the visual is offscreen if the scene is expensive or not meaningful while hidden.
• Keep user input, scroll inputs, and scene updates connected to the area lifecycle so old listeners do not remain active after disposal.

Public verification

• Check that the Canvas is not blank at first paint, after resize, after route changes, and after tab visibility changes.
• Inspect frame rate and CPU/GPU cost on realistic devices before increasing particle count, mesh density, or physics complexity.
• Verify fallback behavior when assets fail or when the user prefers reduced motion.

Working sample slot

Canvas area lifecycle: This page reserves a sample location for a later verified example. Add the sample only after the source file, public page, validation output, and visual check all pass.

Faster Motion docs

Use these links to move between the guide set, the deeper reference pages, and the recipe planning pages. Verified working samples will be inserted after this documentation structure is reviewed.

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

Start

• Faster Motion docs map

DOM animation

• DOM selectors and targets
• Scroll animation
• Pointer, hover, and drag inputs
• Text, SVG, and path animation

Reference

• Responsive gates and parameter overrides
• Runtime API reference
• Debug API reference
• Validation errors and warning codes
• Node categories reference

Canvas animation

• Canvas area lifecycle
• Canvas objects, assets, and rendering
• Canvas inputs and state machines

3D and procedural

• 3D scenes, cameras, and lights
• Procedural geometry and fields
• Particles and physics

Operations

• Production checklist

Recipes

• Recipes overview