Fade In Text

Fade In Text creates elegant entrance animations for your text! With support for multiple directions, customizable timing, and optional letter-by-letter stagger effects, this component adds sophisticated motion to your typography.

Preview

Code

Fade Directions

Fade in from top

Fade in from bottom

Fade in from left

Fade in from right

Stagger Animation

Each letter appears individually!

Animation Durations

Fast fade (0.3s)

Normal fade (0.6s)

Slow fade (1.2s)

Stylized Examples

🎉 Welcome Animation

✨ Smooth Entrance

🌟 Dramatic Reveal

Interactive Demo

Watch the smooth fade-in effect!

Text smoothly fades in with customizable direction and timing

Installation

First, make sure you have the required dependencies:

npx @rajdevxd/aura-ui add fade-in-text

yarn @rajdevxd/aura-ui add fade-in-text

pnpm dlx @rajdevxd/aura-ui add fade-in-text

bunx --bun @rajdevxd/aura-ui add fade-in-text

Usage

import { FadeInText } from "@/components/ui/fade-in-text"

export function Example() {
  return (
    <FadeInText
      text="Welcome to the page"
      direction="left"
      delay={500}
      duration={1}
    />
  )
}

Props

Prop	Type	Required	Description
`text`	`string`	Yes	The text to animate
`direction`	`"up" \| "down" \| "left" \| "right" \| "none"`	No	Animation direction (default: "up")
`delay`	`number`	No	Delay before animation starts in milliseconds (default: 0)
`duration`	`number`	No	Animation duration in seconds (default: 0.6)
`stagger`	`boolean`	No	Enable letter-by-letter stagger animation (default: false)
`className`	`string`	No	Additional CSS classes

Direction Options

Fade Up

Text fades in from bottom to top.

<FadeInText text="Fade Up" direction="up" />

Fade Down

Text fades in from top to bottom.

<FadeInText text="Fade Down" direction="down" />

Fade Left

Text fades in from right to left.

<FadeInText text="Fade Left" direction="left" />

Fade Right

Text fades in from left to right.

<FadeInText text="Fade Right" direction="right" />

Simple Fade

Text fades in without directional movement.

<FadeInText text="Simple Fade" direction="none" />

Timing Control

Quick Fade

Fast 0.3 second animation.

<FadeInText text="Quick Fade" duration={0.3} />

Normal Fade (Default)

Standard 0.6 second animation.

<FadeInText text="Normal Fade" duration={0.6} />

Slow Fade

Elegant 1.2 second animation.

<FadeInText text="Slow Fade" duration={1.2} />

Stagger Effect

Letter-by-Letter

Each letter appears individually.

<FadeInText
  text="Stagger Effect"
  stagger={true}
  direction="up"
/>

Features

Multiple Directions: 5 directional options
Timing Control: Customizable delay and duration
Stagger Animation: Letter-by-letter reveals
Smooth Transitions: Hardware-accelerated animations
TypeScript Support: Full type safety
Responsive Design: Works on all screen sizes

Advanced Usage

Sequential Animations

<div className="space-y-4">
  <FadeInText
    text="First Line"
    direction="left"
    delay={0}
    duration={0.8}
  />
  <FadeInText
    text="Second Line"
    direction="right"
    delay={500}
    duration={0.8}
  />
  <FadeInText
    text="Third Line"
    direction="up"
    delay={1000}
    duration={0.8}
  />
</div>

Stagger Showcase

<FadeInText
  text="AMAZING STAGGER EFFECT"
  stagger={true}
  direction="up"
  delay={0}
  duration={0.8}
  className="text-2xl font-bold"
/>

Interactive Timing

const InteractiveFade = () => {
  const [direction, setDirection] = React.useState('up')

  return (
    <div className="space-y-4">
      <div className="flex space-x-2">
        <button onClick={() => setDirection('up')}>Up</button>
        <button onClick={() => setDirection('down')}>Down</button>
        <button onClick={() => setDirection('left')}>Left</button>
        <button onClick={() => setDirection('right')}>Right</button>
      </div>

      <FadeInText
        text="Interactive Fade"
        direction={direction}
        delay={300}
        duration={1}
        className="text-xl font-semibold"
      />
    </div>
  )
}

Hero Section Animation

<div className="text-center space-y-6">
  <FadeInText
    text="Welcome"
    direction="down"
    delay={0}
    duration={1}
    className="text-6xl font-bold"
  />
  <FadeInText
    text="to the future"
    direction="up"
    delay={500}
    duration={1}
    className="text-3xl text-muted-foreground"
  />
  <FadeInText
    text="of web design"
    direction="left"
    delay={1000}
    duration={1}
    className="text-xl"
  />
</div>

Performance

GPU Accelerated: Uses CSS transforms for smooth animations
Efficient Rendering: Minimal DOM manipulation
Hardware Acceleration: CSS transition animations
Memory Efficient: Lightweight animation system

Browser Support

Modern Browsers: Full support for Chrome, Firefox, Safari, Edge
CSS Transforms: Requires CSS transform support
Fallback: Graceful degradation to static text

Accessibility

Screen Reader Support: Proper text content for assistive technologies
Reduced Motion: Respects user's motion preferences
Keyboard Navigation: Full keyboard accessibility

Fade In Text - adding elegant motion to your content! 🌟✨

Aura UI