fresh-typedjs/README.md

My library lets you input text (a word or a paragraph) and specify a timing to animate writing or deleting each letter one by one,

# 🎯 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](https://parsa-farshah.github.io/Fresh-Typed.JS/)

---


## ✨ 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  
<img src="docs/images/typedanimation.png" alt="Project Overview" width="100%">

💻 Website View  
<img src="docs/images/cover.png" alt="Desktop View" width="100%">

👨‍💻 Developed By

[parsa dehghan pour farashah](http://linkedin.com/in/parsa-dehghan-pour-farashah-85ab04250)

## 👨‍🏫 Supervisor

- This project was completed under the guidance of my academic supervisor:  
  🔗 [Parsa Ghorbanian's Website](https://trainingsitedesign.ir/)

- thanks to 🔗 [mehrab Pour zakaria's Website](https://pourzakaria.com/) for helping upload to the npm site

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

- 📸 Instagram: [@parsa_dehghanpour_dv](https://www.instagram.com/parsa_dehghanpour_dv?igsh=eHkwNWhsa3I4ZWVp)

- 💼 LinkedIn: [parsa dehghan pour farashah](http://linkedin.com/in/parsa-dehghan-pour-farashah-85ab04250)

- 💻 GitHub: [parsa-farshah](http://github.com/parsa-farshah)

- 📩 Email: parsafarashah2002@gmail.com

- 📺 YouTube: [@FrontEndFresh](https://youtube.com/@frontendfresh?si=-2WsIYe-KBTUfwyu)

---


## 📦 Installation

### 🔹 Using NPM

```bash
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/fresh-typedjs@1.0.9/dist/freshType.min.css">
<script src="https://unpkg.com/fresh-typedjs@1.0.9/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
```