Morphing Text
A text component that smoothly morphs characters to transition between strings.
Made by imskyleenInstallation
Usage
This component will cut words because it splits letters. We recommend avoiding sentences that are likely to wrap.
API Reference
MorphingText
| Prop | Type | Default |
|---|---|---|
text | string | string[] | - |
initial? | TargetAndTransition | VariantLabels | boolean | { opacity: 0, scale: 0.8, filter: "blur(10px)" } |
animate? | TargetAndTransition | VariantLabels | boolean | { opacity: 1, scale: 1, filter: "blur(0px)" } |
exit? | TargetAndTransition | VariantLabels | boolean | { opacity: 0, scale: 0.8, filter: "blur(10px)" } |
transition? | Transition | { type: 'spring', stiffness: 125, damping: 25, mass: 0.4 } |
loop? | boolean | false |
holdDelay? | number | 2500 |
delay? | number | 0 |
inView? | boolean | false |
inViewMargin? | string | 0px |
inViewOnce? | boolean | true |
...props? | HTMLMotionProps<"span"> | - |