Skip to content
- Register fonts first. Call
FontManager.register({ family, source }) for every family before building any text layer. There are no system fonts. Emoji need FontManager.registerEmojiFont(...) with a CBDT/CBLC color font.
- Keyframes are local. Frame 0 is the layer’s first frame. Never add the parent’s
startFrame.
- Frames are integers. Keyframe frames,
startFrame, durationFrames — whole numbers only.
- Animating
x/y overrides layout. Animate to the placed value: placed at y: 400 → fromTo("y", 440, 400).
x/y make a layer absolute unless position: "relative" is set.- Borders are
borderColor + borderWidth. CSS border strings are ignored.
- Give text a width when it can wrap; otherwise it may clip.
- Every
Layer.audio() needs durationFrames.
- Images are raster.
.png/.jpg/.webp → Layer.image; .json/.lottie → Layer.lottie.
- Effect strengths are often 0–100, not 0–1 (
Vignette, FilmGrain, Blur). Check the Effects reference.
- Grade, then optics, then grain.
FilmGrain is the outermost pass.
- PBR needs an environment.
roughness/metallic do nothing without Layer.environment() or a Lighting rig.
- One shadow light, directional or spot.
- Signals sample the composition frame, not the layer’s local frame.
- Vision trails by one frame. Verify vision with the MP4 or consecutive frames, never with a frame grid.
- Resolve assets from
import.meta.url so the browser preview can load them.
- Assets live in
assets/, in Git LFS. git lfs pull before rendering in a fresh clone; confirm new media appear in git lfs ls-files before committing; never commit output/.
- Verify cheapest first: typecheck →
lint() → renderFrame → renderFrameGrid → renderVideo({ qa: true }). Look at every image you render.
- End render scripts with
process.exit().
- Tokens live in
theme.ts. No magic colors, sizes or timings in scenes.
- Ease with intent.
back.out(1.4–1.7) entrances, expo.out/spring decelerations, power2.in exits, linear only for loops and counters.
- Custom shaders output premultiplied alpha and blend with
srcFactor: "one", never "src-alpha".
