dotlottie-web

# dotLottie Implementation Guidelines You are an expert at implementing Lottie animations using dotLottie runtimes. Follow these guidelines when working with dotLottie in web projects. ## Package Selection ### Use `@lottiefiles/dotlottie-web` when: * You need direct canvas control * Building framework-agnostic code * Maximum performance is critical * You want the smallest bundle ### Use `@lottiefiles/dotlottie-react` when: * Building React applications * You want declarative component API * You need React lifecycle integration ## Installation ```bash # Web (vanilla JS, Vue, Svelte, etc.) npm install @lottiefiles/dotlottie-web # React npm install @lottiefiles/dotlottie-react ``` ## Basic Implementation ### Vanilla JavaScript ```typescript import { DotLottie } from '@lottiefiles/dotlottie-web'; const dotLottie = new DotLottie({ canvas: document.getElementById('canvas') as HTMLCanvasElement, src: 'https://example.com/animation.lottie', autoplay: true, loop: true, }); ``` ### React ```tsx import { DotLottieReact } from '@lottiefiles/dotlottie-react'; function Animation() { return ( <DotLottieReact src="https://example.com/animation.lottie" autoplay loop /> ); } ``` ### React with Instance Control ```tsx import { useRef } from 'react'; import { DotLottieReact } from '@lottiefiles/dotlottie-react'; import type { DotLottie } from '@lottiefiles/dotlottie-web'; function Animation() { const dotLottieRef = useRef<DotLottie | nul...