Text
CinematicLetterbox
Cinema widescreen framing reveal with black bars sliding in from top and bottom.
Installation
npm install @ai-animate/core
Usage
import { CinematicLetterbox } from '@ai-animate/core'
<CinematicLetterbox
text="A New Era Begins"
/>
Props
textstring'A New Era Begins'The main text to display
subtitlestringundefinedOptional subtitle below the main text
barHeightstring'20%'Height of each bar as CSS value
barColorstring'#000000'Bar color
durationnumber1.0Duration of bar slide in seconds
pauseDurationnumber2200Hold time in ms
loopbooleantrueWhether to loop
fontSizestring'clamp(1.8rem, 4vw, 3.2rem)'CSS font-size for main text
subtitleSizestring'clamp(0.7rem, 1.5vw, 1rem)'CSS font-size for subtitle
colorstring'#ffffff'Text color
backgroundstring'#0a0a0a'Background color
fontWeightnumber | string300font-weight
onCycleComplete() => voidundefinedCalled when cycle completes