typeflux ✨

Animated typing & erasing effect for your text — available in Vanilla JS and as a React hook.

👉 Live Demo

---

🚀 Features

• Smooth typing and backspacing animation
• Flexible delays (per letter, hold, erase)
• Works with plain JavaScript or React
• Lightweight & dependency-free

---

⚡ Usage

Vanilla JS

<span id="animatedText"></span>
<script src="typeflux.js"></script>
<script>
  useTypeflux({
    TYPE_DELAY: 120,
    ERASE_DELAY: 120,
    HOLD_DELAY: 2000,
    elementId: "animatedText",
    texts: ["First Text", "Second Text", "third Text"],
  });
</script>

React JS

import React from "react";
import { useTypeflux } from "./useTypeflux";

const page = () => {
  const animatedText = useTypeflux({
    TextArray: [
      "first text"
      "second text"
      "third text"
    ],
    typingSpeed: 150,
    deletingSpeed: 150,
    pauseDuration: 2000,
  });

  return <div>{animatedText}</div>;
};

export default page;