@ai-animate/core

Animated text, media, and UI components for React, Next.js, and Remotion. Built for AI products — streaming output, thinking states, cinematic reveals, and more.

Installation

npm install @ai-animate/core

Usage

import { TextType, BlurText, StreamText, ThinkingText } from '@ai-animate/core'

// Typewriter cycling strings
<TextType text={["Generating...", "Searching...", "Done."]} loop />

// Blur-reveal on scroll
<BlurText text="Built for AI workflows." animateBy="words" />

// Simulate LLM token streaming
<StreamText text="The answer is..." mode="char" speed={40} />

// AI thinking indicator
<ThinkingText phrases={["Thinking", "Processing", "Almost there"]} />

Components

Text Animations

| Component | Description | |-----------|-------------| | TextType | Typewriter animation with cycling strings and cursor | | BlurText | Scroll-triggered word or letter reveal with blur + slide | | ShinyText | GPU-driven shine sweep across text | | MorphText | Cross-fade morph between strings with blur | | GlitchText | RGB channel split with random flicker and glitch bursts | | GradientCycleText | Rotating gradient that sweeps through colours | | NeonText | Flickering neon sign with layered glow | | AuroraText | Aurora gradient orbs behind display text | | WaveText | Characters bob in a continuous sine wave | | BurstText | Word-by-word explosive burst entrance | | WipeText | Clip-path wipe reveal with directional sweep | | RollText | Word-by-word 3D barrel roll entrance | | AscendText | Words rise upward while fading in | | FadeText | Pure opacity fade — ultra clean word revelation | | FocusText | Words sharpen as blur fades — cinematic focus pull | | SplitText | Words reveal as curtains slide open from centre | | PopText | Words pop in with spring overshoot | | PanText | Words slide in horizontally like a camera pan | | RiseText | Words float up gently with fade | | RevealText | Solid bar slides away for magazine-style reveal | | StampText | Text slams in from large scale with percussive impact | | DroppingText | Inline word-cycling with departures-board slide-up | | RotateText | 3D rotating cylinder of repeating text strips | | BreatheText | Variable-font weight breathing animation | | CursorText | Typewriter with realistic variable-speed typing | | CountUp | Number animates smoothly with easing and formatting | | PulseText | Gentle heartbeat-style double-pulse scaling | | KaraokeText | Word-by-word highlight sync for lyrics and transcripts | | KineticText | Poster-style layout with words at varying sizes | | ScrollVelocity | Marquee that speeds up based on scroll velocity | | StreamText | LLM token-by-token streaming output simulation | | ThinkingText | AI thinking indicator with animated dot progression |

Cinematic Text

| Component | Description | |-----------|-------------| | CinematicWord | Zoom-in / zoom-out cinematic word reveal | | CinematicSplit | Clapperboard slam reveal with top and bottom halves | | CinematicReveal | Projector-beam sweep that reveals text | | CinematicDrift | Prestige TV slow push reveal with subtle drift | | CinematicGlare | Lens-flare streak that blooms across text | | CinematicLetterbox | Cinema widescreen framing reveal with black bars | | CinematicQuote | Prestige documentary pull-quote reveal |

Video / Broadcast

| Component | Description | |-----------|-------------| | SceneTitle | Two-line chapter card with overline wipe and title rise | | ChapterMarker | Documentary chapter transition with line draw | | CountdownTimer | Cinematic slam countdown with impact flash | | AudioWaveform | Animated waveform that reacts to audio level | | SpeakerCaption | Subtitle bar with speaker badge and word sync | | SubtitleBurn | Netflix-style subtitle burn-in with hard cuts | | LowerThird | Broadcast TV lower-third name card | | VideoTimestamp | Live timecode display in HH:MM:SS:FF format | | TargetCursor | Crosshair cursor that locks onto target elements | | TextTicker | Scroll-velocity marquee for single or multiple rows |

Cards

| Component | Description | |-----------|-------------| | ScrollStack | Cards that stack like a deck, revealing on scroll |

Media

| Component | Description | |-----------|-------------| | ImageReveal | Cinematic image + text reveal with slide animation |

Scene

| Component | Description | |-----------|-------------| | SceneShell | Outermost wrapper for video scenes with theme system |

Requirements

• React 18 or later
• Works with Next.js, Vite, Remix, and Remotion

Links

• Documentation
• Component showcase
• GitHub

License

MIT