@ramiz4/typing-text

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	`'	'`
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