🎯 Fresh Typed.js v1.0.9

A lightweight and responsive JavaScript typing animation library that types text character by character or word by word, supports custom speed, and loops infinitely.
Perfect for enhancing your websites with dynamic text effects, headers, or interactive messages.

Inspired by popular typing libraries but fully optimized for performance, simplicity, and responsiveness. Works seamlessly with Tailwind CSS and any frontend framework.

🚀 Overview

Fresh Typed.js allows developers to create eye-catching typing effects on any text element.
Features include:

• Character-by-character or word-by-word typing
• Infinite loop animations
• Customizable typing speed
• Fully responsive and works across all devices

Use it with NPM or CDN, and integrate it easily into any project.

🌐 Live Demo

👉 View Live Demo

✨ Features

• ⚡ Lightweight, dependency-free (Vanilla JS)
• ⏱ Customizable typing speed
• 🔄 Infinite loop typing animation
• 🖥 Fully responsive across desktop, tablet, and mobile
• 🪶 Works perfectly with Tailwind CSS or custom styles

📅 Release Date

October 14, 2025

🛠️ Technologies Used

• HTML5 – semantic markup
• CSS3 & Tailwind CSS – styling and animation
• JavaScript – typing logic and loops
• Media Queries – ensures responsiveness

📸 Project Screenshots
🌟 Overview

💻 Website View

👨‍💻 Developed By

parsa dehghan pour farashah

👨‍🏫 Supervisor

• This project was completed under the guidance of my academic supervisor:
  🔗 Parsa Ghorbanian's Website

• thanks to 🔗 mehrab Pour zakaria's Website for helping upload to the npm site

📲 Connect with Me | ارتباط با من

• 📸 Instagram: @parsa_dehghanpour_dv

• 💼 LinkedIn: parsa dehghan pour farashah

• 💻 GitHub: parsa-farshah

• 📩 Email: [email protected]

• 📺 YouTube: @FrontEndFresh

📦 Installation

🔹 Using NPM

npm i fresh-typedjs
html
Copy code
<link rel="stylesheet" href="node_modules/fresh-typedjs/dist/freshType.min.css"/>
<script src="node_modules/fresh-typedjs/dist/freshType.min.js"></script>
🔹 Using CDN
html
Copy code
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/freshType.min.css">
<script src="https://unpkg.com/[email protected]/dist/freshType.min.js"></script>
⚙️ Usage Example
HTML:

html
Copy code
<h5 class="freshType TextparagraphType"></h5>
CSS:

css
Copy code
.anim {
  animation: anim 1s forwards infinite alternate;
}
.afterText::after {
  content: "";
  background-color: rgb(255, 255, 255);
  width: 3px;
  height: 100%;
  position: absolute;
  margin-left: 0.375rem;
  margin-top: 0.25rem;
  animation: anim 0.5s linear infinite;
}

@keyframes anim {
  0% { opacity: 0; }
  100% { opacity: 100; }
}
JS:

javascript
Copy code
let paragraph = "parsa the perfect \n front end developer";
const TimeSpeed = 100;
let freshType = document.querySelectorAll(".freshType");

freshType.forEach((item) => {
  item.classList.add("relative");
  item.classList.add("afterText");
  item.style.whiteSpace = "pre";
});

let TextparagraphType = document.querySelector(".TextparagraphType");
let flagParagraph = 0;
let flagBooleanParagraph = true;

setInterval(() => {
  if (flagBooleanParagraph) {
    TextparagraphType.innerText += paragraph[flagParagraph++];
    if (flagParagraph == paragraph.length) {
      flagBooleanParagraph = false;
    }
  } else {
    flagParagraph--;
    TextparagraphType.innerText = paragraph.slice(0, flagParagraph);
    if (flagParagraph === 0) {
      flagBooleanParagraph = true;
      TextparagraphType.innerText = "";
    }
  }
}, TimeSpeed);


🏷️ License

Released under the MIT License