Slots and themes, from Essential Graphics to the page

A slot is a property the file exposes so it can be changed after export: a colour, an opacity, a position, a scale, a text. A theme is a named set of slot values (Day, Night, Brand). A state machine can switch themes, and a web page can switch themes or set single slots. This page follows one property all the way: After Effects → slot → theme → machine → page.

The tutorials put it to work: Tokens and themes, Themes by example, Themes lab (every kind of slot, animated ones included), Gradient themes, Image themes.

1. A slot starts in Essential Graphics

A slot is a property you added to the comp's Essential Graphics panel, the After Effects feature used for Motion Graphics templates. No Essential Graphics, no slot, nothing for a theme to change.

Two ways to add one:

• In AXO: Interactive Studio → Slots and themes → Add a token. It lists the properties inside the comp that can become slots, with their current value; Add promotes one to Essential Graphics for you.
• In After Effects: drag the property from the Timeline into the Essential Graphics panel (or right-click it → Add Property to Essential Graphics). Then Rescan in the Studio.

The name in Essential Graphics is the slot's id in the file, the name a theme and your page refer to. Choose it before you export: After Effects cannot rename a promoted property later (remove it and add it again). Two properties with the same name in one comp get (2) added to the second; the same name in different comps is the same id in every file, which is how one page script can recolour several animations. Inside one .lottie with several animations, a slot of the same name but a different value in a second animation ships as name (2). A theme that sets name sets the copy too, and a theme that leaves it alone keeps each animation's own value. A colour token never takes the id of a slot the file already has, nor that of a different token in another animation of the same archive: it ships as name_2, and Build says so.

A property promoted inside a precomp becomes a slot too.

Gradients are the exception: After Effects cannot add a gradient's colours to Essential Graphics. Rename the Gradient Fill or Gradient Stroke to slot: <id> (for example slot: bg) and save the project. The export makes it a slot, and the Studio lists it with one colour per stop. Its colours must not be keyframed. The walk-through: Gradient themes. An image layer is marked the same way (slot: photo): Image themes.

Importing a file brings these two back as the same marks: a gradient slot comes in as a Gradient Fill (or Stroke) named slot: <id>, an image slot as an image layer named slot: <id>. Leave the name alone and the next Build writes the slot again, so a file made in another tool keeps working with its themes.

2. What can be a slot

This table comes from the exporter's own code and shows what the file will carry:

Where	Property	Slot type	After Effects match name
Gradient fill / stroke	End Point	position	ADBE Vector Grad End Pt
Gradient fill / stroke	Start Point	position	ADBE Vector Grad Start Pt
Layer	Opacity	number	ADBE Opacity
Layer	Position	position	ADBE Position
Layer	Rotation / Z Rotation	number	ADBE Rotate Z
Layer	Scale	scale	ADBE Scale
Layer	X Position (separated)	number	ADBE Position_0
Layer	X Rotation	number	ADBE Rotate X
Layer	Y Position (separated)	number	ADBE Position_1
Layer	Y Rotation	number	ADBE Rotate Y
Layer	Z Position (separated)	number	ADBE Position_2
Shape fill	Color	colour	ADBE Vector Fill Color
Shape fill	Opacity	number	ADBE Vector Fill Opacity
Shape group transform	Opacity	number	ADBE Vector Group Opacity
Shape group transform	Position	position	ADBE Vector Position
Shape group transform	Rotation	number	ADBE Vector Rotation
Shape group transform	Scale	scale	ADBE Vector Scale
Shape group transform	Skew	number	ADBE Vector Skew
Shape group transform	Skew Axis	number	ADBE Vector Skew Axis
Shape stroke	Color	colour	ADBE Vector Stroke Color
Shape stroke	Opacity	number	ADBE Vector Stroke Opacity
Text animator	Anchor Point	position	ADBE Text Anchor Point 3D
Text animator	Fill Brightness	number	ADBE Text Fill Brightness
Text animator	Fill Color	colour	ADBE Text Fill Color
Text animator	Fill Hue	number	ADBE Text Fill Hue
Text animator	Fill Saturation	number	ADBE Text Fill Saturation
Text animator	Opacity	number	ADBE Text Opacity
Text animator	Position	position	ADBE Text Position 3D
Text animator	Rotation	number	ADBE Text Rotation
Text animator	Scale	scale	ADBE Text Scale 3D
Text animator	Skew	number	ADBE Text Skew
Text animator	Skew Axis	number	ADBE Text Skew Axis
Text animator	Stroke Brightness	number	ADBE Text Stroke Brightness
Text animator	Stroke Color	colour	ADBE Text Stroke Color
Text animator	Stroke Hue	number	ADBE Text Stroke Hue
Text animator	Stroke Opacity	number	ADBE Text Stroke Opacity
Text animator	Stroke Saturation	number	ADBE Text Stroke Saturation
Text animator	Stroke Width	number	ADBE Text Stroke Width
Text animator	Tracking Amount	number	ADBE Text Tracking Amount
Text range selector	Amount	number	ADBE Text Selector Max Amount
Text range selector	Ease High	number	ADBE Text Levels Max Ease
Text range selector	Ease Low	number	ADBE Text Levels Min Ease
Text range selector	End	number	ADBE Text Percent End
Text range selector	End (index)	number	ADBE Text Index End
Text range selector	Start	number	ADBE Text Percent Start
Text range selector	Start (index)	number	ADBE Text Index Start
Text layer	Source Text	text	ADBE Text Document

Never a slot	Why	After Effects match name
Anchor point	the player refuses or blanks the file	ADBE Anchor Point
Shape group anchor	the player refuses or blanks the file	ADBE Vector Anchor
Shape path	the player draws nothing at all	ADBE Vector Shape
Rectangle size	the player draws nothing at all	ADBE Vector Rect Size
Rectangle position	the player draws nothing at all	ADBE Vector Rect Position
Rectangle roundness	the player draws nothing at all	ADBE Vector Rect Roundness
Ellipse size	the player draws nothing at all	ADBE Vector Ellipse Size
Ellipse position	the player draws nothing at all	ADBE Vector Ellipse Position
Star points	the player draws nothing at all	ADBE Vector Star Points
Star position	the player draws nothing at all	ADBE Vector Star Position
Star rotation	the player draws nothing at all	ADBE Vector Star Rotation
Star inner radius	the player draws nothing at all	ADBE Vector Star Inner Radius
Star outer radius	the player draws nothing at all	ADBE Vector Star Outer Radius
Star inner roundness	the player draws nothing at all	ADBE Vector Star Inner Roundess
Star outer roundness	the player draws nothing at all	ADBE Vector Star Outer Roundess
Trim start	the player draws nothing at all	ADBE Vector Trim Start
Trim end	the player draws nothing at all	ADBE Vector Trim End
Trim offset	the player draws nothing at all	ADBE Vector Trim Offset
Round corners	the player draws nothing at all	ADBE Vector RoundCorner Radius
Offset path	the player draws nothing at all	ADBE Vector Offset Amount
Offset path miter	the player draws nothing at all	ADBE Vector Offset Miter Limit
Pucker & bloat	the player draws nothing at all	ADBE Vector PuckerBloat Amount
Twist angle	the player draws nothing at all	ADBE Vector Twist Angle
Twist centre	the player draws nothing at all	ADBE Vector Twist Center
Zigzag size	the player draws nothing at all	ADBE Vector Zigzag Size
Zigzag detail	the player draws nothing at all	ADBE Vector Zigzag Detail
Repeater copies	the player draws nothing at all	ADBE Vector Repeater Copies
Repeater offset	the player draws nothing at all	ADBE Vector Repeater Offset
Repeater position	the player draws nothing at all	ADBE Vector Repeater Position
Repeater anchor	the player refuses or blanks the file	ADBE Vector Repeater Anchor
Repeater scale	the player draws nothing at all	ADBE Vector Repeater Scale
Repeater rotation	the player draws nothing at all	ADBE Vector Repeater Rotation
Repeater start opacity	the player draws nothing at all	ADBE Vector Repeater Opacity 1
Repeater end opacity	the player draws nothing at all	ADBE Vector Repeater Opacity 2
Stroke width	plays, but any theme makes the player drop the stroke	ADBE Vector Stroke Width

• The “never” rows were each measured in the dotLottie player: a slot there blanks the drawing, makes the player refuse the file, or (stroke width) drops the stroke as soon as any theme is applied. AXO exports those properties with their value and no slot, and the Studio says why when you try.
• Effects (a Drop Shadow's colour, a Slider or Color Control) are not in the first table: they ship with no slot type, and no player applies a theme to effect settings. The Studio marks them themes do not change this. To theme a shadow or a glow, put that colour on a shape fill or on text.
• The text-animator rows are what the exporter writes; the player was measured on fills, strokes, layer and group transforms and gradient points.

3. How it reaches the file

• Slots are written when the comp is interactive (Build → lottie, Ship this comp as interactive). AXO switches slots on by itself when the comp has promoted properties, and says so in the build log.
• The comp's .json carries the slots too, with their values, and nothing else: themes and state machines exist only inside the .lottie.
• In the file, a slot is the property's sid plus an entry in the animation's slots map holding the value.

4. Themes

A theme is a column in Slots and themes: one value per slot. A new column starts from the defaults (the values set in After Effects); change any of them.

• Every slot in every theme. AXO writes each theme with all slots, the unchanged ones at their default. That matters when a page switches themes: the dotLottie player keeps the value a previous theme set for any slot the next theme does not mention (measured), so a theme written by another tool may leave colours behind, so call resetTheme() first.
• Nothing is applied by itself. The player does not apply the file's first theme on load (measured, dotlottie-web 0.80): the page calls setTheme(id) after load, or a state machine switches it.
• A layer's own Transform shows on the next frame. In the dotLottie player, a theme value on a layer's Opacity, Position, Scale or Rotation is drawn only when the frame changes (measured, dotlottie-web 0.81); colours and shape-group transforms switch at once. On a playing animation you will not notice. On a paused one, or a state machine waiting on a state, the theme looks half applied: after setTheme, step the frame off and back (setFrame(f - 1), setFrame(f)). AXO's Preview does this for you. A shape group's transform has no such delay, so prefer it when the theme must apply while the animation stands still.
• Colours are opaque in a theme. The dotLottie player ignores the alpha of a theme colour (measured, dotlottie-web 0.81). For transparency, use an opacity slot.
• Animated slots: a slot whose property has keyframes can be captured (the theme carries the animation), followed (the theme keeps the comp's own keys) or frozen at one value. See Themes lab.
• Text: a theme can change a Source Text slot's text, size and colour (the Studio edits those three; the rest of the text document is kept). In the dotLottie player, any text rule makes the text fall back to the player's own font (measured on an earlier player version). Check the result in Preview. If the comp's text is exported as glyph shapes, only the characters the comp used exist in the file.
• Gradients: a theme sets every stop's colour; positions and transparency come from the comp. dotLottie only; lottie-web draws the comp's own gradient (Gradient themes).
• Images: name an image layer slot: <id> and a theme can swap its picture; the Studio's cell has Choose… (Image themes). dotLottie only; lottie-web shows the comp's picture.

5. From a state machine

A Switch theme action names a theme by its file id (shown in the Studio). It works on entering a state (the music player switches theme with the track) and straight from a click (the thermostat's mode chips). While a segment plays, the next frame shows it. On a parked state (no autoplay, one frame) nothing is drawn until the frame changes, and a position or scale rule appears one draw after the colours (measured, dotlottie-web 0.80). The thermostat shows the fix: A parked picture does not redraw by itself.

6. From a web page

import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/+esm"; // the version these pages use
const player = new DotLottie({ canvas, src: "card.lottie" });
player.addEventListener("load", () => {
  player.setTheme("night");                          // a theme from the file, by id
  player.setColorSlot("accent", [0.95, 0.7, 0.16]);  // one slot: colours are 0–1, not 0–255
  player.setScalarSlot("glow", 40);                  // a number slot
  console.log(player.getSlotIds());                  // every slot the file exposes
});
// player.resetTheme() — back to the file's own values; player.resetSlots() — undo single-slot changes.

• A value must match the slot's type: a number rule on a scale slot makes the player draw nothing (measured), not ignore it. Position and scale take as many numbers as the slot holds.
• getSlot(id) returns the property object ({ a, k }), not a bare value.
• lottie-web (no .lottie, no themes) draws the values in the JSON's slots map (measured on 5.13): edit that map before loadAnimation to recolour there.