https://github.com/afnaanulla/AfnaanNgx-cusotm-cursor
https://github.com/afnaanulla/AfnaanNgx-cusotm-cursor
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/afnaanulla/AfnaanNgx-cusotm-cursor
- Owner: afnaanulla
- Created: 2025-02-28T17:48:49.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-02-28T19:00:27.000Z (about 2 months ago)
- Last Synced: 2025-02-28T21:48:08.597Z (about 2 months ago)
- Size: 55.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - afnaan-ngx-custom-cursor - A customizable animated cursor for Angular applications. Enhance user experience with a stylish and interactive cursor effect. (Table of contents / Third Party Components)
- trackawesomelist - afnaan-ngx-custom-cursor (⭐1) - A customizable animated cursor for Angular applications. Enhance user experience with a stylish and interactive cursor effect. (Recently Updated / [Mar 02, 2025](/content/2025/03/02/README.md))
- fucking-awesome-angular - afnaan-ngx-custom-cursor - A customizable animated cursor for Angular applications. Enhance user experience with a stylish and interactive cursor effect. (Table of contents / Third Party Components)
README
# 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:
```sh
npm install afnaan-ngx-custom-cursor
```
## 📌 Usage
### **1️⃣ Import the Component**
Since this is a **standalone component**, import it directly in your Angular component:
```ts
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**
```html
```
## 🎨 Customization
### **Change Cursor Image**
Pass a custom cursor image as an input:
```html
```
### **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)**
```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)**
```scss
::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**
```sh
ng serve
```
Then, open your browser and navigate to: [http://localhost:4200/](http://localhost:4200/)
### **Build the Project**
```sh
ng build
```
The build artifacts will be stored in the `dist/` directory.
### **Run Unit Tests**
```sh
ng test
```
### **Run End-to-End Tests**
```sh
ng e2e
```
## 📖 Additional Resources
- [Angular CLI Overview](https://angular.io/cli)
- [AfnaanNgx Custom Cursor GitHub](https://github.com/afnaanulla/AfnaanNgx-cusotm-cursor)
## 📜 License
This project is licensed under the **MIT License**.
---
💡 **Created by [Afnaan Ullah](https://github.com/afnaanulla)** 🚀