ai-animate

Text

CinematicDrift

Prestige TV slow push reveal with subtle text drift and fade animation.

Installation

npm install @ai-animate/core

Usage

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


<CinematicDrift

text="The silence before"

/>

Props

textstring'The silence before'The text to animate
driftDistancenumber24How far the text drifts in px
direction'left' | 'right' | 'up' | 'down''left'Drift direction
durationnumber3.0Duration of fade-in drift in seconds
holdMsnumber3000Hold time at full opacity in ms
exitDurationnumber2.5Duration of fade-out drift in seconds
loopbooleantrueWhether to loop
fontSizestring'clamp(1.8rem, 4vw, 3.5rem)'CSS font-size
colorstring'#ffffff'Text color
grainbooleantrueAdd a subtle film-grain texture overlay
onCycleComplete() => voidundefinedCalled when cycle completes