Text Effects

A collection of stunning animated text effects that bring your content to life. From typewriter effects to gradient animations, these components provide engaging ways to display text with smooth animations and modern design patterns.

Features

• Multiple Effects: Typewriter, gradient, floating, glitch, and wave
• Smooth Animations: Fluid transitions with Motion
• Customizable: Easy to modify colors, timing, and effects
• Accessible: Proper ARIA labels and screen reader support
• Responsive: Works perfectly on all screen sizes
• Performance Optimized: Efficient animations with hardware acceleration

Installation

npm install motion/react

Basic Usage

import { AnimatedText } from "@/components/text";

function MyComponent() {
  return <AnimatedText text="Hello, World!" variant="typewriter" />;
}

Props

Examples

Typewriter Effect

<AnimatedText
  text="Welcome to our amazing website!"
  variant="typewriter"
  speed={50}
/>

Gradient Text

<AnimatedText
  text="Beautiful gradient text"
  variant="gradient"
  className="text-4xl font-bold"
/>

Floating Effect

<AnimatedText text="Text that reveals itself" variant="floating" speed={200} />

Glitch Effect

<AnimatedText
  text="Bouncy text animation"
  variant="glitch"
  className="text-2xl"
/>

Customization

Custom Colors

<AnimatedText
  text="Custom colored text"
  effect="gradient"
  className="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-3xl font-bold text-transparent"
/>

Different Speeds

<div className="space-y-4">
  <AnimatedText text="Fast animation" variant="typewriter" speed={30} />

  <AnimatedText text="Slow animation" variant="typewriter" speed={200} />
</div>

With Callbacks

<AnimatedText text="Animation with callback" variant="typewriter" />

Advanced Usage

Multiple Effects

function MultipleEffects() {
  return (
    <div className="space-y-8">
      <AnimatedText
        text="Typewriter Effect"
        variant="typewriter"
        className="font-mono text-2xl"
      />

      <AnimatedText
        text="Gradient Effect"
        variant="gradient"
        className="text-3xl font-bold"
      />

      <AnimatedText
        text="Floating Effect"
        variant="floating"
        className="text-xl"
      />

      <AnimatedText
        text="Glitch Effect"
        variant="glitch"
        className="text-2xl"
      />
    </div>
  );
}

Interactive Text

function InteractiveText() {
  const [text, setText] = useState("Click me to change");

  return (
    <AnimatedText
      text={text}
      variant="wave"
      className="cursor-pointer text-2xl transition-transform hover:scale-110"
    />
  );
}

Best Practices

1. Appropriate Use: Use text effects sparingly for maximum impact
2. Performance: Keep animations lightweight for better performance
3. Accessibility: Ensure text is readable when animations are disabled
4. Consistency: Use consistent animation styles throughout your application
5. Mobile Optimization: Test on mobile devices for optimal experience

Accessibility

• ARIA Labels: Proper labels for screen readers
• Reduced Motion: Respects prefers-reduced-motion media query
• Focus Management: Proper focus indicators
• Screen Reader Support: Ensure text is accessible to screen readers

Performance Tips

1. CSS Transforms: Use CSS transforms for better performance
2. Hardware Acceleration: Leverage GPU acceleration with transform3d
3. Optimized Animations: Use will-change CSS property strategically
4. Lazy Loading: Load heavy animations only when needed

Troubleshooting

Text not animating?

Check if Motion is properly installed and the component is wrapped in a motion provider.

Performance issues?

Consider using CSS-only animations or reducing animation complexity.

Styling conflicts?

Check for conflicting CSS classes or Tailwind CSS purging issues.

Accessibility problems?

Test with screen readers and ensure proper ARIA labels are provided.