npm package: @ramiz4/typing-text
Description: Typing animation directive for Angular
Author: Ramiz Loki
Latest version: 1.0.1

Hell yes! 🎉 Here’s your **all-in-one `README.md`** — perfect for your **npm package**, **GitHub repo**, and **demo workspace**.

You can place this at the root of your repo (`/README.md`) — it covers:

✅ Package overview  
✅ Installation  
✅ Usage  
✅ Input API  
✅ Live demo (via `demo-app`)  
✅ Build & publish  
✅ License & credits  

---

## ✅ Full `README.md`

```md
# @ramiz4/typing-text

> 🔠 Angular directive for animated typing effects — smooth, customizable, and standalone.

Bring life to your hero sections, intros, or developer pages with natural typing animations.

---

## 🚀 Features

- ⌨️ Typing animation for any text
- 🕒 Customizable speed & delay
- 🔀 Natural feel with randomized typing
- ⛓️ Trigger one typing element after another
- 💡 Standalone Angular directive (no NgModule needed)
- 🎯 No dependencies

---

## 📦 Installation

```bash
npm install @ramiz4/typing-text
```

---

## 🧑‍💻 Usage

Import the directive in any standalone component:

```ts
import { TypingTextDirective } from '@ramiz4/typing-text';

@Component({
  standalone: true,
  selector: 'app-hero',
  imports: [TypingTextDirective],
  template: `
    <h1
      appTypingText
      text="Hoi, ich bin Ramiz Loki"
      typingSpeed="80"
      randomizeSpeed="true"
      cursorChar="|"
      class="text-4xl font-bold"
    ></h1>
  `,
})
export class HeroComponent {}
```

---

## ⚙️ Available Inputs

| Input              | Type     | Default  | Description |
|-------------------|----------|----------|-------------|
| `text`            | `string` | `''`     | The text to type |
| `typingSpeed`     | `string` | `'100'`  | Milliseconds per character |
| `randomizeSpeed`  | `string` | `'false'`| If `true`, adds ±30% variation |
| `startDelay`      | `string` | `'0'`    | Delay before typing starts (ms) |
| `startAfter`      | `string` | –        | ID of another element to wait for (`typing-finished`) |
| `withCursor`      | `string` | `'true'` | Whether to show a blinking cursor |
| `cursorChar`      | `string` | `'|'`    | The cursor character |
| `cursorBlinkSpeed`| `string` | `'0.7s'` | Speed of blinking animation |
| `cursorOpacity`   | `string` | `'1'`    | Opacity of the blinking cursor (0–1) |

---

## 🔁 Triggering chained animations

You can delay a second element until the first one finishes typing:

```html
<h1
  id="headline"
  appTypingText
  text="Hello, world!"
  typingSpeed="100"
></h1>

<p
  appTypingText
  text="I'm a fullstack developer."
  typingSpeed="80"
  startAfter="headline"
  startDelay="300"
></p>
```

The directive dispatches a `CustomEvent('typing-finished')` on the element when done.

---

## 🧪 Demo / Playground

This package comes with a fully configured **Angular demo app** so you can play with the directive locally.

### 🔧 Setup

```bash
git clone https://github.com/yourusername/typing-text
cd typing-text
npm install
ng serve demo-app
```

Open [http://localhost:4200](http://localhost:4200) — and boom 🎉

---

## 🧱 Build & Publish

To build the library for publishing:

```bash
ng build typing-text
cd dist/typing-text
npm publish --access public
```

> Make sure your `package.json` has the scoped name:  
> `"name": "@ramiz4/typing-text"`

---

## 🖼 Styling

The blinking cursor is added using `::after` with injected CSS. No global styles needed. You can style the surrounding text with your own Tailwind, SCSS or CSS classes.

---

## 🧠 Compatibility

- Angular 16+
- Fully supports standalone components
- Zero dependencies

---

## 📄 License

MIT © [Ramiz Loki](https://github.com/ramiz4)

---

## 🌟 Like it?

If you find this helpful, star it on GitHub and tell your dev friends 🧡

> `npm install @ramiz4/typing-text`