ngx-beautify-cursor

Overview

ngx-beautify-cursor is a simple Angular package to beautify your cursor 👏

Live Demo github page ✨

Installation

npm install ngx-beautify-cursor

Usage

• Import NgxCursorModule

  app.module.ts

import {NgxBeautifyCursorModule} from 'ngx-beautify-cursor';

@NgModule({
    imports: [...NgxBeautifyCursorModule]
})
export class AppModule {
}

• Add The cursor to your .html

  in your root component HTML (or in specific component).

<ngx-beautify-cursor></ngx-beautify-cursor>

• Fully customizable (description below)

<ngx-beautify-cursor
        [circleBackgroundColor]="'hsla(245, 44%, 56%, 0.08)'"
        [circleBorderColor]="'#6363af'"
        [circleBorderSizePx]="1"
        [circleFollowDuration]="0.5"
        [circleSizePx]="40"
        [cursorHoldAnimationDuration]="0.25"
        [cursorHoldAnimationScaleDown]="0.8"
        [cursorHoverAnimationDuration]="0.4"
        [cursorHoverAnimationScaleUp]="1.5"
        [defaultCursor]="'none'"
        [dotColor]="'#6363af'"
        [dotFollowDuration]="0"
        [dotSizeInPx]="8"
        [enableHoverAnimation]="true"
        [hideDotWhileHover]="true"
        [hoverAttributes]="['clickable', 'button', 'href']"
        [nParentsStyleCheck]="5"
        [zIndex]="999"
></ngx-beautify-cursor>

• Detect styles from html attributes during the user's navigation

<!-- hover on this element change the cursor style-->
<a href="..."
   ngx-beautify-cursor-circle-bg-color="rgba(255,69,0,0.1)"
   ngx-beautify-cursor-circle-border-color="orange"
   ngx-beautify-cursor-dot-color="orange">
</a>

 

Cursor Inputs

Parameters name	Default value	Valid inputs	Functionality
circleBackgroundColor	hsla(245, 44%, 56%, 0.08)	rgba, hlsa, hex, rgb	cursor circle background color, low alpha looks good
circleBorderColor	#6363af	rgba, hlsa, hex, rgb	cursor circle background color
circleBorderSizePx	1	number > 0	cursor circle border width
circleFollowDuration	0.5	number > 0	pointer-follow animation duration of the circle
circleSizePx	40	number > 0	circle size in px
cursorHoldAnimationDuration	0.25	number > 0	holding left-click will trigger scale-down animation
cursorHoldAnimationScaleDown	0.8	1 > number > 0	circle scale-down multiplier while holding
cursorHoverAnimationDuration	0.4	number > 0	duration of scale-up circle animation during hover
cursorHoverAnimationScaleUp	1.5	number > 1	circle scale-up multiplier while hovering
defaultCursor	none	'none', 'auto', 'hide'	global 'cursor: <>' attribute
dotColor	#6363af	rgba, hlsa, hex, rgb	inner dot color. Use 'transparent' to hide the inner dot
dotFollowDuration	0	number > 0	pointer-follow animation duration of the inner dot
dotSizeInPx	8	number > 0	inner dot size
enableHoverAnimation	true	boolean	enable cursor scaling animation on hover attributes
hideDotWhileHover	true	boolean	hide inner dot during hover
hoverAttributes	[]	array of strings	HTML tags \ classes name to act as hover animation trigger
nParentsStyleCheck	5	number > 1	how many HTML parents to check for style custom classes
zIndex	999	cursor z-index	config big z-index

 

Custom style classes

Attribute name	Functionality
ngx-beautify-cursor-circle-bg-color	circle background color
ngx-beautify-cursor-circle-border-color	circle border color
ngx-beautify-cursor-dot-color	dot color

 

Thanks 💙

• While browsing dribbble.com & enjoying myself I came across https://zajno.com website and instantly loved their cursor design. So huge thanks to Zajno for the look & feel inspiration 🙌.
• Maxime Jacquet & his ngx-cursor npm package that helped me with native window, HTML elements family & general package structure.