LottieFiles/dotlottie-web

Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with multi-package repos, or single-package repos to help you version and publish your code. You can find the full documentation f

documentation for it [in our repository](https://github.com/changesets/changesets)

We have a quick list of common questions to get you started engaging with this project in [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

{   "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",

"$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",

1. Go to the repo's [Security tab](https://github.com/LottieFiles/dotlottie-web/security/advisories/new).

cache: pnpm           node-version: lts/*           registry-url: https://registry.npmjs.org

registry-url: https://registry.npmjs.org

[Credential-related source omitted]

cache: pnpm           node-version: lts/*           registry-url: https://registry.npmjs.org

registry-url: https://registry.npmjs.org

[Credential-related source omitted]

trap 'rm -f "$NPMRC"' EXIT

trap 'rm -f "$NPMRC"' EXIT           {             echo "@lottiefiles:registry=https://npm.pkg.github.com/"

{             echo "@lottiefiles:registry=https://npm.pkg.github.com/"             echo '//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}'

echo "@lottiefiles:registry=https://npm.pkg.github.com/"

[Credential-related source omitted]

cache: pnpm           node-version: lts/*           registry-url: https://registry.npmjs.org

registry-url: https://registry.npmjs.org

# related issue https://github.com/denoland/deno/issues/26152

[Credential-related source omitted]

trap 'rm -f "$NPMRC"' EXIT

trap 'rm -f "$NPMRC"' EXIT           {             echo "@lottiefiles:registry=https://registry.npmjs.org/"

{             echo "@lottiefiles:registry=https://registry.npmjs.org/"             echo '//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}'

echo "@lottiefiles:registry=https://registry.npmjs.org/"

[Credential-related source omitted]

cache: pnpm           node-version: lts/*           registry-url: https://registry.npmjs.org

registry-url: https://registry.npmjs.org

[Credential-related source omitted]

trap 'rm -f "$NPMRC"' EXIT

trap 'rm -f "$NPMRC"' EXIT           {             echo "@lottiefiles:registry=https://npm.pkg.github.com/"

{             echo "@lottiefiles:registry=https://npm.pkg.github.com/"             echo '//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}'

echo "@lottiefiles:registry=https://npm.pkg.github.com/"

[Credential-related source omitted]

[Credential-related source omitted]

[submodule "deps/dotlottie-rs"] 	path = packages/web/dotlottie-rs 	url = https://github.com/Lottiefiles/dotlottie-rs

url = https://github.com/Lottiefiles/dotlottie-rs

Executable file

Executable file

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at [https://www.contributor-covenant.org/version/2/1/code\_of\_conduct.html][v2.1].

[https://www.contributor-covenant.org/version/2/1/code\_of\_conduct.html][v2.1].

For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at

[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at

[https://www.contributor-covenant.org/translations][translations].

[homepage]: https://www.contributor-covenant.org

[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html

[Mozilla CoC]: https://github.com/mozilla/diversity

[FAQ]: https://www.contributor-covenant.org/faq

[translations]: https://www.contributor-covenant.org/translations

* [Node.js](https://nodejs.org/) (v22+)

* [pnpm](https://pnpm.io/) (v10+)

# Clone the repository git clone https://github.com/LottieFiles/dotlottie-web.git

git clone https://github.com/LottieFiles/dotlottie-web.git

We use [Changesets](https://github.com/changesets/changesets) to manage versioning and changelogs. Every user-facing change needs a changeset.

We follow [Semantic Versioning](https://semver.org/):

![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-web?label=%40lottiefiles%2Fdotlottie-web)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@lottiefiles/dotlottie-web)

![npm downloads](https://img.shields.io/npm/dw/@lottiefiles/dotlottie-web)

![jsDelivr hits](https://img.shields.io/jsdelivr/npm/hw/%40lottiefiles/dotlottie-web)

![GitHub](https://img.shields.io/github/license/LottieFiles/dotlottie-web)

<p align="center">   <img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

<img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

The official LottieFiles player for <b>Lottie</b> (<code>.json</code>) and   <b>dotLottie</b> (<code>.lottie</code>) animations on the web — a Rust + WASM core   powered by <a href="https://github.com/thorvg/thorvg">ThorVG</a>, with Softwar

<b>dotLottie</b> (<code>.lottie</code>) animations on the web — a Rust + WASM core   powered by <a href="https://github.com/thorvg/thorvg">ThorVG</a>, with Software,   WebGL2, and WebGPU rendering backends and full

powered by <a href="https://github.com/thorvg/thorvg">ThorVG</a>, with Software,

WebGL2, and WebGPU rendering backends and full   <a href="https://lottiefiles.com/dotlottie">dotLottie v2</a> support (theming, state machines,   and audio).

<a href="https://lottiefiles.com/dotlottie">dotLottie v2</a> support (theming, state machines,

<p align="center">   <a href="https://lottiefiles.github.io/dotlottie-web/"><b>🌐 Live Viewer</b></a> ·

<a href="https://lottiefiles.github.io/dotlottie-web/"><b>🌐 Live Viewer</b></a> ·

<a href="https://lottiefiles.github.io/dotlottie-web/perf-test"><b>📊 Perf Playground</b></a> ·

<a href="https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/"><b>📚 Docs</b></a> ·

<a href="https://github.com/LottieFiles/dotlottie-rs"><b>🦀 dotLottie-rs</b></a>

* 📦 **Lottie + dotLottie, one player** — point `src` at a classic Lottie [`.json`](https://lottiefiles.github.io/lottie-docs/) or a [`.lottie`](https://lottiefiles.com/dotlottie) archive. The `.lottie` format bundles multiple animations, th

* 🦀 **Rust + WASM core** — powered by [`dotlottie-rs`](https://github.com/LottieFiles/dotlottie-rs), the same engine that ships in iOS, Android, and native dotLottie players. One battle-tested implementation across every platform.

* 🎨 **ThorVG renderer** — an industrial-grade vector graphics engine with the broadest Lottie feature coverage of any web renderer. See the [ThorVG Lottie support matrix](https://github.com/thorvg/thorvg/wiki/Lottie-Support).

const dotLottie = new DotLottie({   canvas: document.getElementById('canvas'),   src: 'https://your-animation-url.lottie',

canvas: document.getElementById('canvas'),   src: 'https://your-animation-url.lottie',   autoplay: true,

src: 'https://your-animation-url.lottie',

autoplay       loop       src="https://path-to-lottie.lottie"

loop       src="https://path-to-lottie.lottie"     />

src="https://path-to-lottie.lottie"

<dotlottie-wc     src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"

src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"

<script     type="module"     src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"

type="module"     src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"   ></script>

src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"

> Want to see the difference on your own hardware? The hosted [perf-test page](https://lottiefiles.github.io/dotlottie-web/perf-test) compares Software vs WebGL vs WebGPU vs Skottie/CanvasKit head-to-head.

A hosted companion app at **[lottiefiles.github.io/dotlottie-web](https://lottiefiles.github.io/dotlottie-web/)** for inspecting, debugging, and benchmarking animations:

| Page                                                                     | What it does                                                                                                                                                  | | -

| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [

| [**Home**](https://lottiefiles.github.io/dotlottie-web/)                 | Drop a `.lottie` or `.json` file to preview rendering and inspect manifest details                                                                            |

| [**Playground**](https://lottiefiles.github.io/dotlottie-web/playground) | Interactive editor for player config, themes, markers, and animation switching                                                                                |

| [**Performance**](https://lottiefiles.github.io/dotlottie-web/perf-test) | Stress test across 40+ animations — **compare Software / WebGL / WebGPU / Skottie head-to-head on your own hardware**, with seedable runs for reproducibility |

| [**List**](https://lottiefiles.github.io/dotlottie-web/list)             | Gallery of curated animations                                                                                                                                 |

| [**Embed**](https://lottiefiles.github.io/dotlottie-web/embed)           | Embedding patterns and demos                                                                                                                                  |

**[@lottiefiles/dotlottie-web](packages/web/README.md)** — [Getting Started](https://codepen.io/lottiefiles/pen/JjzJZmL) ·

[Getting Started](https://codepen.io/lottiefiles/pen/JjzJZmL) ·

[Playback Controls](https://codepen.io/lottiefiles/pen/dyrRKwg) ·

[Dynamic Loading](https://codepen.io/lottiefiles/pen/JjzJZgB) ·

[Worker](https://codepen.io/lottiefiles/pen/VwJZPrQ) ·

[Multi Animations](https://codepen.io/lottiefiles/pen/wvOxdRa) ·

[Advanced Layout](https://codepen.io/lottiefiles/pen/LYvZveR) ·

[Named Markers](https://codepen.io/lottiefiles/pen/RwOROKp) ·

[Theming](https://codepen.io/lottiefiles/pen/BaEzEeq) ·

[Interactivity](https://codepen.io/lottiefiles/pen/VwJvdRN)

**[@lottiefiles/dotlottie-react](packages/react/README.md)** — [Getting Started](https://codepen.io/lottiefiles/pen/vYPJpBN) ·

[Getting Started](https://codepen.io/lottiefiles/pen/vYPJpBN) ·

[Custom Controls](https://codepen.io/lottiefiles/pen/WNmEdxd)

**[@lottiefiles/dotlottie-vue](packages/vue/README.md)** — [Getting Started](https://codepen.io/lottiefiles/pen/yLwgeoJ)

[Getting Started](https://codepen.io/lottiefiles/pen/yLwgeoJ)

git clone https://github.com/LottieFiles/dotlottie-web.git

[MIT](LICENSE) © [LottieFiles](https://www.lottiefiles.com)

author: lottiefiles   version: "1.0.0"   source: "https://github.com/LottieFiles/dotlottie-web"

version: "1.0.0"   source: "https://github.com/LottieFiles/dotlottie-web" ---

source: "https://github.com/LottieFiles/dotlottie-web"

const dotLottie = new DotLottie({   canvas: document.getElementById('canvas') as HTMLCanvasElement,   src: 'https://example.com/animation.lottie',

canvas: document.getElementById('canvas') as HTMLCanvasElement,   src: 'https://example.com/animation.lottie',   autoplay: true,

src: 'https://example.com/animation.lottie',

return (     <DotLottieReact       src="https://example.com/animation.lottie"

<DotLottieReact       src="https://example.com/animation.lottie"       autoplay

src="https://example.com/animation.lottie"

return (     <DotLottieReact       src="https://example.com/animation.lottie"

<DotLottieReact       src="https://example.com/animation.lottie"       dotLottieRefCallback={(dotLottie) => (dotLottieRef.current = dotLottie)}

src="https://example.com/animation.lottie"

const dotLottie = new DotLottieWorker({   canvas: document.getElementById('canvas') as HTMLCanvasElement,   src: 'https://example.com/animation.lottie',

canvas: document.getElementById('canvas') as HTMLCanvasElement,   src: 'https://example.com/animation.lottie',   autoplay: true,

src: 'https://example.com/animation.lottie',

State machines enable interactive animations without code. See the [State Machine Guide](https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide) for details.

// Set numeric/boolean/string inputs for state conditions // See: https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide#working-with-inputs

// See: https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide#working-with-inputs

Slots allow runtime color/value customization. Themes follow the [dotLottie 2.0 spec](https://dotlottie.io/spec/2.0/#themes).

// Or apply theme data directly (JSON string per dotLottie 2.0 spec) // See: https://dotlottie.io/spec/2.0/#themes

// See: https://dotlottie.io/spec/2.0/#themes

* Documentation: [https://developers.lottiefiles.com/docs/dotlottie-player](https://developers.lottiefiles.com/docs/dotlottie-player)

* State Machine Guide: [https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide](https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide)

* GitHub: [https://github.com/LottieFiles/dotlottie-web](https://github.com/LottieFiles/dotlottie-web)

* dotLottie 2.0 Spec: [https://dotlottie.io/spec/2.0/](https://dotlottie.io/spec/2.0/)

* Create .lottie files: [https://lottiefiles.com](https://lottiefiles.com) or [https://creators.lottiefiles.com](https://creators.lottiefiles.com)

<meta name="viewport" content="width=device-width, initial-scale=1.0" />         <link             href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap"

<link             href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap"             rel="stylesheet"

href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap"

Executable file

"version": "0.0.1",   "type": "module",   "homepage": "https://lottiefiles.github.io/dotlottie-web/",

"type": "module",   "homepage": "https://lottiefiles.github.io/dotlottie-web/",   "private": true,

"homepage": "https://lottiefiles.github.io/dotlottie-web/",

Executable file

<svg width="165" height="32" viewBox="0 0 165 32" fill="none" xmlns="http://www.w3.org/2000/svg">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="

Executable file

<ListItem         name="multi-animations"         url="https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie"

name="multi-animations"         url="https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie"       />

url="https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie"

<ListItem         name="theming example"         url="https://lottie.host/884c11a9-e648-4b2f-9906-2c77279710b1/PalAqPKzRZ.lottie"

name="theming example"         url="https://lottie.host/884c11a9-e648-4b2f-9906-2c77279710b1/PalAqPKzRZ.lottie"       />

url="https://lottie.host/884c11a9-e648-4b2f-9906-2c77279710b1/PalAqPKzRZ.lottie"

<ListItem         name="marker example"         url={`https://lottie.host/a04c548c-307f-420b-9ba8-e90a4a2efea4/MT9OsNynSw.lottie`}

name="marker example"         url={`https://lottie.host/a04c548c-307f-420b-9ba8-e90a4a2efea4/MT9OsNynSw.lottie`}       />

url={`https://lottie.host/a04c548c-307f-420b-9ba8-e90a4a2efea4/MT9OsNynSw.lottie`}

Executable file

fetch('https://registry.npmjs.org/@lottiefiles/dotlottie-react')

Executable file

): Promise<DotLottie> {   const cached = moduleCache.get(version);   const mod = cached ?? (await import(/* @vite-ignore */ `https://esm.sh/@lottiefiles/dotlottie-web@${version}`));

const mod = cached ?? (await import(/* @vite-ignore */ `https://esm.sh/@lottiefiles/dotlottie-web@${version}`));

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

const data = await fetch(lottieURL);

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web';

Executable file

const dotLottie = new DotLottie({   canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',   autoplay: true,

src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web';

Executable file

const animations = [   'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

'https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie',

'https://lottie.host/884c11a9-e648-4b2f-9906-2c77279710b1/PalAqPKzRZ.lottie',

import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web';

Executable file

const dotLottie = new DotLottie({   canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',   autoplay: true,

src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web';

Executable file

const dotLottie = new DotLottie({   canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',   autoplay: false,

src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web';

Executable file

const dotLottie = new DotLottie({   canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',   autoplay: false,

src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web';

Executable file

const dotLottie = new DotLottie({   canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

canvas,   src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',   autoplay: true,

src: 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie',

Executable file

Executable file

Executable file

Executable file

Executable file

</Link>                 <a                   href="https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/"

<a                   href="https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/"                   target="_blank"

href="https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/"

Executable file

const BASE_ANIMATIONS = [   'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie',

'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie',

'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',

'https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json',

'https://lottie.host/68f06eea-5f90-4e58-b51e-3abe1fbd74b8/llUlrzgWDQ.lottie',

Executable file

const nameList = atob(seed).split(',');

Executable file

Executable file

Executable file

Executable file

Executable file

export const DEFAULT_SRC = 'https://lottie.host/779299c1-d174-4359-a66b-6253897b33e7/yRJTT0fCfq.lottie';

Executable file

Executable file

Executable file

Executable file

// https://vitejs.dev/config/

{   "$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",

"$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",

Executable file

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

Executable file

Executable file

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11

Executable file

Executable file

Executable file

const animations = [   'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie',

'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie',

'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',

'https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json',

Executable file

Executable file

Executable file

const animations = [   'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie',

'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie',

'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',

'https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json',

Executable file

Executable file

Executable file

[Credential-related source omitted]

Executable file

Executable file

const animations = [   'https://lottie.host/b06d1336-2c08-4156-aa6f-96f08ff511e0/4itF1pXb1i.lottie',

'https://lottie.host/b06d1336-2c08-4156-aa6f-96f08ff511e0/4itF1pXb1i.lottie',

'https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie',

'https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json',

'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',

Executable file

Executable file

/*      Uncomment the following line to enable solid-devtools.     For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme

Uncomment the following line to enable solid-devtools.     For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme     */

For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme

Executable file

Executable file

loop     ref="player"     src="https://lottie.host/5525262b-4e57-4f0a-8103-cfdaa7c8969e/VCYIkooYX8.json"

ref="player"     src="https://lottie.host/5525262b-4e57-4f0a-8103-cfdaa7c8969e/VCYIkooYX8.json"   />

src="https://lottie.host/5525262b-4e57-4f0a-8103-cfdaa7c8969e/VCYIkooYX8.json"

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="

<p>     Check out     <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite

Check out     <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite     starter

<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite

<p>     Install     <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>

Install     <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>     in your IDE for a better DX

<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>

Executable file

Executable file

Executable file

// https://vitejs.dev/config/

Executable file

Executable file

dotlottieComponent.src = 'https://lottie.host/0e2d86ab-604d-4fc4-8512-d44a30eb81a8/YFj05ZHqHA.json';

Executable file

pnpm start --width 200 --height 200 --fps 30 --repeat 0 --quality high --input https://lottie.host/aaccfd1e-487e-4e9a-9d20-c57299089cfc/iVNpuLw0co.lottie --speed 1.5

Executable file

fps: Number(rawArgs['fps']) || 60,   repeat: Number(rawArgs['repeat']) || 0,   input: rawArgs['input'] || 'https://lottie.host/0cbdb3ef-2fa5-4d1d-9e4e-f66c879e010d/D0bRr9d93F.lottie',

repeat: Number(rawArgs['repeat']) || 0,   input: rawArgs['input'] || 'https://lottie.host/0cbdb3ef-2fa5-4d1d-9e4e-f66c879e010d/D0bRr9d93F.lottie',   speed: Number(rawArgs['speed']) || 1,

input: rawArgs['input'] || 'https://lottie.host/0cbdb3ef-2fa5-4d1d-9e4e-f66c879e010d/D0bRr9d93F.lottie',

Executable file

Executable file

Executable file

app.innerHTML = ` <div class="grid" style="margin-top: 1000px">   <canvas data-src="https://lottie.host/b2d44b82-fd7e-401f-a4fa-77999147c0be/vqNwJryGBp.lottie"></canvas>

<div class="grid" style="margin-top: 1000px">   <canvas data-src="https://lottie.host/b2d44b82-fd7e-401f-a4fa-77999147c0be/vqNwJryGBp.lottie"></canvas>   <canvas data-bg-color="green" data-src="https://lottie.host/1cf72a35-6d88-4d9a-9961-f1

<canvas data-src="https://lottie.host/b2d44b82-fd7e-401f-a4fa-77999147c0be/vqNwJryGBp.lottie"></canvas>

<canvas data-bg-color="green" data-src="https://lottie.host/1cf72a35-6d88-4d9a-9961-f1bb88087f2c/miJIHiyH4Q.lottie"></canvas>

<canvas data-src="https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json"></canvas>

<canvas data-src="https://lottie.host/a7421582-4733-49e5-9f77-e8d4cd792239/WZQjpo4uZR.lottie"></canvas>

<canvas data-src="https://lottie.host/e2a24b6f-df7f-4fc5-94ea-30f0846f85dc/1RLOR2g0m3.lottie"></canvas>

<canvas data-src="https://lottie.host/35326116-a8ca-4219-81ca-df9ce56a3f22/zCGFevEA23.lottie"></canvas>

<canvas data-src="https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie"></canvas>

fetch(

// src: 'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',

reloadButton.addEventListener('click', () => {       dotLottie.load({         src: 'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',

dotLottie.load({         src: 'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',         loop: true,

src: 'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',

Executable file

Executable file

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

// stats.js - http://github.com/mrdoob/stats.js

Executable file

{"initial":"global","states":[{"name":"global","type":"GlobalState","transitions":[{"type":"Transition","toState":"star_1","guards":[{"type":"Numeric","conditionType":"Equal","inputName":"rating","compareTo":1}]},{"type":"Transition","toSta

curl -fsSL https://raw.githubusercontent.com/LottieFiles/dotlottie-web/main/guidelines/install.sh | bash

curl -fsSL https://raw.githubusercontent.com/LottieFiles/dotlottie-web/main/guidelines/install.sh | bash

# Download to current directory curl -sL https://raw.githubusercontent.com/LottieFiles/dotlottie-web/main/guidelines/command.md > DOTLOTTIE.md

curl -sL https://raw.githubusercontent.com/LottieFiles/dotlottie-web/main/guidelines/command.md > DOTLOTTIE.md

* [dotLottie Documentation](https://developers.lottiefiles.com/docs/dotlottie-player)

* [dotlottie-web GitHub](https://github.com/LottieFiles/dotlottie-web)

* [dotLottie Format](https://lottiefiles.com/dotlottie)

* [LottieFiles Creator](https://creators.lottiefiles.com)

const dotLottie = new DotLottie({   canvas: document.getElementById('canvas') as HTMLCanvasElement,   src: 'https://example.com/animation.lottie',

canvas: document.getElementById('canvas') as HTMLCanvasElement,   src: 'https://example.com/animation.lottie',   autoplay: true,

src: 'https://example.com/animation.lottie',

return (     <DotLottieReact       src="https://example.com/animation.lottie"

<DotLottieReact       src="https://example.com/animation.lottie"       autoplay

src="https://example.com/animation.lottie"

return (     <DotLottieReact       src="https://example.com/animation.lottie"

<DotLottieReact       src="https://example.com/animation.lottie"       dotLottieRefCallback={(dotLottie) => (dotLottieRef.current = dotLottie)}

src="https://example.com/animation.lottie"

const dotLottie = new DotLottieWorker({   canvas: document.getElementById('canvas') as HTMLCanvasElement,   src: 'https://example.com/animation.lottie',

canvas: document.getElementById('canvas') as HTMLCanvasElement,   src: 'https://example.com/animation.lottie',   autoplay: true,

src: 'https://example.com/animation.lottie',

State machines enable interactive animations without code. See the [State Machine Guide](https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide) for details.

// Set numeric/boolean/string inputs for state conditions // See: https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide#working-with-inputs

// See: https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide#working-with-inputs

Slots allow runtime color/value customization. Themes follow the [dotLottie 2.0 spec](https://dotlottie.io/spec/2.0/#themes).

// Or apply theme data directly (JSON string per dotLottie 2.0 spec) // See: https://dotlottie.io/spec/2.0/#themes

// See: https://dotlottie.io/spec/2.0/#themes

* Documentation: [https://developers.lottiefiles.com/docs/dotlottie-player](https://developers.lottiefiles.com/docs/dotlottie-player)

* State Machine Guide: [https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide](https://github.com/LottieFiles/dotlottie-web/wiki/dotLottie-State-Machine-Guide)

* GitHub: [https://github.com/LottieFiles/dotlottie-web](https://github.com/LottieFiles/dotlottie-web)

* dotLottie 2.0 Spec: [https://dotlottie.io/spec/2.0/](https://dotlottie.io/spec/2.0/)

* Create .lottie files: [https://lottiefiles.com](https://lottiefiles.com) or [https://creators.lottiefiles.com](https://creators.lottiefiles.com)

#!/bin/bash

# dotLottie Guidelines Installer # https://github.com/LottieFiles/dotlottie-web

# https://github.com/LottieFiles/dotlottie-web

REPO_URL="https://raw.githubusercontent.com/LottieFiles/dotlottie-web/main/guidelines"

if [ -d "$HOME/.claude" ]; then   mkdir -p "$HOME/.claude/commands"   curl -sL -o "$HOME/.claude/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"

mkdir -p "$HOME/.claude/commands"   curl -sL -o "$HOME/.claude/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"   printf "  ${GREEN}✓${RESET} Claude Code\n"

curl -sL -o "$HOME/.claude/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"

if [ -d "$HOME/.cursor" ]; then   mkdir -p "$HOME/.cursor/commands"   curl -sL -o "$HOME/.cursor/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"

mkdir -p "$HOME/.cursor/commands"   curl -sL -o "$HOME/.cursor/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"   printf "  ${GREEN}✓${RESET} Cursor\n"

curl -sL -o "$HOME/.cursor/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"

if command -v opencode &> /dev/null || [ -d "$HOME/.config/opencode" ]; then   mkdir -p "$HOME/.config/opencode/command"   curl -sL -o "$HOME/.config/opencode/command/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"

mkdir -p "$HOME/.config/opencode/command"   curl -sL -o "$HOME/.config/opencode/command/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"   printf "  ${GREEN}✓${RESET} OpenCode\n"

curl -sL -o "$HOME/.config/opencode/command/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"

echo "$MARKER" >> "$RULES_FILE"     echo "" >> "$RULES_FILE"     curl -sL "$REPO_URL/$COMMAND_FILE" >> "$RULES_FILE"

echo "" >> "$RULES_FILE"     curl -sL "$REPO_URL/$COMMAND_FILE" >> "$RULES_FILE"     printf "  ${GREEN}✓${RESET} Windsurf\n"

curl -sL "$REPO_URL/$COMMAND_FILE" >> "$RULES_FILE"

CONTENT=$(curl -sL "$REPO_URL/$COMMAND_FILE" | sed '1,/^---$/d' | sed '1,/^---$/d')

if command -v codex &> /dev/null || [ -d "$HOME/.codex" ]; then   mkdir -p "$HOME/.codex/commands"   curl -sL -o "$HOME/.codex/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"

mkdir -p "$HOME/.codex/commands"   curl -sL -o "$HOME/.codex/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"   printf "  ${GREEN}✓${RESET} Codex CLI\n"

curl -sL -o "$HOME/.codex/commands/$INSTALL_NAME" "$REPO_URL/$COMMAND_FILE"

echo ""   echo "Supported tools:"   echo "  • Claude Code: https://claude.ai/code"

echo "Supported tools:"   echo "  • Claude Code: https://claude.ai/code"   echo "  • Cursor: https://cursor.com"

echo "  • Claude Code: https://claude.ai/code"

echo "  • Cursor: https://cursor.com"

echo "  • OpenCode: https://opencode.ai"

echo "  • Windsurf: https://codeium.com/windsurf"

echo "  • Gemini CLI: https://github.com/google-gemini/gemini-cli"

echo "  • Codex CLI: https://github.com/openai/codex"

echo ""   echo "Alternatively, add the guidelines to your project:"   echo "  curl -sL $REPO_URL/$COMMAND_FILE > DOTLOTTIE.md"

echo "Alternatively, add the guidelines to your project:"   echo "  curl -sL $REPO_URL/$COMMAND_FILE > DOTLOTTIE.md"   exit 1

echo "  curl -sL $REPO_URL/$COMMAND_FILE > DOTLOTTIE.md"

echo "  • Other tools: Reference dotlottie-guidelines in prompts"   echo ""   echo "Learn more: https://developers.lottiefiles.com/docs/dotlottie-player"

echo ""   echo "Learn more: https://developers.lottiefiles.com/docs/dotlottie-player" fi

echo "Learn more: https://developers.lottiefiles.com/docs/dotlottie-player"

themeSwitching: new DotLottie({ 					canvas: document.getElementById("canvas-theme-switching"), 					src: "https://lottie.host/8e34d211-e22e-459e-bfc7-7400b283be87/6RKEZ9wCqO.lottie",

canvas: document.getElementById("canvas-theme-switching"), 					src: "https://lottie.host/8e34d211-e22e-459e-bfc7-7400b283be87/6RKEZ9wCqO.lottie", 				}),

src: "https://lottie.host/8e34d211-e22e-459e-bfc7-7400b283be87/6RKEZ9wCqO.lottie",

clickInteraction: new DotLottie({ 					canvas: document.getElementById("canvas-click-interaction"), 					src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json",

canvas: document.getElementById("canvas-click-interaction"), 					src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json", 					loop: false,

src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json",

cursorControlled: new DotLottie({ 					canvas: document.getElementById("canvas-cursor-controlled"), 					src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json",

canvas: document.getElementById("canvas-cursor-controlled"), 					src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json", 				}),

src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json",

scrollControlled: new DotLottie({ 					canvas: document.getElementById("canvas-scroll-controlled"), 					src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json",

canvas: document.getElementById("canvas-scroll-controlled"), 					src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json", 				}),

src: "https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json",

holdInteraction: new DotLottie({ 					canvas: document.getElementById("canvas-hold-interaction"), 					src: "https://lottie.host/cb480e3f-1db1-4fb9-a812-592cd1aaef3a/Qda343MSSf.lottie",

canvas: document.getElementById("canvas-hold-interaction"), 					src: "https://lottie.host/cb480e3f-1db1-4fb9-a812-592cd1aaef3a/Qda343MSSf.lottie", 				}),

src: "https://lottie.host/cb480e3f-1db1-4fb9-a812-592cd1aaef3a/Qda343MSSf.lottie",

openUrlPolicy: { 							requireUserInteraction: false, 							whitelist: ["https://www.lottiefiles.com"],

requireUserInteraction: false, 							whitelist: ["https://www.lottiefiles.com"], 						},

whitelist: ["https://www.lottiefiles.com"],

onLoopComplete: new DotLottie({ 					canvas: document.getElementById("canvas-on-loop-complete"), 					src: "https://asset-cdn.lottiefiles.dev/83b48a21-dfb0-4cd0-bad5-238662bfcd8a/57MLQJY15B.lottie",

canvas: document.getElementById("canvas-on-loop-complete"), 					src: "https://asset-cdn.lottiefiles.dev/83b48a21-dfb0-4cd0-bad5-238662bfcd8a/57MLQJY15B.lottie", 					stateMachineId: "StateMachine1",

src: "https://asset-cdn.lottiefiles.dev/83b48a21-dfb0-4cd0-bad5-238662bfcd8a/57MLQJY15B.lottie",

async function loadStateMachineData(filePath) { 				try { 					const response = await fetch(filePath);

try { 					const response = await fetch(filePath); 					if (!response.ok) {

const response = await fetch(filePath);

Executable file

> [!TIP] > Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your o

> Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your own with [

![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-react)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Fdotlottie-react)

![npm](https://img.shields.io/npm/dt/%40lottiefiles/dotlottie-react)

![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-react)

<p align="center">   <img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

<img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

A React library for rendering [lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://lottiefiles.com/dotlottie) animations in the browser.

[Learn more about dotLottie](https://lottiefiles.com/dotlottie).

* <a href="https://codepen.io/lottiefiles/pen/vYPJpBN" target="_blank">Getting Started</a>

* <a href="https://codepen.io/lottiefiles/pen/WNmEdxd" target="_blank">Custom Playback Controls</a>

Executable file

"repository": {     "type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",     "directory": "packages/react"

"url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"directory": "packages/react"   },   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/react?utm_source=npm&utm_medium=package",

},   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/react?utm_source=npm&utm_medium=package",   "bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

"homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/react?utm_source=npm&utm_medium=package",

"bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

Executable file

let response = await fetch(lottieSrc);

response = await fetch(dotLottieSrc);

Executable file

Executable file

> [!TIP] > Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your o

> Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your own with [

<p align="center">   <img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

<img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

A Solid library for rendering [lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://lottiefiles.com/dotlottie) animations in the browser.

[Learn more about dotLottie](https://lottiefiles.com/dotlottie).

Executable file

"repository": {     "type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",     "directory": "packages/solid"

"url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"directory": "packages/solid"   },   "homepage": "https://docs.lottiefiles.com/en/runtimes?utm_source=npm&utm_medium=package",

},   "homepage": "https://docs.lottiefiles.com/en/runtimes?utm_source=npm&utm_medium=package",   "bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

"homepage": "https://docs.lottiefiles.com/en/runtimes?utm_source=npm&utm_medium=package",

"bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

Executable file

Executable file

Executable file

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

> [!TIP] > Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your o

> Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your own with [

![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-svelte)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Fdotlottie-svelte)

![npm](https://img.shields.io/npm/dt/%40lottiefiles/dotlottie-svelte)

![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-svelte)

<p align="center">   <img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

<img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

A Svelte component for rendering [Lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://lottiefiles.com/dotlottie) animations. It acts as a wrapper around the [`dotLottie`](../web/README.md) web player.

[Learn more about dotLottie](https://lottiefiles.com/dotlottie).

Executable file

"repository": {     "type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",     "directory": "packages/svelte"

"url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"directory": "packages/svelte"   },   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/svelte?utm_source=npm&utm_medium=package",

},   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/svelte?utm_source=npm&utm_medium=package",   "bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

"homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/svelte?utm_source=npm&utm_medium=package",

"bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

Executable file

// See https://kit.svelte.dev/docs/types#app

Executable file

Executable file

let speed = $state(1); let hasMultipleAnimations = $state(false); let src = $state('https://lottie.host/b06d1336-2c08-4156-aa6f-96f08ff511e0/4itF1pXb1i.lottie');

let hasMultipleAnimations = $state(false); let src = $state('https://lottie.host/b06d1336-2c08-4156-aa6f-96f08ff511e0/4itF1pXb1i.lottie'); let activeAnimationIdx = $state(0);

let src = $state('https://lottie.host/b06d1336-2c08-4156-aa6f-96f08ff511e0/4itF1pXb1i.lottie');

/> <button onclick={() => { 	src = "https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json"

<button onclick={() => { 	src = "https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json" }}>Switch src</button>

src = "https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json"

Executable file

// Consult https://kit.svelte.dev/docs/integrations#preprocessors

// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

// See https://kit.svelte.dev/docs/adapters for more information about adapters.

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

Executable file

let response = await fetch(lottieSrc);

response = await fetch(dotLottieSrc);

Executable file

Executable file

> [!TIP] > Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your o

> Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your own with [

![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-vue)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Fdotlottie-vue)

![npm](https://img.shields.io/npm/dt/%40lottiefiles/dotlottie-vue)

![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-vue)

<p align="center">   <img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

<img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

A Vue library for rendering [lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://lottiefiles.com/dotlottie) animations in the browser.

[Learn more about dotLottie](https://lottiefiles.com/dotlottie).

<template>   <DotLottieVue style="height: 500px; width: 500px" autoplay loop src="https://path-to-lottie.lottie" />

<DotLottieVue style="height: 500px; width: 500px" autoplay loop src="https://path-to-lottie.lottie" />

* <a href="https://codepen.io/lottiefiles/pen/yLwgeoJ" target="_blank">Basic Example</a>

Executable file

"repository": {     "type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",     "directory": "packages/vue"

"url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"directory": "packages/vue"   },   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/vue?utm_source=npm&utm_medium=package",

},   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/vue?utm_source=npm&utm_medium=package",   "bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

"homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/vue?utm_source=npm&utm_medium=package",

"bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

Executable file

Executable file

Executable file

> [!TIP] > Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your o

> Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your own with [

![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-wc)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Fdotlottie-wc)

![npm](https://img.shields.io/npm/dt/%40lottiefiles%2Fdotlottie-wc)

![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-wc)

<p align="center">   <img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

<img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

A web component for rendering and playing [Lottie](https://lottiefiles.github.io/lottie-docs/) and [DotLottie](https://lottiefiles.com/dotlottie) animations in web applications.

[Learn more about dotLottie](https://lottiefiles.com/dotlottie).

<dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay="true" loop="true"></dotlottie-wc>

</head> <body>     <dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay loop></dotlottie-wc>

<body>     <dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay loop></dotlottie-wc>     <script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js">

<dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay loop></dotlottie-wc>

<script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>

<script type="module">   import { setWasmUrl } from 'https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js';

import { setWasmUrl } from 'https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js';

You can find the matching `dotlottie-player.wasm` for your installed version inside the `@lottiefiles/dotlottie-web` package (`dist/dotlottie-player.wasm`) or on a npm CDN, e.g. `https://unpkg.com/@lottiefiles/dotlottie-web@x.y.z/dist/dotlo

Executable file

const animationData = await fetch(lottieSrc).then((res) => res.json());

const lottieAnimationData = await fetch(lottieSrc).then((res) => res.text());

src: 'https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie',

Executable file

<script type="module" src="./dist/index.js"></script>         <dotlottie-worker-wc             src="https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie"

<dotlottie-worker-wc             src="https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie"             autoplay="true"

src="https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie"

></dotlottie-worker-wc>         <dotlottie-wc             src="https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie"

<dotlottie-wc             src="https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie"             autoplay="true"

src="https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie"

Executable file

"repository": {     "type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",     "directory": "packages/wc"

"url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"directory": "packages/wc"   },   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/web-component?utm_source=npm&utm_medium=package",

},   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/web-component?utm_source=npm&utm_medium=package",   "bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

"homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/web-component?utm_source=npm&utm_medium=package",

"bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

Executable file

/**    * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks

* @see https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

* [Rust](https://rustup.rs/)

* [wasm-bindgen-cli](https://rustwasm.github.io/wasm-bindgen/) (installed automatically via `make setup`)

- 59f4ce4: chore: update [dotLottie-rs v0.1.40](https://github.com/LottieFiles/dotlottie-rs/releases/tag/v0.1.40) WASM

- Integrated [dotlottie-rs v0.1.24](https://github.com/LottieFiles/dotlottie-rs/releases/tag/v0.1.24) WASM bindings.

More details can be found in the   [LottieFiles developers postal](https://developers.lottiefiles.com/docs/dotlottie-player/)

[LottieFiles developers postal](https://developers.lottiefiles.com/docs/dotlottie-player/)

Release details: [dotlottie-rs@0.1.19](https://github.com/LottieFiles/dotlottie-rs/releases/tag/v0.1.19)

Resolves: [#170](https://github.com/LottieFiles/dotlottie-web/issues/170)

Executable file

@rm -rf $(WASM_OUT_BASE)/wasm $(WASM_OUT_BASE)/wasm-webgl $(WASM_OUT_BASE)/wasm-webgpu

> [!TIP] > Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your o

> Looking for animations to use with this player? Browse **[100,000+ free Lottie animations](https://lottiefiles.com/free-animations?utm_source=npm&utm_medium=readme)** and grab any of them as `.lottie` or `.json`, or create your own with [

![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-web)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@lottiefiles/dotlottie-web)

![npm](https://img.shields.io/npm/dw/@lottiefiles/dotlottie-web)

![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/npm/hw/%40lottiefiles/dotlottie-web)

![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-web)

<p align="center">   <img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

<img src="https://lottie.host/43f43646-b018-4d72-a96b-02a929cd9727/gARxdIetbE.svg" alt="dotLottie Web" width="550" />

`@lottiefiles/dotlottie-web` is a JavaScript library for rendering [Lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://lottiefiles.com/dotlottie) animations in Node.js and web environments. It provides a simple and 

[Learn more about dotLottie](https://lottiefiles.com/dotlottie).

To get started with `@lottiefiles/dotlottie-web`, follow the [documentation here](https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/).

<link rel="preconnect" href="https://cdn.jsdelivr.net" />

as="fetch"   crossorigin   href="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.77.1/dist/dotlottie-player.wasm"

crossorigin   href="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.77.1/dist/dotlottie-player.wasm" />

href="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.77.1/dist/dotlottie-player.wasm"

| Feature             | Required   | Can I Use                                                      | | ------------------- | ---------- | -------------------------------------------------------------- | | **WebAssembly**     | ✅ Yes      |

| ------------------- | ---------- | -------------------------------------------------------------- | | **WebAssembly**     | ✅ Yes      | [WebAssembly support](https://caniuse.com/wasm)                | | **Canvas 2D API**   | ✅ Yes      |

| **WebAssembly**     | ✅ Yes      | [WebAssembly support](https://caniuse.com/wasm)                | | **Canvas 2D API**   | ✅ Yes      | [Canvas 2D support](https://caniuse.com/canvas)                | | **Fetch API**       | ✅ Yes      |

| **Canvas 2D API**   | ✅ Yes      | [Canvas 2D support](https://caniuse.com/canvas)                | | **Fetch API**       | ✅ Yes      | [Fetch API support](https://caniuse.com/fetch)                 | | **Web Workers**     | Optional\* |

| **Fetch API**       | ✅ Yes      | [Fetch API support](https://caniuse.com/fetch)                 |

| **Web Workers**     | Optional\* | [Web Workers support](https://caniuse.com/webworkers)          |

| **OffscreenCanvas** | Optional\* | [OffscreenCanvas support](https://caniuse.com/offscreencanvas) |

* [Getting Started](https://codepen.io/lottiefiles/pen/JjzJZmL)

* [Controlling Animation Playback](https://codepen.io/lottiefiles/pen/dyrRKwg)

* [Dynamic Animation Loading](https://codepen.io/lottiefiles/pen/JjzJZgB)

* [dotLottie Worker](https://codepen.io/lottiefiles/pen/VwJZPrQ)

* [Multi Animations .lottie file](https://codepen.io/lottiefiles/pen/wvOxdRa)

* [Advanced Animation Layout](https://codepen.io/lottiefiles/pen/LYvZveR)

* [Named Markers](https://codepen.io/lottiefiles/pen/RwOROKp)

* [dotLottie Theming](https://codepen.io/lottiefiles/pen/BaEzEeq)

* [dotLottie Interactivity](https://codepen.io/lottiefiles/pen/VwJvdRN)

Encountered a problem or have a feature request? Log an issue in our [issues](https://github.com/LottieFiles/dotlottie-web/issues) tab. You can also browse through older issues and discussions to find solutions to common problems.

themeSwitching: new DotLottie({                     canvas: document.getElementById('canvas-theme-switching'),                     src: 'https://lottie.host/8e34d211-e22e-459e-bfc7-7400b283be87/6RKEZ9wCqO.lottie',

canvas: document.getElementById('canvas-theme-switching'),                     src: 'https://lottie.host/8e34d211-e22e-459e-bfc7-7400b283be87/6RKEZ9wCqO.lottie',                 }),

src: 'https://lottie.host/8e34d211-e22e-459e-bfc7-7400b283be87/6RKEZ9wCqO.lottie',

clickInteraction: new DotLottie({                     canvas: document.getElementById('canvas-click-interaction'),                     src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',

canvas: document.getElementById('canvas-click-interaction'),                     src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',                     loop: false,

src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',

cursorControlled: new DotLottie({                     canvas: document.getElementById('canvas-cursor-controlled'),                     src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',

canvas: document.getElementById('canvas-cursor-controlled'),                     src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',                 }),

src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',

scrollControlled: new DotLottie({                     canvas: document.getElementById('canvas-scroll-controlled'),                     src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',

canvas: document.getElementById('canvas-scroll-controlled'),                     src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',                 }),

src: 'https://lottie.host/fba88936-b753-4751-a6ca-94db246157cf/5pGajCeC0B.json',

holdInteraction: new DotLottie({                     canvas: document.getElementById('canvas-hold-interaction'),                     src: 'https://lottie.host/cb480e3f-1db1-4fb9-a812-592cd1aaef3a/Qda343MSSf.lottie',

canvas: document.getElementById('canvas-hold-interaction'),                     src: 'https://lottie.host/cb480e3f-1db1-4fb9-a812-592cd1aaef3a/Qda343MSSf.lottie',                 }),

src: 'https://lottie.host/cb480e3f-1db1-4fb9-a812-592cd1aaef3a/Qda343MSSf.lottie',

openUrlPolicy: {                             requireUserInteraction: false,                             whitelist: ['https://www.lottiefiles.com'],

requireUserInteraction: false,                             whitelist: ['https://www.lottiefiles.com'],                         },

whitelist: ['https://www.lottiefiles.com'],

onLoopComplete: new DotLottie({                     canvas: document.getElementById('canvas-on-loop-complete'),                     src: 'https://asset-cdn.lottiefiles.dev/83b48a21-dfb0-4cd0-bad5-238662bfcd8a/57MLQJY15B.lottie',

canvas: document.getElementById('canvas-on-loop-complete'),                     src: 'https://asset-cdn.lottiefiles.dev/83b48a21-dfb0-4cd0-bad5-238662bfcd8a/57MLQJY15B.lottie',                     stateMachineId: 'StateMachine1',

src: 'https://asset-cdn.lottiefiles.dev/83b48a21-dfb0-4cd0-bad5-238662bfcd8a/57MLQJY15B.lottie',

async function loadStateMachineData(filePath) {                 try {                     const response = await fetch(filePath);

try {                     const response = await fetch(filePath);                     if (!response.ok) {

const response = await fetch(filePath);

Executable file

"repository": {     "type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"type": "git",     "url": "git+https://github.com/LottieFiles/dotlottie-web.git",     "directory": "packages/web"

"url": "git+https://github.com/LottieFiles/dotlottie-web.git",

"directory": "packages/web"   },   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/js?utm_source=npm&utm_medium=package",

},   "homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/js?utm_source=npm&utm_medium=package",   "bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

"homepage": "https://docs.lottiefiles.com/en/runtimes/distributions/js?utm_source=npm&utm_medium=package",

"bugs": "https://github.com/LottieFiles/dotlottie-web/issues",

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {         module_or_path = fetch(module_or_path);

module_or_path = fetch(module_or_path);

Executable file

Executable file

Executable file

dotLottieWasmLoaderSingleton ??= createWasmLoader(     init,     `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/dotlottie-player.wasm`,

init,     `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/dotlottie-player.wasm`,     `https://unpkg.com/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/dotlottie-player.wasm`,

`https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/dotlottie-player.wasm`,

`https://unpkg.com/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/dotlottie-player.wasm`,

private async _fetchData(src: string, signal: AbortSignal | null = null): Promise<string | ArrayBuffer> {     const response = await fetch(src, { signal });

const response = await fetch(src, { signal });

if (typeof fontSource === 'string') {         const response = await fetch(fontSource);

const response = await fetch(fontSource);

Executable file

Executable file

Executable file

Executable file

Executable file

*    * // Allow a specific domain only    * openUrlPolicy: { whitelist: ["https://example.com"] }

* // Allow a specific domain only    * openUrlPolicy: { whitelist: ["https://example.com"] }    *

* openUrlPolicy: { whitelist: ["https://example.com"] }

/**  * Text document properties  * @see https://lottiefiles.github.io/lottie-docs/text/#text-document

* Text document properties  * @see https://lottiefiles.github.io/lottie-docs/text/#text-document  */

* @see https://lottiefiles.github.io/lottie-docs/text/#text-document

* Text document properties for theme text rules.  * Uses descriptive property names as per dotLottie v2.0 spec.  * @see https://dotlottie.io/spec/2.0/#text-document

* Uses descriptive property names as per dotLottie v2.0 spec.  * @see https://dotlottie.io/spec/2.0/#text-document  */

* @see https://dotlottie.io/spec/2.0/#text-document

* Theme definition for customizing Lottie animation properties.  * Themes override animated properties mapped to Lottie Slots.  * @see https://dotlottie.io/spec/2.0/#themes

* Themes override animated properties mapped to Lottie Slots.  * @see https://dotlottie.io/spec/2.0/#themes  *

* @see https://dotlottie.io/spec/2.0/#themes

Executable file

const response = await fetch(src);

Executable file

async function initFromBytes(url: string): Promise<void> {     const response = await fetch(url);

const response = await fetch(url);

Executable file

Executable file

if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {         module_or_path = fetch(module_or_path);

module_or_path = fetch(module_or_path);

Executable file

Executable file

webGLWasmLoaderSingleton ??= createWasmLoader(     init,     `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgl/dotlottie-player.wasm`,

init,     `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgl/dotlottie-player.wasm`,     `https://unpkg.com/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgl/dotlottie-player.wasm`,

`https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgl/dotlottie-player.wasm`,

`https://unpkg.com/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgl/dotlottie-player.wasm`,

Executable file

Executable file

Executable file

if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {         module_or_path = fetch(module_or_path);

module_or_path = fetch(module_or_path);

Executable file

Executable file

webGPUWasmLoaderSingleton ??= createWasmLoader(     init,     `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgpu/dotlottie-player.wasm`,

init,     `https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgpu/dotlottie-player.wasm`,     `https://unpkg.com/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgpu/dotlottie-player.wasm`,

`https://cdn.jsdelivr.net/npm/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgpu/dotlottie-player.wasm`,

`https://unpkg.com/${PACKAGE_NAME}@${PACKAGE_VERSION}/dist/webgpu/dotlottie-player.wasm`,

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

test('dispatches loadError on invalid source', async () => {       const invalidSrc = 'https://example.com/invalid.lottie';

const invalidSrc = 'https://example.com/invalid.lottie';

test('loads .lottie animation from animation data as array buffer', async () => {       const res = await fetch(src);

const res = await fetch(src);

test('loads lottie json file from animation data as string', async () => {       const res = await fetch(jsonSrc);

const res = await fetch(jsonSrc);

test('loads lottie json file from animation data as json object', async () => {       const res = await fetch(jsonSrc);

const res = await fetch(jsonSrc);

const response = await fetch(src);

const redPng = (): Uint8Array => Uint8Array.from(atob(RED_PNG_BASE64), (char) => char.charCodeAt(0));

const pngBytes = Uint8Array.from(atob(MAGENTA_PNG.split(',')[1] ?? ''), (char) => char.charCodeAt(0));

const url = 'https://example.com/sun.png';

const pngBytes = Uint8Array.from(atob(MAGENTA_PNG.split(',')[1] ?? ''), (char) => char.charCodeAt(0));

const url = 'https://example.com/sun.png';

const multiAnimationSrc = 'https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie';

describe('animationId config', () => {     const multiAnimationSrc = 'https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie';

const multiAnimationSrc = 'https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie';

const response = await fetch(smSrc);

const fontResponse = await fetch(impactFontUrl);

Executable file

const internalMessageEvent: StateMachineInternalMessage = {         type: 'stateMachineInternalMessage',         message: 'OpenUrl: https://example.com',

type: 'stateMachineInternalMessage',         message: 'OpenUrl: https://example.com',       };

message: 'OpenUrl: https://example.com',

manager.dispatch({ type: 'stateMachineError', error: 'Something went wrong' });       manager.dispatch({ type: 'stateMachineInputFired', inputName: 'trigger' });       manager.dispatch({ type: 'stateMachineInternalMessage', message: 'OpenUr

manager.dispatch({ type: 'stateMachineInternalMessage', message: 'OpenUrl: https://test.com' });

const internalMessageEvent: StateMachineInternalMessage = {         type: 'stateMachineInternalMessage',         message: 'OpenUrl: https://example.com',

type: 'stateMachineInternalMessage',         message: 'OpenUrl: https://example.com',       };

message: 'OpenUrl: https://example.com',

Executable file

Executable file

Executable file

Executable file

test('returns true for a valid .lottie URL', async () => {     const response = await fetch(dotLottieUrl);

const response = await fetch(dotLottieUrl);

test('returns true for a valid Lottie URL', async () => {     const response = await fetch(lottieUrl);

const response = await fetch(lottieUrl);

Executable file

const PRIMARY = 'https://primary.example.com/player.wasm';

const BACKUP = 'https://backup.example.com/player.wasm';

loader.setWasmUrl('https://changed.example.com/player.wasm');

const loader = createWasmLoader(initFn, PRIMARY, BACKUP);     await loader.load();     const NEW_URL = 'https://other.example.com/player.wasm';

await loader.load();     const NEW_URL = 'https://other.example.com/player.wasm';     loader.setWasmUrl(NEW_URL);

const NEW_URL = 'https://other.example.com/player.wasm';

Executable file

const wasmUrl = new URL('../src/core/dotlottie-player.wasm', import.meta.url).href; const src = new URL('../../../fixtures/test.lottie', import.meta.url).href; const UNREACHABLE = 'https://127.0.0.1:1/does-not-exist.wasm';

const UNREACHABLE = 'https://127.0.0.1:1/does-not-exist.wasm';

// Without resolution this would be loadError: `fetch('/…')` throws in a blob: worker.

Executable file

Executable file

Executable file

Executable file

resolution: {integrity: sha512-0ThV1uZVfKJ2pwYQy52EKH8edKnvEsSDGdxRf/n1Wz15xbqI+8qKs0BHSIQ7yLyaU5gFSaEooEgK1kTiKJaE4g==}     engines: {node: '>18.0.0'}     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/su

deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}     deprecated: This version is no longer supported. Please see h

engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}     deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.     hasBin: true

deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.

stable@0.1.8:     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}     deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is depre

deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_

Executable file

GITHUB_SHA,   GITHUB_RUN_ID,   GITHUB_SERVER_URL = 'https://github.com',

GITHUB_RUN_ID,   GITHUB_SERVER_URL = 'https://github.com',   GITHUB_STEP_SUMMARY,

GITHUB_SERVER_URL = 'https://github.com',

const runUrl = `${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}`;

async function api(endpoint, options = {}) {   const response = await fetch(`https://api.github.com${endpoint}`, {

const response = await fetch(`https://api.github.com${endpoint}`, {

[Credential-related source omitted]

Executable file

{   "$schema": "https://turbo.build/schema.json",

"$schema": "https://turbo.build/schema.json",

Executable file