rocket-cursor-component

Rocket Cursor Component

A customizable React component that replaces the mouse cursor with an animated rocket that rotates based on movement and displays a flame effect when in motion.

Installation

Install the package via npm:

npm install rocket-cursor-component

Usage

Here's an example of how to use the RocketCursor component in your React app:

import React from "react";
import RocketCursor from "rocket-cursor-component"; 

function App() {
  return (
    <div>
      <h1>Your app content here</h1>
      <RocketCursor size={60} threshold={15} flameHideTimeout={300} />
    </div>
  );
}

export default App;

Props

Prop	Type	Default	Description
size	number	50	The size of the rocket cursor in pixels.
threshold	number	10	Minimum distance (pixels) to move before the rocket rotates.
isVisible	boolean	true	Initial visibility state of the rocket cursor.
flameHideTimeout	number	300	Time in milliseconds before the flame hides after stopping.

Features

• Custom Cursor: Replaces the default mouse cursor with a rocket that follows the cursor.
• Rotation: The rocket rotates in the direction of the cursor movement.
• Flame Effect: The rocket displays a flame animation when the cursor is moving.
• Customizable: Easily adjust the size, rotation threshold, visibility, and flame disappearance time.
• Element-Specific Visibility: Automatically hides the rocket cursor over elements with the class no-rocket-cursor.

Demo

Here's a demo of the Rocket Cursor in action:

Changelog

1.1.0 (Planned/Current)

• Refactored SVG into separate components.
• Added flameHideTimeout prop for configurable flame duration.
• Improved code structure and efficiency.

1.0.9

• Added support to hide the Rocket Cursor on elements with the class no-rocket-cursor.

1.0.2

• Added demo GIF in the README file.

1.0.1

• Initial release of the Rocket Cursor component.

Author

No898

License

This project is licensed under the MIT License. See the LICENSE file for details.