AfnaanNgx Custom Cursor

A customizable animated cursor for Angular applications. Enhance user experience with a stylish and interactive cursor effect.

🚀 Installation

Install the package using npm:

npm install afnaan-ngx-custom-cursor

📌 Usage

1️⃣ Import the Component

Since this is a standalone component, import it directly in your Angular component:

import { Component } from '@angular/core';
import { AfnaanNgxCustomCursorComponent } from 'afnaan-ngx-custom-cursor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AfnaanNgxCustomCursorComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'My Angular App';
}

2️⃣ Add the Custom Cursor to Your Template

<lib-afnaan-ngx-custom-cursor></lib-afnaan-ngx-custom-cursor>
<router-outlet></router-outlet>

🎨 Customization

Change Cursor Image

Pass a custom cursor image as an input:

<lib-afnaan-ngx-custom-cursor cursorImage="https://your-image-url.com/cursor.png"></lib-afnaan-ngx-custom-cursor>

Reduce Cursor Size

By default, the cursor size is 32px. You can change its size using CSS or SCSS:

Using CSS (Global Styles in styles.scss or styles.css)

lib-afnaan-ngx-custom-cursor #cursor {
  width: 16px !important;  /* Adjust size */
  height: 16px !important;
}

lib-afnaan-ngx-custom-cursor #cursor img {
  width: 100% !important;
  height: 100% !important;
}

Using SCSS (Component Styles)

::ng-deep lib-afnaan-ngx-custom-cursor #cursor {
  width: 16px !important;
  height: 16px !important;
}

::ng-deep lib-afnaan-ngx-custom-cursor #cursor img {
  width: 100% !important;
  height: 100% !important;
}

🛠 Development

Start a Local Development Server

ng serve

Then, open your browser and navigate to: http://localhost:4200/

Build the Project

ng build

The build artifacts will be stored in the dist/ directory.

Run Unit Tests

ng test

Run End-to-End Tests

ng e2e

📖 Additional Resources

• Angular CLI Overview
• AfnaanNgx Custom Cursor GitHub

📜 License

This project is licensed under the MIT License.

---

💡 Created by Afnaan Ullah 🚀