lottie: Support configurable preset-players #137

tinyjin · 2025-08-20T08:30:31Z

ThorVG Lottie Player Presets

Overview

ThorVG Lottie Player now supports multiple preset configurations to optimize bundle size and performance for different use cases. This update introduces four distinct player variants:

Standard versions: Full-featured players with all loaders (jpg, png, webp, ttf)
Lite versions: Optimized players with minimal loaders (png only) for reduced bundle size

Bundle Size Comparison

sw-lite: ~243KB (minimal features)
sw: ~635KB (standard features)
gl/gl-lite: Similar size differences with OpenGL renderer

Feature Comparison

Preset	Renderer	Loaders	Bundle Size (WASM + JS)	Use Case
`sw`	Software	lottie (+expressions), jpg, png, webp, ttf	~687KB (641 +46)	Full-featured applications
`gl`	OpenGL	lottie (+expressions), jpg, png, webp, ttf	~694KB (635+59)	Hardware-accelerated rendering
`sw-lite`	Software	lottie, png	~288KB (243+45)	Lightweight applications
`gl-lite`	OpenGL	lottie, png	~294KB (236+58)	Lightweight with hardware acceleration

Project Build

npm run build
# See `example/` after build to run Lottie player demo

CDN Usage

Standard Software Renderer

<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/sw/lottie-player.js"></script>

<lottie-player></lottie-player>

Standard WebGL Renderer

<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/gl/lottie-player.js"></script>

<lottie-player></lottie-player>

Lite Software Renderer (Minimal Features)

<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/sw-lite/lottie-player.js"></script>

<lottie-player></lottie-player>

Lite WebGL Renderer (Minimal Features)

<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/gl-lite/lottie-player.js"></script>

<lottie-player></lottie-player>

NPM Usage

Standard Software Renderer

import '@thorvg/lottie-player/sw';

const player = document.createElement('lottie-player');
player.wasmUrl = "./dist/sw/thorvg.wasm"; // if needed

Standard WebGL Renderer

import '@thorvg/lottie-player/gl';

const player = document.createElement('lottie-player');
player.wasmUrl = "./dist/gl/thorvg.wasm"; // if needed

Lite Software Renderer (Minimal Features)

import '@thorvg/lottie-player/sw-lite';

const player = document.createElement('lottie-player');
player.wasmUrl = "./dist/sw-lite/thorvg.wasm"; // if needed

Lite WebGL Renderer (Minimal Features)

import '@thorvg/lottie-player/gl-lite';

const player = document.createElement('lottie-player');
player.wasmUrl = "./dist/gl-lite/thorvg.wasm"; // if needed

vercel · 2025-08-20T08:30:36Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thorvg-perf-test	Error			Aug 28, 2025 6:20am

tinyjin · 2025-08-21T07:27:27Z

Vercel build is just due to break change of wasm url path. We can ignore until we release preset package.

tinyjin · 2025-08-21T07:34:18Z

Copilot

Pull Request Overview

This PR introduces configurable preset players for the ThorVG Lottie Player, allowing developers to choose optimized builds based on their specific use case requirements. The implementation provides four distinct variants: standard and lite versions for both software and OpenGL renderers.

Key changes include:

Added preset-based build system with four variants (sw, gl, sw-lite, gl-lite)
Refactored codebase into base player class with preset-specific implementations
Updated build process to generate multiple WASM builds with different loader configurations

Reviewed Changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`wasm_setup.sh`	Orchestrates building all WASM variants with different configurations
`wasm_build.sh`	Handles preset-specific WASM compilation with different loader options
`src/base-player.ts`	Core player functionality extracted into reusable base class
`src/lottie-preset-player.ts`	Preset-specific player implementation with hardcoded renderer
`src/lottie-player.ts`	Simplified to extend base player with configurable renderer
`rollup.config.js`	Updated build configuration to support multiple preset variants
`package.json`	Added export paths for all preset variants
`example/*.html`	Updated examples to demonstrate different preset usage

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/lottie-preset-player.ts

src/base-player.ts

rollup.config.js

src/lottie-preset-player.ts

hermet

What is the beneift of separating BasePlayer and PresetPlayer?

wasm_build.sh

src/lottie-preset-player.ts

src/base-player.ts

README.md

Added support for multiple Lottie player presets to provide optimized bundle sizes and renderer options for different use cases: - Standard : single renderer with all loaders (jpg, png, webp, ttf) - Lite : single renderer with minimal loaders (png only) Usage: import '@thorvg/lottie-player/sw' # Standard software renderer import '@thorvg/lottie-player/gl' # Standard OpenGL renderer import '@thorvg/lottie-player/sw-lite' # Lite software renderer import '@thorvg/lottie-player/gl-lite' # Lite OpenGL renderer This allows developers to choose the optimal player configuration based on their performance and bundle size requirements. issue: thorvg/thorvg#3481

Created dedicated example pages for each Lottie web player preset to demonstrate the different configurations and their capabilities.

README.md

tinyjin · 2025-08-28T06:15:29Z

@hermet Following your recommendation, I revised the endings throughout the document for consistency.

README.md

tinyjin self-assigned this Aug 20, 2025

tinyjin added the enhancement Improve features label Aug 20, 2025

tinyjin force-pushed the jinny/wasm_presets branch from 1f0a789 to 88da68d Compare August 21, 2025 07:00

vercel bot deployed to Preview August 21, 2025 07:01 View deployment

tinyjin force-pushed the jinny/wasm_presets branch from 88da68d to b3b2b8b Compare August 21, 2025 07:25

vercel bot had a problem deploying to Preview August 21, 2025 07:25 Failure

tinyjin force-pushed the jinny/wasm_presets branch from b3b2b8b to 83959ce Compare August 21, 2025 07:31

vercel bot had a problem deploying to Preview August 21, 2025 07:32 Failure

vercel bot had a problem deploying to Preview August 21, 2025 07:49 Failure

tinyjin force-pushed the jinny/wasm_presets branch from bb23c44 to 919de7e Compare August 21, 2025 08:44

vercel bot had a problem deploying to Preview August 21, 2025 08:45 Failure

tinyjin mentioned this pull request Aug 21, 2025

wasm: rename player binary for web presets support thorvg/thorvg#3733

Merged

tinyjin marked this pull request as ready for review August 21, 2025 08:53

tinyjin requested a review from Copilot August 21, 2025 08:53

Copilot AI reviewed Aug 21, 2025

View reviewed changes

src/lottie-preset-player.ts Show resolved Hide resolved

src/base-player.ts Show resolved Hide resolved

src/base-player.ts Show resolved Hide resolved

rollup.config.js Outdated Show resolved Hide resolved

src/lottie-preset-player.ts Show resolved Hide resolved

tinyjin force-pushed the jinny/wasm_presets branch from 919de7e to 75f2f82 Compare August 21, 2025 18:13

vercel bot had a problem deploying to Preview August 21, 2025 18:13 Failure

tinyjin force-pushed the jinny/wasm_presets branch from 75f2f82 to 3e30b05 Compare August 25, 2025 03:37

vercel bot had a problem deploying to Preview August 25, 2025 03:37 Failure

tinyjin force-pushed the jinny/wasm_presets branch from 3e30b05 to 3a80792 Compare August 25, 2025 03:39

vercel bot had a problem deploying to Preview August 25, 2025 03:39 Failure

tinyjin force-pushed the jinny/wasm_presets branch from 3a80792 to e20dd5b Compare August 25, 2025 03:41

vercel bot had a problem deploying to Preview August 25, 2025 03:42 Failure

tinyjin requested a review from hermet August 25, 2025 03:45

hermet added the feature New feature additions label Aug 27, 2025

hermet reviewed Aug 27, 2025

View reviewed changes

wasm_build.sh Outdated Show resolved Hide resolved

src/lottie-preset-player.ts Outdated Show resolved Hide resolved

src/base-player.ts Show resolved Hide resolved

hermet reviewed Aug 28, 2025

View reviewed changes

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

tinyjin added 3 commits August 28, 2025 14:07

example: update preset-specific pages for Lottie player

4e20184

Created dedicated example pages for each Lottie web player preset to demonstrate the different configurations and their capabilities.

perf-test: update wasmUrl for break change

4877ba8

tinyjin force-pushed the jinny/wasm_presets branch from e20dd5b to 7ac16d4 Compare August 28, 2025 05:21

vercel bot had a problem deploying to Preview August 28, 2025 05:21 Failure

tinyjin force-pushed the jinny/wasm_presets branch from 7ac16d4 to cd32dbc Compare August 28, 2025 06:00

vercel bot had a problem deploying to Preview August 28, 2025 06:00 Failure

tinyjin requested a review from hermet August 28, 2025 06:02

hermet reviewed Aug 28, 2025

View reviewed changes

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

tinyjin force-pushed the jinny/wasm_presets branch from cd32dbc to 8a7c764 Compare August 28, 2025 06:13

vercel bot had a problem deploying to Preview August 28, 2025 06:14 Failure

tinyjin requested a review from hermet August 28, 2025 06:15

hermet reviewed Aug 28, 2025

View reviewed changes

README.md Outdated Show resolved Hide resolved

hermet approved these changes Aug 28, 2025

View reviewed changes

docs: Update player preset variants

38afbcd

tinyjin force-pushed the jinny/wasm_presets branch from 8a7c764 to 38afbcd Compare August 28, 2025 06:20

vercel bot had a problem deploying to Preview August 28, 2025 06:20 Failure

tinyjin merged commit 9bf1f69 into main Aug 28, 2025
1 of 2 checks passed

tinyjin deleted the jinny/wasm_presets branch August 28, 2025 06:21

tinyjin restored the jinny/wasm_presets branch August 28, 2025 06:21

tinyjin mentioned this pull request Aug 28, 2025

Provide the lottie players web with configurable modules? #108

Closed

tinyjin deleted the jinny/wasm_presets branch October 26, 2025 19:15

Uh oh!

Uh oh!

lottie: Support configurable preset-players #137

lottie: Support configurable preset-players #137

Uh oh!

Conversation

tinyjin commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ThorVG Lottie Player Presets

Overview

Bundle Size Comparison

Feature Comparison

Project Build

CDN Usage

Standard Software Renderer

Standard WebGL Renderer

Lite Software Renderer (Minimal Features)

Lite WebGL Renderer (Minimal Features)

NPM Usage

Standard Software Renderer

Standard WebGL Renderer

Lite Software Renderer (Minimal Features)

Lite WebGL Renderer (Minimal Features)

Uh oh!

vercel bot commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tinyjin commented Aug 21, 2025

Uh oh!

tinyjin commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. Common Test

2. Regression Test

3. Module bundler compatibility

4. Framework compatibility

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hermet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tinyjin commented Aug 28, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tinyjin commented Aug 20, 2025 •

edited

Loading

vercel bot commented Aug 20, 2025 •

edited

Loading

tinyjin commented Aug 21, 2025 •

edited

Loading