Docs/Text Animate

Text Animate

A premium text animation component with multiple presets including blur, fade, slide, and scale effects.

Installation

$pnpm dlx shadcn@latest add @componentry/text-animate

Usage

API Reference

PropTypeDefault
childrenThe text content to animate.
string—
animationfadeIn, blurIn, blurInUp, blurInDown, slideUp, slideDown, slideLeft, slideRight, scaleUp, scaleDown
union—
byHow to split the text.
text | word | characterword
startOnViewWhether to start animation when element enters viewport.
booleantrue
onceWhether to run animation only once.
booleantrue
durationDuration of the animation per segment in seconds.
number0.3
delayDelay before starting the animation in seconds.
number0

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv

Blur In Up

import { TextAnimate } from "@/components/ui/text-animate"

export function TextAnimateDemo() {
  return (
    <TextAnimate animation="blurInUp" by="character">
      Blur In Up
    </TextAnimate>
  )
}