Animate typing of multiple words or sentences
Configurable typing speed and pause time between words
Easy to use with plain JavaScript or popular frameworks like React, Next.js, Vue, and more
Provides a destroy() method to stop the animation and clean up timers

Installation

npm install text-animator

Usage

1. Reactjs

import React, { useEffect, useRef } from "react";
import Typewriter from "text-animator";

const TypewriterComponent = () => {
const elementRef = useRef(null);
const words = [
    "Type what you want to build here...",
    "Enter your prompt here...",
    "Describe what you want to build...",
];

useEffect(() => {
    const typewriter = new Typewriter(elementRef.current, words, {
    typingSpeed: 40,
    pauseTime: 500,
    });

    return () => typewriter.destroy();
}, []);

return <div ref={elementRef} style={{ fontFamily: "monospace", fontSize: 20 }} />;
};

export default TypewriterComponent;

2. Vanilla JS

import Typewriter from "text-animator";

const element = document.getElementById("typewriter");
const words = [
  "Type what you want to build here...",
  "Enter your prompt here...",
  "Describe what you want to build..."
];

const typewriter = new Typewriter(element, words, {
  typingSpeed: 40,
  pauseTime: 500,
});

add the following html to your page

<div id="typewriter"></div>

3. Nextjs

import { useEffect, useRef } from "react";
import Typewriter from "text-animator";

export default function Home() {
  const elementRef = useRef(null);
  const words = [
    "Type what you want to build here...",
    "Enter your prompt here...",
    "Describe what you want to build...",
  ];

  useEffect(() => {
    const typewriter = new Typewriter(elementRef.current, words, {
      typingSpeed: 40,
      pauseTime: 500,
    });

    return () => typewriter.destroy();
  }, []);

  return (
    <main>
      <h1>Next.js Typewriter Example</h1>
      <div ref={elementRef} style={{ fontFamily: "monospace", fontSize: 20 }} />
    </main>
  );
}

4. Vue3

<template>
  <div ref="typewriter" class="typewriter-text"></div>
</template>

<script setup>
    import { ref, onMounted, onBeforeUnmount } from "vue";
    import Typewriter from "text-animator";

    const typewriter = ref(null);
    const words = [
    "Type what you want to build here...",
    "Enter your prompt here...",
    "Describe what you want to build...",
    ];

    let typewriterInstance = null;

    onMounted(() => {
    typewriterInstance = new Typewriter(typewriter.value, words, {
        typingSpeed: 40,
        pauseTime: 500,
    });
    });

    onBeforeUnmount(() => {
    if (typewriterInstance) {
        typewriterInstance.destroy();
    }
    });
</script>

5. Javascript

<!DOCTYPE html>
<html>
<head>
  <title>Typewriter Demo</title>
</head>
<body>
  <div id="output"></div>

  <script type="module">
    import Typewriter from 'text-animator';

    const element = document.getElementById('output');
    const words = [
      "Type what you want to build here...",
      "Enter your prompt here...",
      "Describe what you want to build..."
    ];

    const typewriter = new Typewriter(element, words, {
      typingSpeed: 40,
      pauseTime: 500
    });

    // Optional: Stop it later if needed
    // setTimeout(() => typewriter.destroy(), 10000);
  </script>
</body>
</html>

License

Author

Pankaj Kumar pankaj.ky3007@gmail.com github.com/PankajKumar1947

Keywords

typewriter

react

nextjs

FAQs

What is text-animator?

Is text-animator well maintained?

Package last updated on 16 May 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

text-animator