@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

🌟 Like it?

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

npm install @ramiz4/typing-text