Animated works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/animated) — the library detects the runtime automatically.
Animated
The Animated component wraps any React child and applies a CSS entrance animation. Animation direction, delay, and duration are controlled via props and design tokens.
Overview
import { Animated } from "@prokodo/ui/animated"
;<Animated direction="up">
<p>This content fades in from below.</p>
</Animated>
Import
import { Animated } from "@prokodo/ui/animated"
CSS:
import "@prokodo/ui/animated.css"
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
children | ReactNode | — | ✅ | Content to animate. |
animation | "bottom-top" | "top-bottom" | "left-right" | "right-left" | "bottom-top" | — | Entrance animation direction. |
speed | "fast" | "slow" | — | — | Animation speed preset. |
disabled | boolean | false | — | Disable the animation entirely. |
threshold | number | — | — | IntersectionObserver visibility threshold (0–1). |
intersectionObserverOptions | IntersectionObserverInit | — | — | Full IntersectionObserver options override. |
className | string | — | — | CSS class on root element. |
onAnimate | () => void | — | — | Called when the animation triggers. |
See
src/components/animated/Animated.model.tsfor the fullAnimatedPropstype.
Design Tokens
Animated does not define or consume CSS custom properties. Animation timing and transform behaviour are controlled entirely via BEM modifier classes (--has-fast-speed, --has-slow-speed) rather than tokens.
WCAG 2.2 Status
| Criterion | Name | Status | Note |
|---|---|---|---|
| 1.1.1 | Non-text Content (A) | 🔍 Manual review | All images, icons, and media require a text alternative (alt, aria-label, or aria-labelledby). Decorative-only elements must carry aria-hidden. |
| 2.2.2 | Pause, Stop, Hide (A) | 🔍 Manual review | Animations or auto-rotating content lasting more than 5 s must provide a pause/stop control. |
| 2.3.1 | Three Flashes or Below Threshold (A) | 🔍 Manual review | Animated content must not flash more than 3 times per second. |
| 4.1.2 | Name, Role, Value (A) | 🔍 Manual review | Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA. |
Test coverage: 2 jest-axe assertion(s) across 5 test file(s) · 0 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.