rocket-cursor-component 1.0.8 → 1.1.0

package/README.md

@@ -14,15 +14,15 @@ npm install rocket-cursor-component
 
 Here's an example of how to use the `RocketCursor` component in your React app:
 
-```jsx
+```tsx
 import React from "react";
-import RocketCursor from "rocket-cursor-component";
+import RocketCursor from "rocket-cursor-component"; 
 
 function App() {
   return (
     <div>
       <h1>Your app content here</h1>
-      <RocketCursor size={60} threshold={15} />
+      <RocketCursor size={60} threshold={15} flameHideTimeout={300} />
     </div>
   );
 }
@@ -32,29 +32,35 @@ 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             |
+| 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, and visibility of the rocket.
+- **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:
+Here's a demo of the Rocket Cursor in action:
 
 ![Rocket Cursor Demo](https://github.com/No898/RocketCursor/raw/main/assets/rocket-cursor-demo.gif)
 
 ## Changelog
 
-### 1.0.8
+### 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`.
 

package/dist/rocket.Cursor.d.ts

@@ -3,6 +3,7 @@ interface RocketCursorProps {
     size?: number;
     threshold?: number;
     isVisible?: boolean;
+    flameHideTimeout?: number;
 }
 declare const RocketCursor: React.FC<RocketCursorProps>;
 export default RocketCursor;

package/dist/rocket.Cursor.js

@@ -1,13 +1,40 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import React from "react";
-const RocketCursor = ({ size = 50, threshold = 10, isVisible = true, }) => {
-    const [position, setPosition] = useState({ x: 0, y: 0 });
+// Komponenta pro SVG Plamene
+const FlameSvg = () => (React.createElement("g", { transform: "translate(1.2245, 350.449) rotate(45) scale(0.5, -0.5)" },
+    React.createElement("defs", null,
+        React.createElement("linearGradient", { id: "fireGradient", gradientUnits: "userSpaceOnUse", x1: "94.141", y1: "255", x2: "94.141", y2: "0.188" },
+            React.createElement("stop", { offset: "0", stopColor: "#ff4c0d" }),
+            React.createElement("stop", { offset: "1", stopColor: "#fc9502" }))),
+    React.createElement("path", { d: "M187.899,164.809 C185.803,214.868 144.574,254.812 94.000,254.812 C42.085,254.812 -0.000,211.312 -0.000,160.812 C-0.000,154.062 -0.121,140.572 10.000,117.812 C16.057,104.191 19.856,95.634 22.000,87.812 C23.178,83.513 25.469,76.683 32.000,87.812 C35.851,94.374 36.000,103.812 36.000,103.812 C36.000,103.812 50.328,92.817 60.000,71.812 C74.179,41.019 62.866,22.612 59.000,9.812 C57.662,5.384 56.822,-2.574 66.000,0.812 C75.352,4.263 100.076,21.570 113.000,39.812 C131.445,65.847 138.000,90.812 138.000,90.812 C138.000,90.812 143.906,83.482 146.000,75.812 C148.365,67.151 148.400,58.573 155.999,67.813 C163.226,76.600 173.959,93.113 180.000,108.812 C190.969,137.321 187.899,164.809 187.899,164.809 Z", fill: "url(#fireGradient)", fillRule: "evenodd" }),
+    React.createElement("path", { d: "M94.000,254.812 C58.101,254.812 29.000,225.711 29.000,189.812 C29.000,168.151 37.729,155.000 55.896,137.166 C67.528,125.747 78.415,111.722 83.042,102.172 C83.953,100.292 86.026,90.495 94.019,101.966 C98.212,107.982 104.785,118.681 109.000,127.812 C116.266,143.555 118.000,158.812 118.000,158.812 C118.000,158.812 125.121,154.616 130.000,143.812 C131.573,140.330 134.753,127.148 143.643,140.328 C150.166,150.000 159.127,167.390 159.000,189.812 C159.000,225.711 129.898,254.812 94.000,254.812 Z", fill: "#fc9502", fillRule: "evenodd" }),
+    React.createElement("path", { d: "M95.000,183.812 C104.250,183.812 104.250,200.941 116.000,223.812 C123.824,239.041 112.121,254.812 95.000,254.812 C77.879,254.812 69.000,240.933 69.000,223.812 C69.000,206.692 85.750,183.812 95.000,183.812 Z", fill: "#fce202", fillRule: "evenodd" })));
+// Komponenta pro SVG Rakety
+const RocketSvg = () => (React.createElement("g", { transform: "translate(0, 0)" },
+    React.createElement("path", { style: { fill: "#FF7124" }, d: "M399.76,16.699c10.12,37.84,8.67,78.13-4.34,115.28h-0.01L284.48,21.049v-0.01 C321.63,8.029,361.92,6.579,399.76,16.699z" }),
+    React.createElement("path", { style: { fill: "#F2D59F" }, d: "M90.21,207.929l87.14-101.42h0.01l33.71-39.24c21.43-21.43,46.6-36.84,73.41-46.23v0.01 l110.93,110.93h0.01c-9.39,26.81-24.8,51.98-46.23,73.41l-39.24,33.71l-101.43,87.14l-29.57-29.57l-29.58-29.58l-29.58-29.58 L90.21,207.929z M296.11,193.399c20.18-20.17,20.18-52.89,0-73.06c-20.17-20.18-52.89-20.18-73.06,0 c-20.18,20.17-20.18,52.89,0,73.06C243.22,213.579,275.94,213.579,296.11,193.399z" }),
+    React.createElement("path", { style: { fill: "#F2D59F" }, d: "M309.95,239.099c1.74,45.6-14.8,91.78-49.61,126.59c-10.69,10.68-22.44,19.65-34.93,26.89 l-16.89-66.34L309.95,239.099z" }),
+    React.createElement("path", { style: { fill: "#8ECAC1" }, d: "M296.11,120.339c20.18,20.17,20.18,52.89,0,73.06c-20.17,20.18-52.89,20.18-73.06,0 c-20.18-20.17-20.18-52.89,0-73.06C243.22,100.159,275.94,100.159,296.11,120.339z" }),
+    React.createElement("path", { style: { fill: "#E6B263" }, d: "M208.52,326.239l-39.94,14.71c-10.98,4.05-23.31,1.34-31.58-6.94l-6.85-6.85l48.8-30.49 L208.52,326.239z" }),
+    React.createElement("polygon", { style: { fill: "#E6B263" }, points: "178.95,296.669 130.15,327.159 130.14,327.159 109.72,306.739 149.37,267.089" }),
+    React.createElement("path", { style: { fill: "#F2D59F" }, d: "M177.35,106.509l-87.14,101.42l-66.33-16.88c7.24-12.49,16.21-24.24,26.89-34.93 C85.58,121.309,131.74,104.769,177.35,106.509z" }),
+    React.createElement("polygon", { style: { fill: "#E6B263" }, points: "149.37,267.089 109.72,306.739 89.3,286.309 119.79,237.509" }),
+    React.createElement("path", { style: { fill: "#E6B263" }, d: "M119.79,237.509l-30.49,48.8l-6.86-6.85c-8.27-8.28-10.98-20.6-6.94-31.58l14.71-39.95 L119.79,237.509z" })));
+const RocketCursor = ({ size = 50, threshold = 10, isVisible = true, flameHideTimeout = 300, }) => {
+    const [position, setPosition] = useState({ x: -size, y: -size });
     const [angle, setAngle] = useState(0);
-    const [isMoving, setIsMoving] = useState(true);
+    const [isMoving, setIsMoving] = useState(false);
     const [visible, setVisible] = useState(isVisible);
     const lastSignificantPosition = useRef({ x: 0, y: 0 });
     const lastMoveTimestamp = useRef(Date.now());
+    const timeoutRef = useRef(null);
     const handleMouseMove = useCallback((e) => {
+        const target = e.target;
+        if (target.closest(".no-rocket-cursor")) {
+            setVisible(false);
+            return;
+        }
+        setVisible(true);
         const currentPosition = { x: e.clientX, y: e.clientY };
         setPosition(currentPosition);
         const dx = currentPosition.x - lastSignificantPosition.current.x;
@@ -18,10 +45,15 @@ const RocketCursor = ({ size = 50, threshold = 10, isVisible = true, }) => {
             setAngle(newAngle);
             lastSignificantPosition.current = currentPosition;
         }
-        lastMoveTimestamp.current = Date.now();
         setIsMoving(true);
-        setVisible(true);
-    }, [threshold]);
+        lastMoveTimestamp.current = Date.now();
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            setIsMoving(false);
+        }, flameHideTimeout);
+    }, [threshold, flameHideTimeout]);
     const handleMouseOut = (e) => {
         if (!e.relatedTarget ||
             e.relatedTarget.nodeName === "HTML") {
@@ -34,13 +66,10 @@ const RocketCursor = ({ size = 50, threshold = 10, isVisible = true, }) => {
         }
     };
     useEffect(() => {
-        const checkIfStopped = () => {
-            const now = Date.now();
-            if (now - lastMoveTimestamp.current > 300) {
-                setIsMoving(false);
-            }
-        };
-        const intervalId = setInterval(checkIfStopped, 100);
+        const initialX = window.innerWidth / 2;
+        const initialY = window.innerHeight / 2;
+        setPosition({ x: initialX, y: initialY });
+        lastSignificantPosition.current = { x: initialX, y: initialY };
         window.addEventListener("mousemove", handleMouseMove);
         document.addEventListener("mouseout", handleMouseOut);
         document.addEventListener("visibilitychange", handleVisibilityChange);
@@ -48,40 +77,33 @@ const RocketCursor = ({ size = 50, threshold = 10, isVisible = true, }) => {
             window.removeEventListener("mousemove", handleMouseMove);
             document.removeEventListener("mouseout", handleMouseOut);
             document.removeEventListener("visibilitychange", handleVisibilityChange);
-            clearInterval(intervalId);
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
         };
     }, [handleMouseMove]);
+    const wrapperStyle = {
+        position: "fixed",
+        left: position.x,
+        top: position.y,
+        transform: `translate(-50%, -50%) rotate(${angle}deg)`,
+        pointerEvents: "none",
+        zIndex: 9999,
+        width: `${size}px`,
+        height: `${size * 1.5}px`,
+        transition: 'left 0.05s linear, top 0.05s linear',
+    };
+    const svgStyle = {
+        width: "100%",
+        height: "100%",
+        display: 'block',
+    };
     if (!isVisible || !visible) {
         return null;
     }
-    return (React.createElement("div", { style: {
-            position: "fixed",
-            left: position.x,
-            top: position.y,
-            transform: `translate(-50%, -50%) rotate(${angle}deg)`,
-            pointerEvents: "none",
-            zIndex: 9999,
-            width: `${size}px`,
-            height: `${size * 1.5}px`,
-        } },
-        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 416.449 516.449", width: "100%", height: "100%" },
-            React.createElement("defs", null,
-                React.createElement("linearGradient", { id: "fireGradient", gradientUnits: "userSpaceOnUse", x1: "94.141", y1: "255", x2: "94.141", y2: "0.188" },
-                    React.createElement("stop", { offset: "0", stopColor: "#ff4c0d" }),
-                    React.createElement("stop", { offset: "1", stopColor: "#fc9502" }))),
-            isMoving && (React.createElement("g", { transform: "translate(1.2245, 350.449) rotate(45) scale(0.5, -0.5)" },
-                React.createElement("path", { d: "M187.899,164.809 C185.803,214.868 144.574,254.812 94.000,254.812 C42.085,254.812 -0.000,211.312 -0.000,160.812 C-0.000,154.062 -0.121,140.572 10.000,117.812 C16.057,104.191 19.856,95.634 22.000,87.812 C23.178,83.513 25.469,76.683 32.000,87.812 C35.851,94.374 36.000,103.812 36.000,103.812 C36.000,103.812 50.328,92.817 60.000,71.812 C74.179,41.019 62.866,22.612 59.000,9.812 C57.662,5.384 56.822,-2.574 66.000,0.812 C75.352,4.263 100.076,21.570 113.000,39.812 C131.445,65.847 138.000,90.812 138.000,90.812 C138.000,90.812 143.906,83.482 146.000,75.812 C148.365,67.151 148.400,58.573 155.999,67.813 C163.226,76.600 173.959,93.113 180.000,108.812 C190.969,137.321 187.899,164.809 187.899,164.809 Z", fill: "url(#fireGradient)", fillRule: "evenodd" }),
-                React.createElement("path", { d: "M94.000,254.812 C58.101,254.812 29.000,225.711 29.000,189.812 C29.000,168.151 37.729,155.000 55.896,137.166 C67.528,125.747 78.415,111.722 83.042,102.172 C83.953,100.292 86.026,90.495 94.019,101.966 C98.212,107.982 104.785,118.681 109.000,127.812 C116.266,143.555 118.000,158.812 118.000,158.812 C118.000,158.812 125.121,154.616 130.000,143.812 C131.573,140.330 134.753,127.148 143.643,140.328 C150.166,150.000 159.127,167.390 159.000,189.812 C159.000,225.711 129.898,254.812 94.000,254.812 Z", fill: "#fc9502", fillRule: "evenodd" }),
-                React.createElement("path", { d: "M95.000,183.812 C104.250,183.812 104.250,200.941 116.000,223.812 C123.824,239.041 112.121,254.812 95.000,254.812 C77.879,254.812 69.000,240.933 69.000,223.812 C69.000,206.692 85.750,183.812 95.000,183.812 Z", fill: "#fce202", fillRule: "evenodd" }))),
-            React.createElement("g", { transform: "translate(0, 0)" },
-                React.createElement("path", { style: { fill: "#FF7124" }, d: "M399.76,16.699c10.12,37.84,8.67,78.13-4.34,115.28h-0.01L284.48,21.049v-0.01 C321.63,8.029,361.92,6.579,399.76,16.699z" }),
-                React.createElement("path", { style: { fill: "#F2D59F" }, d: "M90.21,207.929l87.14-101.42h0.01l33.71-39.24c21.43-21.43,46.6-36.84,73.41-46.23v0.01 l110.93,110.93h0.01c-9.39,26.81-24.8,51.98-46.23,73.41l-39.24,33.71l-101.43,87.14l-29.57-29.57l-29.58-29.58l-29.58-29.58 L90.21,207.929z M296.11,193.399c20.18-20.17,20.18-52.89,0-73.06c-20.17-20.18-52.89-20.18-73.06,0 c-20.18,20.17-20.18,52.89,0,73.06C243.22,213.579,275.94,213.579,296.11,193.399z" }),
-                React.createElement("path", { style: { fill: "#F2D59F" }, d: "M309.95,239.099c1.74,45.6-14.8,91.78-49.61,126.59c-10.69,10.68-22.44,19.65-34.93,26.89 l-16.89-66.34L309.95,239.099z" }),
-                React.createElement("path", { style: { fill: "#8ECAC1" }, d: "M296.11,120.339c20.18,20.17,20.18,52.89,0,73.06c-20.17,20.18-52.89,20.18-73.06,0 c-20.18-20.17-20.18-52.89,0-73.06C243.22,100.159,275.94,100.159,296.11,120.339z" }),
-                React.createElement("path", { style: { fill: "#E6B263" }, d: "M208.52,326.239l-39.94,14.71c-10.98,4.05-23.31,1.34-31.58-6.94l-6.85-6.85l48.8-30.49 L208.52,326.239z" }),
-                React.createElement("polygon", { style: { fill: "#E6B263" }, points: "178.95,296.669 130.15,327.159 130.14,327.159 109.72,306.739 149.37,267.089" }),
-                React.createElement("path", { style: { fill: "#F2D59F" }, d: "M177.35,106.509l-87.14,101.42l-66.33-16.88c7.24-12.49,16.21-24.24,26.89-34.93 C85.58,121.309,131.74,104.769,177.35,106.509z" }),
-                React.createElement("polygon", { style: { fill: "#E6B263" }, points: "149.37,267.089 109.72,306.739 89.3,286.309 119.79,237.509" }),
-                React.createElement("path", { style: { fill: "#E6B263" }, d: "M119.79,237.509l-30.49,48.8l-6.86-6.85c-8.27-8.28-10.98-20.6-6.94-31.58l14.71-39.95 L119.79,237.509z" })))));
+    return (React.createElement("div", { style: wrapperStyle },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 416.449 516.449", style: svgStyle },
+            isMoving && React.createElement(FlameSvg, null),
+            React.createElement(RocketSvg, null))));
 };
 export default RocketCursor;

package/package.json

@@ -1,20 +1,42 @@
-{
-  "name": "rocket-cursor-component",
-  "version": "1.0.8",
-  "description": "A customizable React component that replaces the cursor with an animated rocket.",
-  "main": "dist/rocket.Cursor.js",
-  "types": "dist/rocket.Cursor.d.ts",
-  "scripts": {
-    "build": "tsc"
-  },
-  "author": "Tomas Dinh",
-  "license": "MIT",
-  "devDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "typescript": "^4.0.0"
-  },
-  "dependencies": {
-    "rocket-cursor-component": "^1.0.0"
-  }
-}
+{
+  "name": "rocket-cursor-component",
+  "version": "1.1.0",
+  "description": "A customizable React component that replaces the cursor with an animated rocket, featuring rotation and flame effects.",
+  "main": "dist/rocket.Cursor.js",
+  "types": "dist/rocket.Cursor.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/No898/RocketCursor.git"
+  },
+  "keywords": [
+    "react",
+    "cursor",
+    "rocket",
+    "component",
+    "typescript",
+    "animation"
+  ],
+  "author": "Tomas Dinh",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.3",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "typescript": "^4.0.0"
+  }
+}

package/src/rocket.Cursor.tsx

@@ -1,182 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import React from "react";
-
-interface RocketCursorProps {
-  size?: number;
-  threshold?: number;
-  isVisible?: boolean;
-}
-
-const RocketCursor: React.FC<RocketCursorProps> = ({
-  size = 50,
-  threshold = 10,
-  isVisible = true,
-}) => {
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [angle, setAngle] = useState(0);
-  const [isMoving, setIsMoving] = useState(true);
-  const [visible, setVisible] = useState(isVisible);
-  const lastSignificantPosition = useRef({ x: 0, y: 0 });
-  const lastMoveTimestamp = useRef(Date.now());
-
-  const handleMouseMove = useCallback(
-    (e: { clientX: any; clientY: any }) => {
-      const currentPosition = { x: e.clientX, y: e.clientY };
-      setPosition(currentPosition);
-
-      const dx = currentPosition.x - lastSignificantPosition.current.x;
-      const dy = currentPosition.y - lastSignificantPosition.current.y;
-
-      const distance = Math.sqrt(dx * dx + dy * dy);
-
-      if (distance > threshold) {
-        const newAngle = Math.atan2(dy, dx) * (180 / Math.PI) + 45;
-        setAngle(newAngle);
-        lastSignificantPosition.current = currentPosition;
-      }
-
-      lastMoveTimestamp.current = Date.now();
-      setIsMoving(true);
-      setVisible(true);
-    },
-    [threshold]
-  );
-
-  const handleMouseOut = (e: MouseEvent) => {
-    if (
-      !e.relatedTarget ||
-      (e.relatedTarget as HTMLElement).nodeName === "HTML"
-    ) {
-      setVisible(false);
-    }
-  };
-
-  const handleVisibilityChange = () => {
-    if (document.visibilityState === "visible") {
-      setVisible(true);
-    }
-  };
-
-  useEffect(() => {
-    const checkIfStopped = () => {
-      const now = Date.now();
-      if (now - lastMoveTimestamp.current > 300) {
-        setIsMoving(false);
-      }
-    };
-
-    const intervalId = setInterval(checkIfStopped, 100);
-
-    window.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseout", handleMouseOut);
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseout", handleMouseOut);
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-      clearInterval(intervalId);
-    };
-  }, [handleMouseMove]);
-
-  if (!isVisible || !visible) {
-    return null;
-  }
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        left: position.x,
-        top: position.y,
-        transform: `translate(-50%, -50%) rotate(${angle}deg)`,
-        pointerEvents: "none",
-        zIndex: 9999,
-        width: `${size}px`,
-        height: `${size * 1.5}px`,
-      }}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 416.449 516.449"
-        width="100%"
-        height="100%"
-      >
-        <defs>
-          <linearGradient
-            id="fireGradient"
-            gradientUnits="userSpaceOnUse"
-            x1="94.141"
-            y1="255"
-            x2="94.141"
-            y2="0.188"
-          >
-            <stop offset="0" stopColor="#ff4c0d" />
-            <stop offset="1" stopColor="#fc9502" />
-          </linearGradient>
-        </defs>
-
-        {isMoving && (
-          <g transform="translate(1.2245, 350.449) rotate(45) scale(0.5, -0.5)">
-            <path
-              d="M187.899,164.809 C185.803,214.868 144.574,254.812 94.000,254.812 C42.085,254.812 -0.000,211.312 -0.000,160.812 C-0.000,154.062 -0.121,140.572 10.000,117.812 C16.057,104.191 19.856,95.634 22.000,87.812 C23.178,83.513 25.469,76.683 32.000,87.812 C35.851,94.374 36.000,103.812 36.000,103.812 C36.000,103.812 50.328,92.817 60.000,71.812 C74.179,41.019 62.866,22.612 59.000,9.812 C57.662,5.384 56.822,-2.574 66.000,0.812 C75.352,4.263 100.076,21.570 113.000,39.812 C131.445,65.847 138.000,90.812 138.000,90.812 C138.000,90.812 143.906,83.482 146.000,75.812 C148.365,67.151 148.400,58.573 155.999,67.813 C163.226,76.600 173.959,93.113 180.000,108.812 C190.969,137.321 187.899,164.809 187.899,164.809 Z"
-              fill="url(#fireGradient)"
-              fillRule="evenodd"
-            />
-            <path
-              d="M94.000,254.812 C58.101,254.812 29.000,225.711 29.000,189.812 C29.000,168.151 37.729,155.000 55.896,137.166 C67.528,125.747 78.415,111.722 83.042,102.172 C83.953,100.292 86.026,90.495 94.019,101.966 C98.212,107.982 104.785,118.681 109.000,127.812 C116.266,143.555 118.000,158.812 118.000,158.812 C118.000,158.812 125.121,154.616 130.000,143.812 C131.573,140.330 134.753,127.148 143.643,140.328 C150.166,150.000 159.127,167.390 159.000,189.812 C159.000,225.711 129.898,254.812 94.000,254.812 Z"
-              fill="#fc9502"
-              fillRule="evenodd"
-            />
-            <path
-              d="M95.000,183.812 C104.250,183.812 104.250,200.941 116.000,223.812 C123.824,239.041 112.121,254.812 95.000,254.812 C77.879,254.812 69.000,240.933 69.000,223.812 C69.000,206.692 85.750,183.812 95.000,183.812 Z"
-              fill="#fce202"
-              fillRule="evenodd"
-            />
-          </g>
-        )}
-
-        <g transform="translate(0, 0)">
-          <path
-            style={{ fill: "#FF7124" }}
-            d="M399.76,16.699c10.12,37.84,8.67,78.13-4.34,115.28h-0.01L284.48,21.049v-0.01 C321.63,8.029,361.92,6.579,399.76,16.699z"
-          />
-          <path
-            style={{ fill: "#F2D59F" }}
-            d="M90.21,207.929l87.14-101.42h0.01l33.71-39.24c21.43-21.43,46.6-36.84,73.41-46.23v0.01 l110.93,110.93h0.01c-9.39,26.81-24.8,51.98-46.23,73.41l-39.24,33.71l-101.43,87.14l-29.57-29.57l-29.58-29.58l-29.58-29.58 L90.21,207.929z M296.11,193.399c20.18-20.17,20.18-52.89,0-73.06c-20.17-20.18-52.89-20.18-73.06,0 c-20.18,20.17-20.18,52.89,0,73.06C243.22,213.579,275.94,213.579,296.11,193.399z"
-          />
-          <path
-            style={{ fill: "#F2D59F" }}
-            d="M309.95,239.099c1.74,45.6-14.8,91.78-49.61,126.59c-10.69,10.68-22.44,19.65-34.93,26.89 l-16.89-66.34L309.95,239.099z"
-          />
-          <path
-            style={{ fill: "#8ECAC1" }}
-            d="M296.11,120.339c20.18,20.17,20.18,52.89,0,73.06c-20.17,20.18-52.89,20.18-73.06,0 c-20.18-20.17-20.18-52.89,0-73.06C243.22,100.159,275.94,100.159,296.11,120.339z"
-          />
-          <path
-            style={{ fill: "#E6B263" }}
-            d="M208.52,326.239l-39.94,14.71c-10.98,4.05-23.31,1.34-31.58-6.94l-6.85-6.85l48.8-30.49 L208.52,326.239z"
-          />
-          <polygon
-            style={{ fill: "#E6B263" }}
-            points="178.95,296.669 130.15,327.159 130.14,327.159 109.72,306.739 149.37,267.089"
-          />
-          <path
-            style={{ fill: "#F2D59F" }}
-            d="M177.35,106.509l-87.14,101.42l-66.33-16.88c7.24-12.49,16.21-24.24,26.89-34.93 C85.58,121.309,131.74,104.769,177.35,106.509z"
-          />
-          <polygon
-            style={{ fill: "#E6B263" }}
-            points="149.37,267.089 109.72,306.739 89.3,286.309 119.79,237.509"
-          />
-          <path
-            style={{ fill: "#E6B263" }}
-            d="M119.79,237.509l-30.49,48.8l-6.86-6.85c-8.27-8.28-10.98-20.6-6.94-31.58l14.71-39.95 L119.79,237.509z"
-          />
-        </g>
-      </svg>
-    </div>
-  );
-};
-
-export default RocketCursor;

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6",                        // Target ES6 or later for modern JavaScript compatibility
-    "module": "ES6",                        // Use ES6 modules
-    "jsx": "react",                         // Allow JSX in .tsx files
-    "declaration": true,                    // Generate .d.ts files for TypeScript consumers
-    "outDir": "./dist",                     // Output directory for compiled files
-    "strict": true,                         // Enable strict type checking
-    "moduleResolution": "node",             // Resolve modules using Node.js style
-    "esModuleInterop": true,                // Compatibility with CommonJS modules
-    "skipLibCheck": true                    // Skip type checking for libraries
-  },
-  "include": ["./src"],                     // Include all files in the src directory
-  "exclude": ["node_modules", "**/*.test.tsx"]  // Exclude tests and node_modules
-}