Layer recipes

A recipe describes how a layer enters. Built-in recipes are listed below; add your own with the recipes option (guide).

Text recipes (data-in)

Recipe	Headings (split)	Other elements (block)
fade	Fade	Fade
rise	Words rise from a mask	Rise 46 px and fade in
drop	Words drop in	Drop and fade in
slide-left, slide-right	Words slide in from the side	Slide in
mask	Words revealed from a mask	Wipe up (clip)
lines-up	Lines rise from a mask, one after another	Clip reveal
stagger	Words with a stagger	Rise with stagger
blur	Focus pull	Focus pull
zoom	Scale up from 0.6	Scale in
flip	3D flip per word	3D flip
skew	Skewed slide	Skewed slide
words-blur	Each word comes into focus	Blur in
chars-up	Letters rise from a mask	Rise
chars-blur	Letters come into focus	Blur in
chars-flip	Letters flip in 3D	Flip
chars-wave	Letters in a wave	Rise
chars-scale	Letters pop in	Scale in
tracking	Letters converge from wide spacing	Fade
typewriter	Letters appear one by one	Step in
glitch-text	Letters scatter in with skew	Skew in
float	Words rise, then float gently (loop) and lift on hover	Rise

A heading (h1–h4) or any element with data-split uses the split version; other elements animate as one block.

Exits (data-out)

reverse (default: the entrance backwards, 55 % of its duration), fade, up, down, left, blur, none.

Image recipes (imageIn)

Applied to the background of the entering slide: develop (black and white to color), focus (blur to sharp), spotlight (dark, rotated zoom to normal), rise, tint (sepia to color), flicker, depth-zoom (slow zoom held for the whole slide), breathe (gentle zoom loop).

Frame format

{
  "split": "words",
  "mask": true,
  "stagger": 38,
  "order": "start",
  "in":    [{ "y": "105%" }, { "y": 0, "d": 1000, "e": "expo.out" }],
  "loop":  [{ "y": 0 }, { "y": "-8%", "d": 1800, "e": "sine.inOut" }],
  "hover": [{ "y": 0 }, { "y": "-10%", "d": 260, "e": "power2.out" }],
  "out":   [{ "o": 1 }, { "o": 0, "d": 400, "e": "power2.in" }]
}

Field	Type	Description
split	none | words | chars | lines	How text is split.
mask	boolean	Clip each word to its box (reveal from a mask).
stagger	ms	Delay between pieces.
order	start | center | random	Stagger order.
spreadX	em	Extra spacing per letter from the center (tracking effects).
scatter	[x, y] em	Random start offset per piece.
in	Frame[]	Entrance: first frame = start state, last = neutral.
loop	Frame[]	Played back and forth after the entrance.
hover	Frame[]	Played while the pointer is over the slide.
out	Frame[]	Exit.

Frame fields

Field	Meaning	Unit
o	opacity	0–1
x, y, z	translate	px number, or "%" / "em" string
s, sx, sy	scale	number
r, rx, ry	rotate	deg
skx, sky	skew	deg
blur	blur	px
gray, sepia	grayscale, sepia	0–1
contrast, bright, sat	contrast, brightness, saturation	1 = normal
hue	hue rotation	deg
clip	inset()	[top, right, bottom, left] in %
d	duration from the previous frame	ms
e	ease	name below

Any number can be { "base": 30, "phone": 12 } to use a different value under 600 px.

Eases

linear, steps, sine.out, sine.inOut, power1.out, power2.in, power2.out, power2.inOut, power3.in, power3.out, power4.out, expo.out, expo.inOut, circ.out, back.out.