Gradient themes

One file, four looks: and every look is a set of gradients, not flat colours: the card's background, a soft light that drifts across it and the timer's ring all change together. The sample comp is Gradient card (folder Interactive examples).

Loading the player…

Live · dotlottie-webDownload .lottie

Try it: click the card. The machine mood moves to the next mode (Focus, Break, Flow, Deep work), and each has its own theme: the gradients, the label and time, the session dot.

The transition

A theme switch is instant, so the card performs it. The comp has three parts: loop (0–239: the glow drifts, the arc turns), out (240–259: the arc unwinds to nothing, the glow blooms, the label and time lift away, the play button dips) and in (260–299: the arc sweeps back in the new colours, the glow settles, the new label drops in). The machine plays out, switches the theme on entering the next mode's in, then loops, exactly the Destination card's pattern. The label, time and dot of each mode are Opacity slots the themes set (one shown, the others at 0).

Why gradients need their own way in

Every other slot starts in Essential Graphics (Slots and themes). After Effects cannot add a gradient's colours to Essential Graphics, so a gradient is marked by its name instead:

Rename the Gradient Fill or Gradient Stroke in the shape layer's contents to slot: <id>, for example slot: bg.

The export then makes that gradient a slot called bg. The prefix is deliberate: a gradient that merely happens to be called Sky stays an ordinary gradient. Two gradients with the same name share the slot, so a theme changes both.

In the comp	Name	What it is
Card › Gradient Fill	slot: bg	the background, linear, three stops
Glow › Gradient Fill	slot: glow	a radial light that fades to transparent
Timer › Arc › Gradient Stroke	slot: ring	the timer's arc

In After Effects

1. Rename each gradient you want to theme to slot: <id>.
2. Save the project. After Effects gives scripts a gradient's colours only from the saved file; until then the Studio lists the slot as Save the project and offers no colours.
3. Keep the gradient's colours without keyframes. A theme sets one ramp, so a gradient whose colours animate cannot be a slot (the export says so and ships it as an ordinary gradient). Everything around it can move: here the glow drifts and the arc turns, while the gradients stay still.

In AXO

Interactive Studio → Slots and themes shows each gradient slot as a row: the Default column draws the comp's ramp, and a theme's cell opens one colour picker per stop. Change the stop colours per theme, then Build as .lottie.

• Every theme carries every gradient, the untouched ones at the comp's ramp, so switching from Dusk to Original really goes back (the player keeps the last value a theme set otherwise).
• Stop positions and the opacity ramp come from the comp. A stop that fades (the glow's outer stop) keeps its transparency when you change its colour.
• After Effects' midpoints between stops are not themed: the player gets the stops, and blends evenly between them.

On a web page

// the version these pages use
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/+esm";

const card = new DotLottie({ canvas: document.querySelector("#card"), src: "gradient-card.lottie", autoplay: true, loop: true });

card.addEventListener("load", () => {
  card.stateMachineLoad("mood"); // a click moves to the next mode, with its transition…
  card.stateMachineStart();
  // …or, without the machine, one theme by id (shown in the Studio): card.setTheme("dusk");

  // Or one gradient from the page: [offset, r, g, b] per stop, all 0–1, and the number of stops.
  card.setGradientSlot("bg", [0, 0.06, 0.09, 0.16,  1, 0.39, 0.4, 0.95], 2);
});

Measured in dotlottie-web 0.80:

• A theme's gradient may have more or fewer stops than the comp's gradient: the player draws what the theme says.
• In a theme file, each stop's colour must have four numbers (red, green, blue, opacity). A stop with three makes the player reject the whole theme: every colour in it, not just the gradient. AXO always writes four.
• lottie-web (the .json) draws the comp's own gradients; gradient themes need the dotLottie player. AXO's Preview shows them in both.

Variations

• Brand palettes: one illustration, a theme per client, each with its own background ramp.
• Time of day: a sky gradient per theme, switched by a state machine (Switch theme on entering a state).
• A progress ring whose gradient the page sets with setGradientSlot as a value changes: green to amber to red.