Text
CinematicSplit
Clapperboard slam reveal with top and bottom halves converging on impact.
Installation
npm install @ai-animate/core
Usage
import { CinematicSplit } from '@ai-animate/core'
<CinematicSplit
text="ACTION"
/>
Props
textstring'ACTION'The text to animate
splitDistancenumber80Distance each half travels from center in px
slamDurationnumber0.4Duration of the slam-together move in seconds
holdMsnumber2000Hold time after slam in ms
loopbooleantrueWhether to loop
impactColorstring'rgba(255,255,255,0.85)'Flash color on impact
fontSizestring'clamp(3rem, 8vw, 7rem)'CSS font-size
colorstring'#ffffff'Text color
fontWeightnumber | string900font-weight
backgroundstring'#000'Background color
letterSpacingstring'0.04em'Letter spacing
classNamestring''className on the text element
wrapperClassNamestring''className on the wrapper
onCycleComplete() => voidundefinedCalled when cycle completes