Animations
Entrances, text, SVG, and loaders with reduced motion.
The idea is still yours.
Available since Kivora 0.3.0
Import Animation, AnimatedText, AnimatedPath, and AnimatedLoader from @kivora/nextjs. Update the package and keep the existing CSS and KivoraProvider. You do not need to install an additional animation engine: the web package includes Motion.
1npm install @kivora/nextjs@^0.3.0Choose an animation component
Animation wraps content; AnimatedText receives a string; AnimatedPath draws a path; AnimatedLoader represents loading. This family does not include exits, scroll effects, morphing, or Jitter project imports.
Timing, replay, and state
duration, delay, and stagger are in milliseconds. Entrances run on mount and replay when replayKey changes. AnimatedLoader only offers duration for timing: its loop ends when unmounted or motion is disabled.
1"use client";
2
3import { useState } from "react";
4import { Animation, Button, Card, CardContent } from "@kivora/nextjs";
5
6export default function Example() {
7 const [replay, setReplay] = useState(0);
8 return <div style={{ display: "grid", gap: 20 }}>
9 <Animation preset="fade-up" duration={600} delay={0} replayKey={replay}>
10 <Card><CardContent style={{ padding: 24 }}>A gentle entrance</CardContent></Card>
11 </Animation>
12 <Button type="button" variant="outline" onClick={() => setReplay(replay + 1)}>Replay animation</Button>
13 </div>;
14}Reduced motion and accessibility
All four components respect prefers-reduced-motion. disabled shows the final state without motion; a loader keeps its indicator. Do not hide essential information inside an animation.
AnimatedText preserves a complete accessible sentence. Use words for compound emoji and ligatures. AnimatedPath needs label when conveying information, and AnimatedLoader needs a translated label describing the operation.
Web, native, and performance
In React Native, import from @kivora/native; the components use Reanimated. AnimatedPath needs pathLength; AnimatedText uses textStyle. Check each platform’s types before sharing code.
The target is 60 fps, not a guarantee for every device. Opacity and transform can be delegated to the browser; SVG paths can require repainting. Measure your actual screen and do not extrapolate a web benchmark to native devices.
Continue with Button or explore the web component catalog.