# Animations

Entrances, text, SVG, and loaders with reduced motion.

## 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.


```bash
npm install @kivora/nextjs@^0.3.0
```


## Choose 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.

- [Animation](https://www.kivora.pro/docs/componentes/animation)

- [AnimatedText](https://www.kivora.pro/docs/componentes/animated-text)

- [AnimatedPath](https://www.kivora.pro/docs/componentes/animated-path)

- [AnimatedLoader](https://www.kivora.pro/docs/componentes/animated-loader)

## 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.


```tsx
"use client";

import { useState } from "react";
import { Animation, Button, Card, CardContent } from "@kivora/nextjs";

export default function Example() {
  const [replay, setReplay] = useState(0);
  return <div style={{ display: "grid", gap: 20 }}>
    <Animation preset="fade-up" duration={600} delay={0} replayKey={replay}>
      <Card><CardContent style={{ padding: 24 }}>A gentle entrance</CardContent></Card>
    </Animation>
    <Button type="button" variant="outline" onClick={() => setReplay(replay + 1)}>Replay animation</Button>
  </div>;
}
```


## 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.

- [Official animation documentation](https://github.com/kivora-ui/module/blob/main/docs/animations.md)

Source: https://www.kivora.pro/docs/animaciones