Version: latest

Universell einsetzbar

Animated funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/animated) — die Library erkennt die Umgebung automatisch.

Animated

Die Animated-Komponente wraps any React child and applies a CSS entrance animation. Animation direction, delay, and duration are controlled via props and design tokens.

Übersicht

import { Animated } from "@prokodo/ui/animated"
;<Animated direction="up">
  <p>This content fades in from below.</p>
</Animated>

Live PreviewOpen in Storybook ↗

Import

import { Animated } from "@prokodo/ui/animated"

CSS:

import "@prokodo/ui/animated.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`children`	`ReactNode`	—	✅	Content to animate.
`animation`	`"bottom-top" \| "top-bottom" \| "left-right" \| "right-left"`	`"bottom-top"`	—	Einblend-Animationsrichtung.
`speed`	`"fast" \| "slow"`	—	—	Animations-Geschwindigkeits-Preset.
`disabled`	`boolean`	`false`	—	Animation komplett deaktivieren.
`threshold`	`number`	—	—	IntersectionObserver-Sichtbarkeitsschwelle (0–1).
`intersectionObserverOptions`	`IntersectionObserverInit`	—	—	Vollständige IntersectionObserver-Optionen.
`className`	`string`	—	—	CSS-Klasse am Root-Element.
`onAnimate`	`() => void`	—	—	Wird ausgelöst wenn Animation startet.

Siehe src/components/animated/Animated.model.ts für den vollständigen AnimatedProps-Typ.

Design-Tokens

Animated definiert und konsumiert keine CSS Custom Properties. Animationstiming und Transformationsverhalten werden ausschließlich über BEM-Modifier-Klassen (--has-fast-speed, --has-slow-speed) gesteuert, nicht über Tokens.

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: 2 jest-axe-Assertion(s) in 5 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Animated in Storybook öffnen

Quellcode

src/components/animated/Animated.model.ts