Question 1

What is ai-animate?

Accepted Answer

ai-animate (@ai-animate/core) is an open-source library of animated UI components built specifically for AI applications. It includes text animations, image reveals, and motion primitives that work in React, Next.js, and Remotion.

Question 2

How do I install ai-animate?

Accepted Answer

Install via npm: npm install @ai-animate/core. Then import components: import { TextType } from "@ai-animate/core"

Question 3

Does ai-animate work with Remotion?

Accepted Answer

Yes. ai-animate components are designed to work in both browser (React, Next.js) and video production (Remotion) environments. Components like ImageReveal, CinematicWord, and TextType are built with video-accurate rendering in mind.

Question 4

What kind of animations does ai-animate include?

Accepted Answer

ai-animate includes typewriter effects, blur text reveals, cinematic word animations, shiny text sweeps, aurora gradient text, scrolling tickers, image reveals, and more. All optimized for AI application interfaces.

Question 5

Is ai-animate free to use?

Accepted Answer

Yes. ai-animate is fully open source under the MIT license. Free to use in personal and commercial projects.

Question 6

What is the npm package name for ai-animate?

Accepted Answer

The npm package is @ai-animate/core. Install it with: npm install @ai-animate/core

Question 7

Does ai-animate work with Next.js?

Accepted Answer

Yes. All @ai-animate/core components are compatible with Next.js App Router and Pages Router. They are client components and work with server-side rendering.

Question 8

What is TextType in ai-animate?

Accepted Answer

TextType is a typewriter animation component from @ai-animate/core. It supports cycling multiple strings, variable typing speed, cursor blinking, reverse mode, and starting on scroll into view.

Question 9

How do I add a streaming text animation in React?

Accepted Answer

Use StreamText from @ai-animate/core: import { StreamText } from "@ai-animate/core" then <StreamText text="Building the future..." mode="char" speed={40} />. It simulates LLM token-by-token streaming output.

Question 10

What is the difference between TextType and StreamText?

Accepted Answer

TextType is a typewriter component that types and deletes cycling strings with a blinking cursor. StreamText simulates real LLM streaming output, revealing characters or words progressively without deletion — ideal for AI chat interfaces.

Question 11

Can I use ai-animate components in Remotion video projects?

Accepted Answer

Yes. Components like CinematicWord, CinematicSplit, TextTicker, ImageReveal, and SceneShell are built with Remotion in mind and support frame-driven animation via a progress prop.

Question 12

How do I add a blur reveal text animation in React?

Accepted Answer

Use BlurText from @ai-animate/core: import { BlurText } from "@ai-animate/core" then <BlurText text="Built for AI workflows." animateBy="words" />. It triggers on scroll into view by default.

Question 13

What peer dependencies does @ai-animate/core require?

Accepted Answer

@ai-animate/core requires React 18 or later and react-dom 18 or later as peer dependencies. The motion library is bundled as a direct dependency.

Animated components for AI apps.

agents-ui

The New Intelligence