Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
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.
Type paletteLutCategory mathContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
t | float | Palette position. Behaviour outside [0..1] depends on `wrapMode`. |
inputStops | floatArray | Optional flat `[pos, r, g, b, a, ...]` array (5 entries per stop). When wired and non-empty, overrides the static `stops` param. Use for computed / theme-derived palettes. |
Outputs
| Port | Type | Description |
|---|---|---|
color | color | The interpolated colour at `t`. |
r | float | R |
g | float | G |
b | float | B |
a | float | A |
colorHex | string | CSS-ready hex string (`#rrggbb` or `#rrggbbaa` if alpha < 1). |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
stops | colorPaletteStops | [] | Ordered colour stops: `[{ position: 0..1, color: { r, g, b, a } }, ...]`. Sorted on bind. Overridden by wired `inputStops` when present. |
wrapMode | enum | "clamp" | `clamp` (default) — t outside [0..1] returns first / last stop. `repeat` — t = fract(t). `mirror` — triangle wave (1.5 → 0.5; 1.7 → 0.3). options clamp, repeat, mirror |
interpolationMode | enum | "srgb" | `srgb` — linear in sRGB channels (default; cheapest; matches naive lerp). `oklab` — perceptually uniform interpolation; significantly nicer for palettes that span hues. Slightly more expensive. options srgb, oklab |
Use cases
- Per-slide background colour — author lists slide colours as palette stops, slideRouter.currentIndex / slideCount drives `t`. Wire `color` into a `domPropertyWrite` background.
- Heatmap / data-viz value → colour mapping — `wrapMode: clamp` + `interpolationMode: oklab` for perceptual uniformity.
- Cyclic gradient sweep — `wrapMode: repeat` for an infinite hue cycle driven by time or scroll.
- Theme drift — wire `inputStops` from a state machine (computed at runtime) so the palette itself can change, not just `t`.
Related nodes
Envelope
Use paletteLut 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-math/