Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
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.
Type domVariablesWriteCategory boundaryContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
value | float | Shared input value. Each declared variable remaps it independently into its own output range using its `inputMin/inputMax → outputMin/outputMax` pair. |
selector | string | F357 — wireable selector. When connected (e.g. from `splitText.pieceSelector`), the wired value overrides the `CSS Selector` param at bind time. Unwired = the param value is used. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the element receiving the variable writes. Multiple matches: only the first is written (use a forEach instance with `{ "fromScope": "selector" }` for per-element fan-out). |
properties | domVariablesChannels | {} | CSS custom properties to write. Each row defines one channel: variable name (must start with `--`), output range (`outputMin` / `outputMax`), unit, and easing curve. The shared `value` input is remapped per-channel using these settings. `inputMin` / `inputMax` default to [0, 1] (most common case for normalized progress / hover gates) and clamp defaults to on — use raw JSON edit if you need to override those. |
Use cases
- Scroll-driven CSS-variable layouts — one `scrollTrigger.progress` fans out to several `--*` variables that the cascade reads via `calc()` (bento grid expansion, gradient stop drift, accent-hue interpolation).
- Hover gate driving theme variables — `hover.hover` (0..1) → `--accent-hue`, `--accent-sat`, `--shadow-elev` with per-variable ranges and easing, no remap noise in the graph.
- Pose-style writes for non-transform properties — when you want to drive 3+ CSS variables coherently from one input, packing them into one node beats the visual clutter of N separate remap+write pairs.
Envelope
Use domVariablesWrite 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/