Skip to main content

​
Installation

    ​
    Usage

    showLineNumbers
    import { TextAnimate } from "@/components/ui/text-animate"
    showLineNumbers
    <TextAnimate animation="fadeIn">
  Beautiful animated text
</TextAnimate>

    ​
    Props

    PropTypeDefaultDescription
    childrenstring-The text content to animate (required).
    classNamestring-Additional class names for the component.
    segmentClassNamestring-Class names applied to each animated segment.
    delaynumber0Delay before animation starts in seconds.
    durationnumber0.3Duration of the animation in seconds.
    variantsVariants-Custom motion variants for advanced customization.
    asElementType"p"The HTML element type to render.
    by"text" | "word" | "character" | "line""word"How to split the text for animation.
    startOnViewbooleantrueWhether to start animation when entering viewport.
    oncebooleanfalseWhether to animate only once.
    animation"fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown""fadeIn"The animation preset to use.
    accessiblebooleantrueWhether to enable accessibility features.
    …restMotionProps-All motion props are supported.

    ​
    Animation Presets

    The component includes 10 built-in animation presets:
    • fadeIn - Fade in with slight upward movement
    • blurIn - Blur in effect
    • blurInUp - Blur in with upward movement
    • blurInDown - Blur in with downward movement
    • slideUp - Slide up from below
    • slideDown - Slide down from above
    • slideLeft - Slide in from right
    • slideRight - Slide in from left
    • scaleUp - Scale up from small
    • scaleDown - Scale down from large

    ​
    Examples

    ​
    Animate by Character

    showLineNumbers
    <TextAnimate by="character" animation="slideUp">
  Character animation
</TextAnimate>

    ​
    Blur Effect

    showLineNumbers
    <TextAnimate animation="blurInUp" duration={0.5}>
  Blur in from below
</TextAnimate>

    ​
    Custom Element Type

    showLineNumbers
    <TextAnimate as="h1" animation="scaleUp" className="text-4xl font-bold">
  Animated Heading
</TextAnimate>

    ​
    Animate by Line

    showLineNumbers
    <TextAnimate by="line" animation="slideRight">
  First line{"\n"}
  Second line{"\n"}
  Third line
</TextAnimate>

    ​
    With Custom Variants

    showLineNumbers
    <TextAnimate
  variants={{
    hidden: { opacity: 0, rotate: -45 },
    show: { opacity: 1, rotate: 0 },
  }}
  duration={1}
>
  Custom animation
</TextAnimate>

    Build docs developers (and LLMs) love

    Get started for freeTalk to us