Animations

Animations for focused interface motion

Browse small Motion wrappers that live under `@zentauri-ui/zentauri-components/animations/*`. They are separate from UI components so motion can be adopted one preset at a time.

Browse motion presets

Open an animation for minimal previews and a copy-paste import.

Animations (41)

What it does

Provides small Motion wrappers for common entrance, slide, reveal, text, rotate, and exit transitions.

Each entry exports a component and its preset object.

Animation entries

  • Fade page sections and cards into view.
  • Add directional entrance motion to menus, panels, and list items.
  • Use scale, pop, slide, reveal, text, rotate, and blur transitions for overlays or featured content.
  • Keep animation imports separate from static component imports.

Composition and API

Wrap content with the animation component and pass regular Motion div props such as `transition`, `initial`, `animate`, `exit`, and `className`.

Next.js integration notes

Use animation entries inside client components or client boundaries in the App Router.

FAQ

Do animations require Framer Motion?

Yes. Install `framer-motion` before importing any `@zentauri-ui/zentauri-components/animations/*` entry.

Are these UI components?

No. They are Motion wrappers and presets published under the separate `animations/*` category.