boundary node reference
Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Scene I/O boundary: read/write object transforms and properties, DOM CSS/attribute writes, color writes, stagger writes, data writes.
Category key boundaryGenerated public nodes 27Registry source faster-motion-docs/node-registry.json
Nodes
| Node | Type | Context | Description |
|---|---|---|---|
| Additive Property Write | additivePropertyWrite | canvas | F241 additive write boundary — sums multiple driver outputs into a single property without overwriting. |
| Camera | camera | canvas | 2D camera — zoom, pan, rotation, parallax, DOF, color effects, tint, vignette. |
| Clip Path Write | clipPathWrite | shared | Serializes ClipPathPoints to CSS polygon() and writes to target element clip-path. Dirty-checks the serialized string to skip redundant DOM writes. |
| Data Write | dataWrite | canvas | Write any-typed value to a canvas object property |
| DOM Attribute Read | domAttributeRead | shared | Reads a DOM value from an element at bind time and outputs it as a string. `readMode: attribute` (default) reads via getAttribute — SVG d/viewBox/points, data-* attributes, aria-* attributes. `readMode: textContent` reads el.textContent — used for i18n-friendly text animations where the translatable string lives in the DOM. Static read. Boundary counterpart to DOMStringWriteNode. |
| DOM Dock To | domDockTo | shared | Compute additive translate that centers a source DOM element over a target element, scaled by a 0..1 blend. Wire outputs into a domPoseWrite translateX/translateY. |
| DOM Indexed Dock | domIndexedDock | shared | Dock a source element onto the Nth child of a list, where N is derived from a 0..1 progress input. Sibling to domDockTo (which docks onto a static target). Used for typewriter cursors, scanning highlights, focus rings, and any "park X on the active item in a sequence" effect. |
| DOM Pose Write | domPoseWrite | shared | Boundary node: writes one or more float values to CSS properties on a target DOM element. Pick which properties to expose via the picker — each becomes an input port wired from upstream tweens / latches / math. |
| DOM Property Write | domPropertyWrite | dom | Write a float value to a single CSS property, transform component, data-attribute, scrollTop/scrollLeft, or textContent on a DOM element. Single-property sibling of `domPoseWrite` — use this when you need to drive ONE value (CSS variable, opacity, scrollTop, etc.); use `domPoseWrite` when you need a batched transform pose (translate / scale / rotate / skew). Custom properties (CSS variables like `--bento-col`) work — pass the full `--name` as the Property field; the runtime calls `el.style.setProperty(name, value + unit)`. |
| DOM Stage Preset | domStagePreset | shared | One-shot mount-time CSS writer: perspective / transformStyle on the stage, transformOrigin per slide. Used by the carousel mount-time setup. |
| DOM String Array Read | domStringArrayRead | shared | Reads textContent (or an attribute) from EVERY element matching a selector, emits the results as a stringArray. Purpose: i18n-friendly multi-source text animations — the HTML owns every translatable string, the .fmtion carries only the recipe. Static read at bind time via querySelectorAll; document-order matches. |
| DOM String Write | domStringWrite | dom | Write a string value to one or more DOM elements — CSS style property (including custom properties like `--name`), HTML/SVG attribute, or `textContent`. String sibling of `domPropertyWrite` (which writes floats); `domPoseWrite` is the multi-property unified writer when you need both float + string + color in one batched write. Resolves the selector via querySelectorAll; comma-listed selectors write to every match. |
| DOM Template Write | domTemplateWrite | shared | Combines N float inputs into one CSS string via a `{name}` template, then writes that string to a DOM element's style / attribute / textContent. One node replaces the pattern of N propertyAnimation channels each writing its own CSS variable plus a CSS `var()` recipe in the renderer — the graph emits the fully formed string and the CSS just consumes it. Use when one CSS property takes multiple animated components in one string: `filter: blur(...) brightness(...)`, `clip-path: polygon(...)`, `mask-image`, `transform-origin`. |
| DOM Variables Write | domVariablesWrite | shared | Batched CSS-custom-property writer with per-variable remap built in. Takes a single shared input value and fans it out to N CSS variables (`--foo`) on one element, with each variable carrying its own input/output range, unit, easing curve, and clamp. Replaces the common `1 source → N remap → N domPropertyWrite` chain — collapses to a single node in author view. |
| Group | group | shared | Authoring node for a scene-tree group container. Same expansion path as `sceneObject` but with type pinned to `group`. Children are separate `sceneObject` / `group` compounds whose params.parentId references this group; the loader joins parent-child via id at Phase 06 STN parent-resolution. |
| Mask Sync | maskSync | canvas | Mask transform synchronization — world-space mask geometry from source objects. |
| Multi-Attribute Read | multiAttrRead | shared | Reads N attributes from each element matching a selector in a single querySelectorAll pass, emits one stringArray output per attribute. Replaces N domStringArrayRead nodes that each re-query the same selector for one attribute (common in per-card metadata pipelines: title / camera / stock / location / year / type / overview, etc.). Output port names are author-chosen; the attribute strings can be data-attrs, HTML attrs, or `textContent` for the element's text. Static read at bind time; document-order matches. |
| Object Position | objectPosition | canvas | Read world position of a scene object |
| Object Property Read | objectPropertyRead | canvas | Read a runtime object property (bidirectional binding read side). |
| Position Write | positionWrite | canvas | Write world-space position to a scene object |
| Property Write | propertyWrite | canvas | Write a float value to any object property |
| Scene Graph Container | sceneGraphContainer | shared | Singleton authoring marker that requests the standard scene runtime topology — clip-registry-scene, scene-rest-bundle, layout-compute, scene-render, canvas-timeline, per-object STNs, per-clip OCEs, and the scene-graph + animation-subgraph modules. Phase 01a expansion derives the full set from sibling sceneObject / group / animationClip / stateMachine compounds in the same canvas area. Use instead of authoring those runtime nodes by hand — keeps file format slim and runtime topology a function of authoring intent. |
| Scene Object | sceneObject | shared | Authoring node for one renderable canvas object — rectangle, ellipse, path, image, text, etc. params carry the visual definition (type, transform fields, fill / stroke, properties bag). Phase 01a expansion pushes this into the canvas objects array so Phase 06 derives the matching sceneTransform exactly as for legacy-shape input. Use instead of writing the objects array inline. |
| Stagger Write | staggerWrite | dom | Batched per-element stagger writer, multi-channel. One node animates N CSS properties across the elements matching a selector, with a shared per-element stagger window. F358: each property is one channel in the `channels` map — add as many as you want (e.g. `rotateX` + `color` + `opacity`) and they all share the same selector, totalStagger, staggerOrder, and progress driver. Replaces the older "two staggerWrites with the same selector and one property each" pattern with a single node. |
| Switch Gate | switchGate | shared | Gates parentVisible for one child of a displayMode:switch group. Internal loader-generated node. |
| Transform Read | transformRead | canvas | Read full transform (position + rotation + scale) of a scene object |
| Transform Write | transformWrite | canvas | Write full transform to a scene object |
Related guides
Was this guide helpful?
Thanks for your feedback.