heroatomix/ui
Documentation
Components
Animated-text

Animated Text

A text animation component that shows a macOS dock hover effect.

Mihir (OPM)

Written by Mihir (OPM)

ShadeByte

The AnimatedText component provides a beautiful text animation that reveals words one by one with a staggered motion effect. Perfect for hero sections, headings, and attention-grabbing text elements.

Installation

Examples

ShadeByte

Props

PropTypeDescriptionDefault
textstringThe text content to animate-
delaynumberDelay between each word animation (in seconds)0.15
classNamestringAdditional CSS classes-

Basic Usage

import { AnimatedText } from "@/components/atomixui/animated-text"
 
export default function Example() {
  return (
    <AnimatedText text="Atomix" />
  )
}