Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Preflight is a gate, not a suggestion. A file is not production-ready until source validation, runtime validation, visual checks, and public page checks all agree.
Recommended preflight order
- Validate JSON against the generated schema.
- Load the file in a production-equivalent page.
- Run
await FasterMotion.debug.validate()and treat error-severity results as blockers. - Inspect the relevant surface: selectors for DOM, scene wires/textures for 3D, physics readers for physics, state-machine readers for interaction.
- Capture desktop and mobile screenshots or video proof.
Common failure classes
- Missing or invalid selectors.
- Dead node or port wires.
- Two writers owning the same transform component.
- Scroll trigger runway that cannot reach the intended progress.
- Malformed responsive gates or overrides.
- Blank Canvas or 3D frames caused by missing mounts, assets, or offscreen generated resources.
What to record
- The .fmtion source path and version.
- The page URL and viewport.
- Validation output and accepted warnings.
- Screenshots or video frames for the visual surface.
- The exact node, selector, scene, or asset ID involved in a failure.
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: Debug sample with one intentionally broken selector, validation output, fix, and clean validation output.
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