Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Perceptually uniform color interpolation in OKLab space. Emits a packed `color` bundle for direct wiring, plus individual r/g/b channels for legacy consumers.
Type colorTweenCategory animationContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
progress | float | 0..1 driver. At 0, output = `fromColor`; at 1, output = `toColor`. Wire from timeline, scrollTrigger, or any normalized signal. |
fromColor | color | Optional Color-typed override of the From Color param. When wired, the tween starts at this incoming color. Use to chain a colorTween's output into another, or sample from a palette / image / state. |
toColor | color | Optional Color-typed override of the To Color param. Same behavior as From Color (input). |
hueOffset | float | Optional hue rotation in degrees applied to BOTH from/to colors before interpolation. 0 = unchanged. 180 = opposite hue. Wire a randomFloat (0..360) for per-spawn random color, or a time-driven signal for continuous color cycling. |
saturation | float | Multiplier on the chroma (a, b) magnitude. 1 = unchanged, 0 = full grayscale, 1.5 = boosted chroma. Useful for "fade to grey" by ramping 1→0 over lifecycle, or per-spawn variety with randomFloat. |
alpha | float | 0..1 alpha applied to the output Color bundle. Wire from an opacity tween to fold opacity into the same node — replaces a separate opacity-write path. |
Outputs
| Port | Type | Description |
|---|---|---|
color | color | Packed Color bundle (RGBA). Wire into a `domPoseWrite` color-typed property port (or any Color-typed input). |
r | float | Red channel as a 0..255 float — for legacy r/g/b consumers. |
g | float | Green channel 0..255. |
b | float | Blue channel 0..255. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
fromColor | colorString | "#000000" | Color at progress=0 (when From Color input port is unwired). Pick from the swatch or paste hex / rgb() / hsl(). |
toColor | colorString | "#ffffff" | Color at progress=1 (when To Color input port is unwired). Same format as From Color. |
ease | easingCurve | "linear" | Easing curve applied to progress before color interpolation. Use power2.out / expo.out to front-load the color shift (color reaches near-final state early in lifecycle). |
saturation | float | 1 | Default chroma multiplier when Saturation port is unwired. 1 = unchanged. min 0; max 3; step 0.05 |
alpha | float | 1 | Default output alpha when Alpha port is unwired. 1 = fully opaque. min 0; max 1; step 0.05 |
Use cases
- Lifecycle color shift — wire `progress` from a timeline, set `fromColor`/`toColor` to head/tail colors. Output `color` drops into a `domPoseWrite` color-typed property port (e.g. `backgroundColor` with `portType: "color"`) or any color-typed input.
- Hot-to-cold visualization — bind a 0..1 metric (intensity, distance, age) to progress; OKLab keeps midpoints perceptually balanced unlike RGB lerp.
Related nodes
Envelope
Use colorTween 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-animation/