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} />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ----------- | ------- | ------- | ------------------------------------------ | | size | number | 50 | The size of the rocket cursor | | threshold | number | 10 | Distance to move before the rocket rotates | | isVisible | boolean | true | Show or hide the rocket cursor |

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, and visibility of the rocket.
• 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.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.