math node reference

Updated Jun 21, 2026 4 min read

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

Pure compute nodes: remap ranges, math expressions, utility operations (abs, clamp, round), smoothing, parallax offset, velocity calculation, string operations.

Category key mathGenerated public nodes 17Registry source faster-motion-docs/node-registry.json

Nodes

Node	Type	Context	Description
Color Array Pick	`colorArrayPick`	shared	Pure picker — emits `array[floor(index)]` as a Color. Index is clamped to [0, length-1]. Hex-string `values` param is parsed to Color at load time (zero parse cost on hot path). Used to drive a current-color output from a per-variant palette; pair with textReveal\s sourceIndex or variantStagger\s per-child index.
Converter	`converter`	shared	Value transformation (stringFormat, colorLerp, enumMap, conditional, math)
Expression	`expression`	shared	Evaluate a JavaScript math expression
Float Array Pick	`floatArrayPick`	shared	Pure picker — emits `array[floor(index)]` as a float. Index is clamped to [0, length-1]. The `array` input port wins when wired (non-empty); otherwise falls back to the `values` param. Fallback float returned when the resolved array is empty. Pair with textDecompose.itemSources (or any float-array source) to drive per-index side effects.
Gate	`gate`	shared	Blend a driven value toward a rest value under a 0..1 gate, with optional spring-smoothed threshold crossings
Math Utility	`mathUtil`	shared	Single Float→Float math operation. Picks unary (`abs`, `round`, `sqrt`, ...) or binary (`add`, `subtract`, `multiply`) ops; binary ops use `value` + `b`. Range ops (`clamp`, `normalize`) use `value` + `min` + `max`.
Palette LUT	`paletteLut`	shared	Sample a 1D colour palette at position `t` ∈ [0..1] with configurable interpolation (sRGB or perceptually-uniform OKLab) and wrap mode (clamp / repeat / mirror). Stops can be static (param) or dynamically wired via `inputStops` for computed palettes.
Parallax	`parallax`	shared	Convert scroll progress to parallax pixel offset
Phase Shift	`phaseShift`	shared	Per-clone phase shift of a shared 0..1 progress signal. Computes `(progress + index/count) % 1`, wrapping the result into [0, 1) so it can drive any node that consumes a normalized progress (staggerWrite, multiKeyframe, propertyAnimation). Replaces the inline `((node('progress') + (node('index') / node('count'))) % 1)` expression that recurs in any forEach-instanced template that needs each clone to ride a different phase of one shared clock.
Remap	`remap`	shared	Map a value from one range to another with optional curve
Selector Join	`selectorJoin`	shared	Concatenate `prefix` + `suffix` into a single CSS selector string. The canonical helper for composing per-iteration selectors out of a `forEachScope.selector` (prefix) and a static descendant fragment (suffix), replacing the F351 embedded-token form `"$match .child"`.
Smoothing	`smoothing`	shared	Temporal lowpass filter for any float signal — picks one of 3 filter shapes via `mode`. Replaces the old `spring` and `valueSolver` nodes (folded in). For magnetic-snap behaviour compose `snapFloat → smoothing(mode:exponential)`.
Snap Float	`snapFloat`	shared	Pure 1D nearest-from-list quantizer. Snaps the input to whichever entry of `values` is closest. Empty `values` = passthrough. For magnetic-snap behaviour (eased approach to the snapped target) compose `snapFloat → smoothing(mode:exponential)` — the inlined `smooth` param this node used to expose was a duplicate of SmoothingNode and was removed in the smoothing-family unification.
String Equals	`stringEquals`	shared	F316: Outputs 1 when both string inputs are non-null and strictly equal, 0 otherwise. Null/undefined always evaluates to 0 (fail-safe). `b` input accepts a literal via setLiteralB() when unwired.
String Op	`stringOp`	shared	Typed String→String operation (uppercase, trim, replace, template, etc.).
Threshold Map	`thresholdMap`	shared	Continuous float-to-string mapping over a single threshold. Emits `above` when input ≥ threshold, `below` otherwise — every frame, not just on crossing. Replaces the 2-node `expression(node('p') > X ? 1 : 0) → stringArrayPick { values: [below, above] }` pattern that recurs whenever a latched CSS property (`pointer-events`, `display`, `visibility`, `cursor`) needs to flip on/off based on a scalar driver. Distinct from `thresholdPulse`, which fires a one-shot pulse on crossing and is meant for event consumers.
Velocity	`velocity`	shared	Compute smoothed rate-of-change of any float signal

Was this guide helpful?