✨ If you like Ebon UI, please give us a star on GitHub.
1
3
Block

Text Animate

PreviousNext

Different varieties of animations for text.

Classic Hero Fade-Up

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

export function TextAnimateDemo() {
  return (
    <TextAnimate
      text="We build the future"
      preset="fadeUp"
      className="text-5xl font-bold tracking-tighter md:text-7xl"
    />
  )
}

Installation

pnpm dlx shadcn@latest add https://ebonui.com/r/text-animate.json

Examples

Brutalist Blur-In

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

export function TextAnimateDemo2() {
  return (
    <TextAnimate
      text="DISRUPT OR DIE"
      preset="blurInUp"
      className="text-6xl leading-none font-bold uppercase md:text-[100px]"
      stagger={0.08}
    />
  )
}

Magnetic 3D Hover

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

export function TextAnimateDemo3() {
  return (
    <TextAnimate
      text="HOVER ME"
      preset="magneticHover"
      hoverEffect
      mouseDistort
      className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-6xl font-bold text-transparent"
    />
  )
}

Cyberpunk Glitch Title

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

export function TextAnimateDemo4() {
  return (
    <TextAnimate
      text="CyperPunk 2077"
      preset="glitch"
      className="text-6xl font-bold tracking-wider uppercase"
      segmentClassName="drop-shadow-[0_0_20px_rgba(122, 14, 230, 0.8)]"
    />
  )
}

Holographic Gradient Shine

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

export function TextAnimateDemo5() {
  return (
    <TextAnimate
      text="Future is Now"
      preset="holographic"
      className="bg-gradient-to-r from-cyan-400 via-pink-500 via-purple-500 to-yellow-400 bg-clip-text text-6xl font-bold text-transparent md:text-7xl"
    />
  )
}

Terminal Typewriter

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

export function TextAnimateDemo6() {
  return (
    <TextAnimate
      text="Blinking Cursor"
      preset="typewriter"
      className="inline-block rounded-lg bg-black/80 px-8 py-4 font-mono text-4xl text-green-400 md:text-6xl"
    />
  )
}

Liquid Melt Text

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

export function TextAnimateDemo7() {
  return (
    <TextAnimate
      text="MELTING"
      preset="liquid"
      className="text-7xl font-bold text-white drop-shadow-2xl"
      stagger={0.12}
    />
  )
}

Neon Wave Pulse

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

export function TextAnimateDemo8() {
  return (
    <TextAnimate
      text="Neon Glow"
      preset="neonWave"
      className="text-6xl font-bold text-purple-500 md:text-7xl"
      segmentClassName="animate-[pulse_1.5s_ease-in-out_infinite]"
      stagger={0.1}
    />
  )
}

Scale-In Explosive Reveal

"use client"

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

export function TextAnimateDemo9() {
  return (
    <TextAnimate
      text="Launching Soon"
      preset="scaleIn"
      className="inline-block rounded-2xl bg-purple-600 px-12 py-6 text-5xl font-bold text-white md:text-7xl"
    />
  )
}

Usage

import { TextAnimate } from "@/components/ui/text-animate"
<TextAnimate
  text="We build the future"
  preset="fadeUp"
  className="text-5xl font-bold tracking-tighter md:text-7xl"
/>

Props

PropTypeDefaultDescription
childrenstring-The text content to animate
classNamestring-The class name to be applied to the component
delaynumber0Delay before animation starts
durationnumber0.3Duration of the animation
variantsVariants-Custom motion variants for the animation
asElementType"p"The element type to render
by"text" | "word" | "character" | "line""word"How to split the text ("text", "word", "character")
startOnViewbooleantrueWhether to start animation when component enters viewport
oncebooleanfalseWhether to animate only once
animationAnimationVariant"fadeIn"The animation preset to use