# Animation

Gentle entrances for cards and any content.

## How to use it

Choose fade, fade-up, fade-down, or scale. duration and delay are in milliseconds. The entrance runs on mount; change replayKey to replay it. Styles apply to the outer wrapper and motion to the inner wrapper.

disabled and the reduced-motion preference show the final state. This API covers entrances, not exits or scroll-driven animations.

## Import


```tsx
import { Animation } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
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>;
}
```


## Entrance presets

```tsx
<div style={{ display: "grid", gap: 16 }}>{(["fade", "fade-up", "fade-down", "scale"] as const).map(preset => <Animation key={preset} preset={preset} duration={800}><Badge variant="secondary">{preset}</Badge></Animation>)}</div>
```


## Without motion

```tsx
<Animation disabled><Card><CardContent style={{ padding: 24 }}>Visible content without motion</CardContent></Card></Animation>
```


## API: Animation


```typescript
declare function Animation({ preset, duration, delay, replayKey, disabled, children, ...props }: AnimationProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| delay | number | No | Delay before the entrance, in milliseconds. |
| disabled | boolean | No | Disable control interaction or animation motion. |
| duration | number | No | Animation duration in milliseconds. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| preset | "fade" \| "fade-up" \| "fade-down" \| "scale" | No | Entrance effect: fade, fade-up, fade-down, or scale. |
| replayKey | string \| number | No | Change this value to replay the entrance animation. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

Source: https://www.kivora.pro/docs/componentes/animation