ai-animate

Text

WipeText

Word-by-word clip-path wipe reveal with directional sweep animation.

Installation

npm install @ai-animate/core

Usage

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


<WipeText

text="Intelligence in every word"

/>

Props

textstring'Intelligence in every word'The sentence to reveal word by word
direction'left' | 'right' | 'up' | 'down''left'Direction the wipe mask opens from
staggernumber0.08Delay between each word's wipe start in seconds
durationnumber0.6Duration of each word's wipe in seconds
holdMsnumber1800When looping, hold time before replaying in ms
fontSizestring'clamp(1.8rem, 4vw, 3.5rem)'CSS font-size
colorstring'#ffffff'Text color
fontWeightnumber | string700font-weight
loopbooleanfalseIf true, replays after holdMs
classNamestring''className on the outer container