drumst0ck-terminal-effects v0.1.6

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

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