Split Text

Animated text that splits into characters or words with customizable animations.

Configuring your account...

Please wait while we prepare everything for you

Usage

import SplitText from '@/components/bynanaui/split-text'

<SplitText
    text="Hello, Amazing Text!"
    className="text-2xl font-semibold"
    delay={100}
    duration={0.6}
    splitType="chars"
/>

Props

PropTypeDefaultDescription
textstring-Text to animate
delaynumber100Animation delay
durationnumber0.6Animation duration
easestring"easeOut"Easing function
splitTypestring"chars"Split by chars or words
fromobject-Starting animation state
toobject-Ending animation state
classNamestring-Additional CSS classes