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

# @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:

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:

<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

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

Open http://localhost:4200 — and boom 🎉

🧱 Build & Publish

To build the library for publishing:

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

🌟 Like it?

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

npm install @ramiz4/typing-text