🌀 Txtroller

A customizable React typewriter component featuring 15+ text animation variants — plug & play, loopable, and fully stylable.

🚀 Install

npm install txtroller

⚙️ Usage

import TypeWriterText from 'txtroller';
import 'txtroller/styles/typewriter.css';

function App() {
  return (
    <TypeWriterText
      texts={["Hello World!", "Welcome to the Matrix."]}
      speed={100}
      pause={1500}
      loop
    />
  );
}

🛠 Props

| Prop | Type | Default | Description | | ----------- | ---------- | ----------- | ------------------------------------ | | texts | string[] | ['Text'] | Array of strings to type | | speed | number | 100 | Typing animation speed (ms per char) | | pause | number | 1000 | Delay before next text (in ms) | | loop | boolean | true | Loop the animation forever | | className | string | '' | Optional class for styling override |

More variants coming soon!

🎨 Styling

The component accepts a className prop so you can apply custom styling.

Example development styling

body {
  background-color: #1a1a2e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.typewriter-text {
  font-family: 'Fira Code', monospace;
  font-size: 2rem;
  color: #00f7ff;
  text-shadow: 0 0 10px #00f7ff;
}