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

Text Animate

Different varieties of animations for text.

Classic Hero Fade-Up

We build the future

import { TextAnimate } from "@/registry/ebonui/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

Open in

DISRUPT OR DIE

import { TextAnimate } from "@/registry/ebonui/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

Open in

HOVER ME

import { TextAnimate } from "@/registry/ebonui/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

Open in

CyperPunk 2077

import { TextAnimate } from "@/registry/ebonui/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

Open in

Future is Now

import { TextAnimate } from "@/registry/ebonui/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

Open in

Blinking Cursor

import { TextAnimate } from "@/registry/ebonui/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

Open in

MELTING

import { TextAnimate } from "@/registry/ebonui/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

Open in

Neon Glow

import { TextAnimate } from "@/registry/ebonui/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

Open in

Launching Soon

"use client"

import { TextAnimate } from "@/registry/ebonui/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

Prop	Type	Default	Description
`children`	`string`	`-`	The text content to animate
`className`	`string`	`-`	The class name to be applied to the component
`delay`	`number`	`0`	Delay before animation starts
`duration`	`number`	`0.3`	Duration of the animation
`variants`	`Variants`	`-`	Custom motion variants for the animation
`as`	`ElementType`	`"p"`	The element type to render
`by`	`"text" \| "word" \| "character" \| "line"`	`"word"`	How to split the text ("text", "word", "character")
`startOnView`	`boolean`	`true`	Whether to start animation when component enters viewport
`once`	`boolean`	`false`	Whether to animate only once
`animation`	`AnimationVariant`	`"fadeIn"`	The animation preset to use

Terminal Text Reveal

On This Page

Classic Hero Fade-Up Installation Examples Brutalist Blur-In Magnetic 3D Hover Cyberpunk Glitch Title Holographic Gradient Shine Terminal Typewriter Liquid Melt Text Neon Wave Pulse Scale-In Explosive Reveal Usage Props

Contribute

Text Animate

Different varieties of animations for text.

Classic Hero Fade-Up

Open in

We build the future

import { TextAnimate } from "@/registry/ebonui/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

Open in

DISRUPT OR DIE

import { TextAnimate } from "@/registry/ebonui/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

Open in

HOVER ME

import { TextAnimate } from "@/registry/ebonui/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

Open in

CyperPunk 2077

import { TextAnimate } from "@/registry/ebonui/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

Open in

Future is Now

import { TextAnimate } from "@/registry/ebonui/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

Open in

Blinking Cursor

import { TextAnimate } from "@/registry/ebonui/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

Open in

MELTING

import { TextAnimate } from "@/registry/ebonui/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

Open in

Neon Glow

import { TextAnimate } from "@/registry/ebonui/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

Open in

Launching Soon

"use client"

import { TextAnimate } from "@/registry/ebonui/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

Prop	Type	Default	Description
`children`	`string`	`-`	The text content to animate
`className`	`string`	`-`	The class name to be applied to the component
`delay`	`number`	`0`	Delay before animation starts
`duration`	`number`	`0.3`	Duration of the animation
`variants`	`Variants`	`-`	Custom motion variants for the animation
`as`	`ElementType`	`"p"`	The element type to render
`by`	`"text" \| "word" \| "character" \| "line"`	`"word"`	How to split the text ("text", "word", "character")
`startOnView`	`boolean`	`true`	Whether to start animation when component enters viewport
`once`	`boolean`	`false`	Whether to animate only once
`animation`	`AnimationVariant`	`"fadeIn"`	The animation preset to use

Terminal Text Reveal

On This Page

Contribute