Tune the lookMaterials
Gradient
A colour ramp by position across the frame.
A gradient colours elements by where they sit: a sweep from one hue to another (or three) across the frame, and along each stroke on rings, beacons and signal traces. The full guide is on Colour & theme.
Cost and low power
No extra elements. Sheddable in low power (disable: ["gradient"]), which falls back to the pattern's plain colour.
Props
A colour ramp by position across the frame. In an FX Spec: /gradient. Off until gradient.strength is above 0.
| Prop | FX Spec | Type | Range | Default | Description |
|---|---|---|---|---|---|
gradient.angle | /gradient/angle | number | -360–720 (UI 0–360) deg | 90 | Direction of the ramp, CSS-style (0 = up, clockwise). |
gradient.hue2 | /gradient/hue2 | number | -720–1080 deg | 320 | Hue at the end (or middle, with a third stop) of the ramp. |
gradient.hue3 | /gradient/hue3 | number | -720–1080 deg | Optional third stop's hue; absent = a two-stop ramp. | |
gradient.hue | /gradient/hue | number | 0–360 deg | 200 | Hue at the start of the ramp. |
gradient.mid | /gradient/mid | number | 0.05–0.95 fraction | 0.5 | Position of the middle stop along the ramp (three stops). |
gradient.saturation | /gradient/saturation | number | 0–1 fraction | 0.8 | Saturation the ramp blends toward. |
gradient.strength | /gradient/strength | number | 0–1 fraction | 0 | Amount of the colour ramp; 0 turns it off. Also accepted: gradientStrength. |