Terminal Text Effect

A React component that creates a terminal-like text effect with hover animations. Perfect for adding a retro and tech-savvy touch to your text.

Installation

npm install terminal-text-effect

Usage

import { TerminalText } from "terminal-text-effect";

function App() {
  return (
    <>
      {/* Basic version */}
      <TerminalText text="Hello World" />

      {/* Version with background */}
      <TerminalText
        text="Hello World"
        variant="square"
        textColor="#00ff00"
        backgroundColor="#000"
      />
    </>
  );
}

Props

| Prop | Type | Default | Description | | --------------- | -------------------------------- | -------------- | -------------------------------------------- | | text | string | - | Text to display | | variant | 'default' | 'square' | 'color' | 'default' | Animation type | | textColor | string | 'currentColor' | Text color | | backgroundColor | string | - | Background color (only for variant="square") | | className | string | - | Additional CSS classes |

Variants

• default: Only shows the random characters effect
• square: Adds an animated background after the effect
• color: Changes colors during animation

Features

• 🎮 Three animation variants
• 🔤 Random characters animation
• 🎨 Fully customizable (colors, variants)
• ⚡️ Smooth animations with GSAP
• 🔥 Hover activation

Dependencies

• GSAP for fluid animations
• React 16.8+ (hooks)

License

MIT