Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
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`.
Type domTemplateWriteCategory boundaryContext sharedDynamic ports yesCompound no
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | Target Selector |
propertyName | cssProperty | "filter" | CSS Property |
template | string | "blur({blur}px) brightness({bright})" | CSS string with `{name}` placeholders. Each placeholder must match a declared input port name. Bake any unit (`px`, `%`, `deg`) into the template directly: `blur({blur}px)`. |
inputs | stringFloatMap | {"blur":{"type":"float"},"bright":{"type":"float"}} | Map of port name → input type (always float). Each entry materializes a float input port that substitutes the matching `{name}` placeholder. |
writeMode | enum | "" | Write Mode options , style, attribute, textContent |
precision | int | 4 | Number of decimal places to format each substituted float as. Default 4 — matches CSSOM rounding and avoids 17-digit float noise. min 0; max 8; step 1 |
Use cases
- Multi-component filter — `filter: blur({blur}px) brightness({bright})` driven by two channel outputs in one DOM write, no helper CSS variables.
- Animated polygon clip-path — `polygon({a}% 0, 100% {b}%, ...)` with each vertex driven independently.
- CSS mask-image with animated stops — `linear-gradient(black {a}%, transparent {b}%)`.
Related nodes
Envelope
Use domTemplateWrite as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-boundary/