Text Effect Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations. Examples Text Effect per character Preview Code Animate your ideas with motion-primitives Animate your ideas with motion-primitives Text Effect per word Preview Code Animate your ideas with motion-primitives Animate your ideas with motion-primitives Text Effect with preset Preview Code Animate your ideas with motion-primitives Animate your ideas with motion-primitives Text Effect with custom variants Preview Code Animate your ideas with motion-primitives Animate your ideas with motion-primitives Text Effect with custom delay Preview Code Animate your ideas Animate your ideas with motion-primitives with motion-primitives (and delay!) (and delay!) Text Effect per line Preview Code now live on motion-primitives! now live on motion-primitives! now live on motion-primitives! Text Effect with exit animation Preview Code Text Effect with speed You can control the speed of the animation by using the speedReveal and speedSegment props. Preview Code Animate your ideas with motion-primitives. Animate your ideas with motion-primitives. Installation CLI Manual motion-primitives shadcn npx motion-primitives@latest add text-effect Component API TextEffect Prop Type Default Description children string The text content to be animated. per 'word' | 'char' | 'line' 'word' Defines whether animation applies per word, character, or line. as keyof JSX.IntrinsicElements 'p' The HTML tag to render, defaults to paragraph. variants { container?: Variants; item?: Variants; } undefined Custom variants for container and item animations. className string undefined Optional CSS class for styling the component. preset 'blur-sm' | 'fade-in-blur' | 'scale' | 'fade' | 'slide' 'fade' Preset animations to apply to the text. delay number 0 Delay before the animation starts. trigger boolean true Controls whether the animation should be triggered. onAnimationComplete () => void undefined Callback function when the animation completes. onAnimationStart () => void undefined Callback function when the animation starts. segmentWrapperClassName string undefined Optional CSS class for styling segment wrappers. style CSSProperties undefined Optional inline styles for the component. containerTransition Transition undefined Optional transition for the container. segmentTransition Transition undefined Optional transition for the segments. speedReveal number 1 Controls the speed of the reveal animation. speedSegment number 1 Controls the speed of the animation.