@thorvg/lottie-player 1.0.0-pre28 → 1.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 - 2025 ThorVG
+Copyright (c) 2023 - 2026 ThorVG Project
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,10 +1,10 @@
-[![npm](https://img.shields.io/npm/v/@thorvg/lottie-player)](https://www.npmjs.com/package/@thorvg/lottie-player)
-
 # ThorVG for Web
 <p align="center">
-  <img width="800" height="auto" src="https://github.com/thorvg/thorvg/blob/main/res/logo/512/thorvg-banner.png">
+  <img width="800" height="auto" src="https://github.com/thorvg/thorvg.site/blob/main/readme/logo/512/thorvg-banner.png">
 </p>
 
+[![npm](https://img.shields.io/npm/v/@thorvg/lottie-player)](https://www.npmjs.com/package/@thorvg/lottie-player)
+
 # @thorvg/lottie-player
 
 A Lottie Player which uses [ThorVG](https://github.com/thorvg/thorvg) as a renderer, provides a web component for easily embedding and playing [Lottie](https://airbnb.io/lottie) animations.
@@ -21,6 +21,28 @@ A Lottie Player which uses [ThorVG](https://github.com/thorvg/thorvg) as a rende
 npm install @thorvg/lottie-player
 ```
 
+## Contents
+- [Usage](#usage)
+  - [With HTML (Basic Usage)](#with-html-basic-usage)
+  - [With NPM (JS/TS)](#with-npm-jsts)
+  - [With ReactJS + TypeScript](#with-reactjs--typescript)
+  - [With SSR Framework](#with-ssr-framework)
+- [Player Preset Variants](#player-preset-variants)
+  - [Standard Presets](#standard-presets)
+  - [Lite Presets](#lite-presets)
+  - [Preset Comparison](#preset-comparison)
+  - [Preset Usage](#preset-usage)
+- [API](#api)
+  - [Properties](#properties)
+  - [Events](#events)
+  - [Methods](#methods)
+- [Examples](#examples)
+  - [Framework-specific Examples](#framework-specific-examples)
+  - [Build Testing](#build-testing)
+  - [Local Examples](#local-examples)
+
+<br />
+
 ## Usage
 ### With HTML (Basic Usage)
 
@@ -115,6 +137,9 @@ export default function Home() {
 </script>
 ```
 
+[Back to contents](#contents)
+<br />
+
 ## Player Preset Variants
 
 ThorVG Lottie Player provides multiple presets optimized for different use cases. Each preset can be selected based on bundle size and performance requirements.
@@ -122,19 +147,23 @@ ThorVG Lottie Player provides multiple presets optimized for different use cases
 ### Standard Presets
 - **SW**: A CPU-based renderer with full Lottie specification support
 - **GL**: A WebGL accelerated renderer with full Lottie specification support
+- **WG**: A WebGPU accelerated renderer with full Lottie specification support
 
 ### Lite Presets
 - **SW-Lite**: A CPU-based renderer that supports basic Lottie specification (PNG only; Fonts and Expressions are not supported)
 - **GL-Lite**: A WebGL accelerated renderer that supports basic Lottie specification (PNG only; Fonts and Expressions are not supported)
+- **WG-Lite**: A WebGPU accelerated renderer that supports basic Lottie specification (PNG only; Fonts and Expressions are not supported)
 
 ### Preset Comparison
 
 | Preset | Renderer | Features | Bundle Size | Use Case |
 |--------|----------|---------|-------------|----------|
-| `sw` | Software | lottie + expressions, jpg, png, webp, ttf | ~687KB | Full-featured applications with CPU rendering |
-| `gl` | WebGL | lottie + expressions, jpg, png, webp, ttf | ~694KB | Full-featured applications with WebGL acceleration |
-| `sw-lite` | Software | lottie, png | ~288KB | Lightweight applications with CPU rendering |
-| `gl-lite` | WebGL | lottie, png | ~294KB | Lightweight applications with WebGL acceleration |
+| `sw` | Software | lottie + expressions, jpg, png, webp, ttf | ~600KB | Full-featured applications with CPU rendering |
+| `gl` | WebGL | lottie + expressions, jpg, png, webp, ttf | ~650KB | Full-featured applications with WebGL acceleration |
+| `wg` | WebGPU | lottie + expressions, jpg, png, webp, ttf | ~650KB | Full-featured applications with WebGPU acceleration |
+| `sw-lite` | Software | lottie, png | ~250KB | Lightweight applications with CPU rendering |
+| `gl-lite` | WebGL | lottie, png | ~250KB | Lightweight applications with WebGL acceleration |
+| `wg-lite` | WebGPU | lottie, png | ~300KB | Lightweight applications with WebGPU acceleration |
 
 ### Preset Usage
 
@@ -149,11 +178,17 @@ ThorVG Lottie Player provides multiple presets optimized for different use cases
 <!-- WebGL Renderer (Standard) -->
 <script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/gl/lottie-player.js"></script>
 
+<!-- WebGPU Renderer (Standard) -->
+<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/wg/lottie-player.js"></script>
+
 <!-- Software Renderer (Lite) -->
 <script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/sw-lite/lottie-player.js"></script>
 
 <!-- WebGL Renderer (Lite) -->
 <script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/gl-lite/lottie-player.js"></script>
+
+<!-- WebGPU Renderer (Lite) -->
+<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/wg-lite/lottie-player.js"></script>
 ```
 
 #### NPM Usage
@@ -164,16 +199,25 @@ import '@thorvg/lottie-player';
 // Software Renderer (Standard)
 import '@thorvg/lottie-player/sw';
 
-// WebGL Renderer (Standard)  
+// WebGL Renderer (Standard)
 import '@thorvg/lottie-player/gl';
 
+// WebGPU Renderer (Standard)
+import '@thorvg/lottie-player/wg';
+
 // Software Renderer (Lite)
 import '@thorvg/lottie-player/sw-lite';
 
 // WebGL Renderer (Lite)
 import '@thorvg/lottie-player/gl-lite';
+
+// WebGPU Renderer (Lite)
+import '@thorvg/lottie-player/wg-lite';
 ```
 
+[Back to contents](#contents)
+<br />
+
 ## API
 ### Properties
 
@@ -331,6 +375,19 @@ player.addEventListener('load', () => {
 
 ---
 
+**Method** : `setQuality(value: number)`
+
+**Purpose** : Set rendering quality for animations
+
+**Parameters**
+| Name | Type | Description
+| --- | --- | --- |
+| value | `number` | Quality value (1-100). Higher values are likely to support better quality but may impact performance.
+
+**Return Type** : `void`
+
+---
+
 **Method** : `save(target: ExportableType)`
 
 **Purpose** : Export current animation to other file type
@@ -351,16 +408,31 @@ player.addEventListener('load', () => {
 
 **Return Type** : `LibraryVersion`
 
+[Back to contents](#contents)
+<br />
+
 ## Examples
 
 ### Framework-specific Examples
 
-Please check these examples in various environments.
+Check the usage of each preset in the `example/{framework}` directory:
 
-- [VanillaJS Usage](https://codesandbox.io/p/sandbox/thorvg-lottieplayer-vanillajs-t737qm)
-- [React Usage](https://codesandbox.io/p/devbox/thorvg-lottieplayer-react-hkkrq3)
-- [VueJS Usage](https://codesandbox.io/p/devbox/thorvg-lottieplayer-vue-758h3l)
-- [Svelte Usage](https://codesandbox.io/p/devbox/thorvg-lottieplayer-svelte-xd4zp6)
+- [ThorVG React Example](example/react/)
+- [ThorVG Vue Example](example/vue/)
+- [ThorVG Svelte Example](example/svelte/)
+
+### Build Testing
+
+Test framework compatibility by running builds across different frontend frameworks:
+
+```bash
+# From the root directory
+$ npm run test:build
+```
+
+This will automatically detect framework projects in the `example/` directory and test their build processes.
+
+The build testing script is located in `./build-test/`.
 
 ### Local Examples
 Check the usage of each preset in the `example/` directory:
@@ -370,3 +442,6 @@ Check the usage of each preset in the `example/` directory:
 - [Software Renderer (Lite)](example/software-lite.html) - Basic Lottie support with CPU rendering
 - [WebGL Renderer (Lite)](example/webgl-lite.html) - Basic Lottie support with WebGL acceleration
 - [WebGPU Renderer](example/webgpu.html) - Full Lottie support with WebGPU acceleration
+
+[Back to contents](#contents)
+<br />