Beispiel: Animation aus public/animations/space-404.json (gleiche Quelle wie die 404-Seite).
PlayerLottie
Lottie Animation Player
Lädt das Web-Component per CDN (unpkg), falls es noch nicht registriert ist. Verwende eine öffentliche JSON-URL unter public/ (z. B. /animations/space-404.json). Für sichtbare Höhe: height auf einen festen Wert (z. B. 280px) oder height auto mit Tailwind w-full h-auto am Container wie auf der 404-Seite.
Codebeispiel
<PlayerLottiesrc="/animations/space-404.json"background="transparent"speed={1}loop={true}autoplay={true}width="100%"height="auto"className="w-full h-auto max-w-sm mx-auto"/>Parameter
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| src | string | URL zur Lottie-JSON-Datei (z. B. unter public/) | - |
| background | string | Hintergrundfarbe/Stil | "transparent" |
| speed | number | Wiedergabegeschwindigkeit | 1 |
| loop | boolean | Endlosschleife | true |
| autoplay | boolean | Automatischer Start | true |
| width | string | CSS-Breite | "100%" |
| height | string | CSS-Höhe (100% braucht Eltern mit Höhe) | "100%" |
| className | string | Zusätzliche CSS-Klassen | '' |