Text Animate

Your not ready For reframe/ui premium components

Installation

@/components/reframe-ui/text-animate.tsx

Name	Type	Default	Required	Description
children	string	-	Yes	The full text to animate.
per	'word' \| 'char' \| 'line'	word	No	How to segment the text for animation.
as	keyof React.JSX.IntrinsicElements	p	No	HTML tag to render as.
variants	{ container?: Variants; item?: Variants }	-	No	Override Motion variants for the container and each segment.
className	string	-	No	Class name for the container element.
preset	'blur' \| 'fade-in-blur' \| 'scale' \| 'fade' \| 'slide'	fade	No	Built-in animation presets for the segments.
delay	number	-	No	Delay (seconds) before child animations begin.
speedReveal	number	1	No	Multiplier controlling stagger speed across segments (higher = faster).
speedSegment	number	1	No	Multiplier controlling per-segment animation duration (higher = faster).
trigger	boolean		No	Whether the animation is active (renders with AnimatePresence).
onAnimationComplete	() => void	-	No	Called when the animation completes.
onAnimationStart	() => void	-	No	Called when the animation starts.
segmentWrapperClassName	string	-	No	Optional extra class applied to each segment wrapper.
containerTransition	Transition	-	No	Transition override merged into the container variants.
segmentTransition	Transition	-	No	Transition override merged into each segment’s variants.
style	React.CSSProperties	-	No	Inline styles for the container element.