Media
ImageReveal
Cinematic image and text reveal with image sliding from bottom-right and text from right.
Installation
npm install @ai-animate/core
Usage
import { ImageReveal } from '@ai-animate/core'
<ImageReveal imageSrc="/screenshot.png" lines={[{ text: 'The most ', highlight: 'expressive' }]} />
Props
imageSrcstring—Path or URL to the image (required)
imageAltstring''Alt text for the image
linesImageRevealLine[]—Text lines to reveal. Each line can have an optional highlight segment. (required)
highlightColorstring#f97316Color of highlighted text
imageWidthnumber480Width of the image in px
revealDurationnumber900Duration of the reveal-in animation in ms
holdDurationnumber2200How long to hold the fully revealed state in ms
exitDurationnumber580Duration of the fade-out animation in ms
loopbooleantrueWhether to loop the animation
onCycleComplete() => voidundefinedCalled when one full cycle completes