Lottie animations
Use + Lottie JSON above the canvas, or replace the JSON from a selected Lottie layer's Properties. The first supported profile is intentionally deterministic and portable:
- the Bodymovin/Lottie JSON is embedded in the editable project and exported OGraf module;
- playback loops continuously, with an editable non-negative speed multiplier;
- editor scrubbing and non-realtime
goToTime()derive the exact Lottie frame from composition time; realtime playback uses the same absolute-time frame calculation; load()predecodes embedded images and waits for fonts and the initial Canvas frame; failures return an error instead of allowing a blank graphic to pass as ready;- a positive adapter-owned backing Canvas avoids zero-sized matte buffers and unsafe player resize calls. CSS reframes that backing when the layer box changes;
- nonzero source in-points are mapped to the player's relative frame API, and changed non-realtime seeks rebuild the player for byte-repeatable output;
- the self-hosted light canvas player is bundled into
main.js, with no CDN dependency; - expressions are disabled; external image/font paths, segmented documents, undecodable image payloads, and luma mattes are rejected. Export images inside the JSON as data URIs, use alpha mattes, or convert artwork to shapes/glyphs.
A small compatible animation is included at examples/lottie/pulse.json. Marker control, one-shot
playback, dynamic Lottie text/data binding and renderer selection are not supported. Test your
exported graphic in the intended playout environment.