@lottiefiles/dotlottie-web 0.77.1 → 0.78.1

package/README.md

@@ -1,5 +1,9 @@
 # @lottiefiles/dotlottie-web
 
+> [!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 own with [Lottie Creator](https://lottiefiles.com/lottie-creator?utm_source=npm&utm_medium=readme).
+
+
 ![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)
@@ -15,6 +19,7 @@
 * [Introduction](#introduction)
   * [What is dotLottie?](#what-is-dotlottie)
 * [Documentation](#documentation)
+* [Faster First Frame](#faster-first-frame)
 * [Supported Platforms](#supported-platforms)
   * [Browser Requirements](#browser-requirements)
 * [Live Examples](#live-examples)
@@ -23,18 +28,43 @@
 
 ## Introduction
 
-`@lottiefiles/dotlottie-web` is a JavaScript library for rendering [Lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://dotlottie.io) animations in Node.js and web environments. It provides a simple and intuitive API for loading, playing, and controlling animations, as well as advanced features like interactivity and theming.
+`@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 intuitive API for loading, playing, and controlling animations, as well as advanced features like interactivity and theming.
 
 ### What is dotLottie?
 
 dotLottie is an open-source file format that bundles one or more Lottie animations along with their assets into a single, compressed .lottie file. It uses ZIP compression for efficient storage and distribution. The format also supports advanced features like interactivity and theming, making it a powerful tool for creating dynamic and interactive animations.
 
-[Learn more about dotLottie](https://dotlottie.io/).
+[Learn more about dotLottie](https://lottiefiles.com/dotlottie).
 
 ## Documentation
 
 To get started with `@lottiefiles/dotlottie-web`, follow the [documentation here](https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/).
 
+## Faster First Frame
+
+The player's WASM engine (\~500 KB compressed) is fetched from a CDN when the first player is constructed. To take that download off your first animation's critical path:
+
+```js
+import { DotLottie } from '@lottiefiles/dotlottie-web';
+
+// At app or route load, before any player is constructed:
+DotLottie.preload();
+```
+
+Or let the browser start the download even earlier (`crossorigin` is required — without it the preloaded response can't be reused and the file downloads twice):
+
+```html
+<link rel="preconnect" href="https://cdn.jsdelivr.net" />
+<link
+  rel="preload"
+  as="fetch"
+  crossorigin
+  href="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.77.1/dist/dotlottie-player.wasm"
+/>
+```
+
+The version in the URL must match your installed package version — the player fetches a version-pinned URL, and a mismatch means the preload can't be reused. If you use `setWasmUrl()`, call it before `preload()` and point the preload tag at the same URL.
+
 ## Supported Platforms
 
 `@lottiefiles/dotlottie-web` is an isomorphic library designed to work in both browser and Node.js environments. It supports Node.js version 18 and higher, as well as all major web browsers.