Canvas interactions become reliable when input signals feed named states, and states decide which animation or visual branch should be active.

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.

Input boundaries

• Use Canvas-scoped pointer input for interactions inside the rendered area, and page-level input only when the whole page should affect the scene.
• Normalize input before it enters scene logic so pointer, scroll, time, and data signals can be combined safely.
• Keep input smoothing separate from state transitions so responsiveness and visual polish can be tuned independently.

State machine design

• Use named states for visual modes such as idle, focus, drag, reveal, selected, complete, or paused.
• Transitions should use clear conditions: pulse, threshold, click, pointer hit, timeline end, or data update.
• Avoid hidden states that only make sense to the original author; state names should explain the visual mode.

Testing interactive scenes

• Test every state transition forward and backward, including rapid repeated input.
• Verify that state machines recover after resize, page visibility changes, or asset loading delays.
• Inspect current state and active transitions through the debug flow before shipping an interactive scene.

Working sample slot

Canvas inputs and state machines: 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