Local Lottie Player and Diagnostics
Play local Lottie JSON with playback, frame seeking, speed, zoom and background controls, and inspect layer, keyframe and embedded-image diagnostics.
About this local lottie player and diagnostics
Play local Lottie JSON with playback, frame seeking, speed, zoom and background controls, and inspect layer, keyframe and embedded-image diagnostics Processes media assets directly in the browser using HTML5 Canvas and WebAssembly decoders, ensuring zero file uploads.
Image processing & canvas pipeline
Load and control a local Lottie animation with the bundled official SVG light renderer, or run the separate structural diagnostic report.
Worked image transformation example
Scenario: Preview a 100 × 100 red solid for 60 frames at 30 fps.
Sample input:
Processing: Paste the example, load the local preview, then play or seek. Run structural diagnostics separately to inspect its metadata and layer definition.
Illustrative output:
Resolution, dimension & memory limits
Uses the official lottie-web 5.13.0 SVG light renderer. Supports 2D shape, solid, null and precomposition layers and embedded PNG/JPEG/WebP images. External assets, fonts/text layers, audio, 3D, expressions, effects and segmented animations are rejected. JSON must be smaller than 20 MB (20,000,000 bytes). Playback limits: 4096 × 4096 pixels, 240 fps, 10 minutes, 144,000 frames, 2,000 layer definitions and bounded JSON complexity. Rendering compatibility depends on the animation. No media export. Declared frame rate is not a measured rendering-performance score. Diagnostics inspect structure, not measured rendering speed, complete Lottie schema validity or image decoding. Malformed metadata, keyframes and assets are flagged. Decoded byte counts do not prove a valid image.
Local Lottie Player and Diagnostics image operations execute in client memory via HTML5 Canvas and browser decoders. Inspect output previews before replacing source assets.
In-memory image processing boundary
File buffers and document assets in Local Lottie Player and Diagnostics are processed in-memory via local browser APIs with zero file uploads to CZOA servers.
Image format & W3C Canvas standards
W3C Canvas 2D context specifications and standard image container formats:
- Lottie JSON field summary (metadata inspection only; no playback conformance)
Local Lottie Player and Diagnostics verification · Audit standards
How to use it
- Enter, paste, or select your input data into the Local Lottie Player and Diagnostics workspace controls.
- Review parameter fields, units, or options configured for Local Lottie Player and Diagnostics.
- Click the action button or observe immediate live calculations rendered by Local Lottie Player and Diagnostics.
Frequently asked questions
How do I play a local animation?+
Choose or drop a local JSON file above, or paste JSON. Load the preview, then play, pause, seek, change speed, zoom, or switch the background. Animation data stays in this browser. Structural diagnostics remain available separately.
Which playback controls are available?+
Playback starts paused and loops when playing. Seeking pauses at a frame position relative to the animation start. Speed ranges from 0.25× to 4×; zoom ranges from 25% to 400%. Changing input or leaving the page destroys the preview; load it again to resume.
Which content and limits does the player support?+
Runtime handling of "Which content and limits does the player support?" executes synchronously in your browser tab without remote delays.
Does the diagnostic report measure playback performance?+
Choose or paste local JSON smaller than 20 MB and inspect it. The report includes supplied metadata, frame count and duration in seconds when frame rate is positive. Layers in the root and every precomposition asset are counted once as definitions, even when referenced more than once; references are not expanded. Animated properties have a=1; valid time-bearing records in their k arrays are counted, including terminal records, not unique times. Asset rows report Base64 payload bytes, decoded byte lengths and payload percentage of UTF-8 JSON bytes. External images are listed without fetching.