React Animated Polyline Cursor

기본 커서를 커스텀 가능한 애니메이션 커서로 변경해주는 React Component입니다.
해당 Component는 함수형으로 제작되었습니다.

Contents

1. Features
2. Install
3. Usage
4. Options

Features

• Custom cursor replaced by default cursor
• Line effects that track the path the cursor has traveled
• Cursor scale down effect on click
• Cursor resizing effect when hovering over elements with 'c-cursor-hover' class defined

Other customizations include color, size, polyline-delay, polyline-length, marker-blend-mode, and more for circle, polyline, and marker.

Live Demo

Install

npm i react-animated-polyline-cursor

Usage

Add to global scope. (ex. App.ts)

import React from "react";
import CustomAnimatedCursor from "react-animated-polyline-cursor";

export default function App() {
    return (
        <div className="App">
            // It has default values, ​​and you can only override custom settings.
            <CustomAnimatedCursor
                dotColor={"#2AFADF"}
                lineColor={"#2AFADF"}
                markerColor={"#2AFADF"}
            />
            ...component
        </div>
    );
}

Hover Element (add 'c-cursor-hover' className)

export default function DemoContent() {
    return (
        <div>
            <div>
                <h1>Custom Animated Polyline Cursor</h1>
                <a href="#" className="c-cursor-hover">
                    Link Text.
                </a>
                <div className="c-cursor-hover">Hover Box</div>
                <div>
                    <label htmlFor="chk" className="c-cursor-hover">
                        Checkbox
                    </label>
                    <input type="checkbox" id="chk" />
                </div>
            </div>
        </div>
    );
}

Default Props

CustomAnimatedCursor.defaultProps = {
    dotColor: "#000",
    dotSize: 8,
    dotReductionRatio: 0.25,
    lineColor: "#000",
    lineDelay: 2,
    lineLength: 12,
    lineWidth: 2,
    markerSize: 24,
    markerColor: "#fff",
    removeCursorElements: ["a", "input", "label", "select", "textarea", "button"],
    markerBlendMode: true,
};

Props Types

export interface CursorTypes {
    dotColor: string;
    dotSize: number;
    dotReductionRatio: number;
    lineColor: string;
    lineDelay: number;
    lineLength: number;
    lineWidth: number;
    markerSize: number;
    markerColor: string;
    removeCursorElements: string[];
    markerBlendMode: boolean;
}

Options

Option	Type	Description	Default
dotColor	string	Cursor color - rgb or hex	#000
dotSize	number	Cursor size - Minimum 1	8
dotReductionRatio	number	Cursor reduction ratio - 0~1	0.25
lineColor	string	DrawLine color - rgb or hex	#000
lineDelay	number	DrawLine delay to follow - Minimum 1	2
lineLength	number	DrawLine stretched length - Recommend 2~30 limit	12
lineWidth	number	DrawLine width - Minimum 1, Maximum "dotSize"	2
markerSize	string	HoveredMarker size - Minimum "dotSize"	24
markerColor	string	HoveredMarker color - rgb or hex	#000
removeCursorElements	array	Remove default cursor from element - htmlTag, class, id	['a', 'input', 'label', 'select', 'textarea', 'button']
markerBlendMode	boolean	On/Off the Cursor blend mode - boolean	true

Todos

• Webpack to Vite Migration
• Add Hovered Marker Click Action
• Add Input Type Element Hovered Action
• Create & Deploy NPM Package
• Add more detailed cursor style editing
• Changed input element cursor hovered design
• Add SSR Mode
• Source Refactoring