ai-animate

Text

CinematicWord

Single-word cinematic zoom reveal that scales down and fades from blur into focus. Ideal for dramatic intros, product titles, and chapter reveals.

Installation

npm install @ai-animate/core

Usage

import { CinematicWord } from '@ai-animate/core'


<CinematicWord

text="Introducing"

duration={2}

loop

/>

Props

textstringThe word or short phrase to reveal (required)
durationnumber2Total duration of one in → hold → out cycle in seconds
pauseDurationnumber800Pause at full visibility in milliseconds
loopbooleantrueWhether to loop continuously
classNamestring''className for the text element
wrapperClassNamestring''className on the outer wrapper
wrapperStyleReact.CSSPropertiesundefinedInline style on the outer wrapper
onCycleComplete() => voidundefinedCalled when one cycle completes
progressnumberundefinedExternal progress control (0→1) for Remotion