Laufzeit
Lottie ist client-only und läuft immer im Browser.
Lottie
Lottie rendert dotLottie-Animationen performant via @lottiefiles/dotlottie-react. Die Animation wird erst geladen, wenn der Container in den Viewport scrollt (IntersectionObserver), um Ressourcen zu schonen.
Übersicht
import { Lottie } from "@prokodo/ui/lottie"
;<Lottie animation="/animations/hero.lottie" loop autoplay />
Live PreviewOpen in Storybook ↗
Import
import { Lottie } from "@prokodo/ui/lottie"
Verfügbare Animationen
Alle vordefinierten Animations-URLs werden aus LottieAnimations.ts als ANIMATIONS-Map exportiert:
import { ANIMATIONS } from "@prokodo/ui/lottie/LottieAnimations"
;<Lottie animation={ANIMATIONS.SolutionCloud} />
Props
| Prop | Typ | Standard | Pflicht | Beschreibung |
|---|---|---|---|---|
animation | string | — | ✅ | URL oder Pfad zur .lottie- / .json-Animationsdatei. |
loop | boolean | true | — | Animation endlos wiederholen. |
autoplay | boolean | true | — | Automatisch beim Mount starten. |
className | string | — | — | CSS-Klasse am inneren Lottie-Canvas-Element. |
containerClassName | string | — | — | CSS-Klasse am äußeren Container-<div>. |
Weitere Props aus
DotLottieReactProps(z. B.speed,playOnHover) werden an den Player weitergegeben. Siehesrc/components/lottie/Lottie.model.tsfür den vollständigen Typ.
WCAG-2.2-Status
| Kriterium | Bezeichnung | Status | Hinweis |
|---|---|---|---|
| 1.1.1 | Nicht-Text-Inhalt (A) | 🔍 Manuell prüfen | Alle Bilder, Icons und Medien benötigen eine Textalternative (alt, aria-label oder aria-labelledby). Rein dekorative Elemente müssen aria-hidden tragen. |
| 2.2.2 | Pausieren, Beenden, Ausblenden (A) | 🔍 Manuell prüfen | Animationen oder automatisch rotierende Inhalte, die länger als 5 s laufen, müssen einen Pause-/Stopp-Schalter bieten. |
| 2.3.1 | Dreimaliges Blitzen oder unterhalb des Grenzwerts (A) | 🔍 Manuell prüfen | Animierte Inhalte dürfen nicht mehr als 3-mal pro Sekunde flackern. |
| 4.1.2 | Name, Rolle, Wert (A) | 🔍 Manuell prüfen | Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein. |
Testabdeckung: 1 jest-axe-Assertion(s) in 1 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.