{"id":14969975,"url":"https://github.com/ehsan-shv/react-creative-cursor","last_synced_at":"2025-10-26T10:31:35.677Z","repository":{"id":49351792,"uuid":"483708112","full_name":"ehsan-shv/react-creative-cursor","owner":"ehsan-shv","description":"A creative and customizable React cursor component.","archived":false,"fork":false,"pushed_at":"2022-07-04T22:34:24.000Z","size":21634,"stargazers_count":77,"open_issues_count":5,"forks_count":15,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T18:37:04.945Z","etag":null,"topics":["cursor","cursor-follower","custom-cursor","gelly-cursor","gsap3","magnetic-cursor","react","reactjs","sticky-cursor"],"latest_commit_sha":null,"homepage":"https://react-creative-cursor-demo.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ehsan-shv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-20T15:21:39.000Z","updated_at":"2025-01-27T09:06:39.000Z","dependencies_parsed_at":"2022-09-05T05:31:02.113Z","dependency_job_id":null,"html_url":"https://github.com/ehsan-shv/react-creative-cursor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsan-shv%2Freact-creative-cursor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsan-shv%2Freact-creative-cursor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsan-shv%2Freact-creative-cursor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ehsan-shv%2Freact-creative-cursor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ehsan-shv","download_url":"https://codeload.github.com/ehsan-shv/react-creative-cursor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238310349,"owners_count":19450843,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cursor","cursor-follower","custom-cursor","gelly-cursor","gsap3","magnetic-cursor","react","reactjs","sticky-cursor"],"created_at":"2024-09-24T13:42:47.350Z","updated_at":"2025-10-26T10:31:32.738Z","avatar_url":"https://github.com/ehsan-shv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-creative-cursor\n\n\u003ca href=\"https://www.npmjs.com/package/react-creative-cursor\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-creative-cursor.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\n\u003e A creative and customizable React cursor follower component. Inspired by **cuberto.com** and **14islands.com**.\n\n## Options\n\n- Magnetic cursor\n- Sticky cursor\n- Gelly animation\n- Add background color and background image\n- Add text\n- Change cursor size smoothly\n- Exclusion Mode\n\n\u003ca href=\"https://react-creative-cursor-demo.vercel.app/\"\u003eDemo\u003c/a\u003e\n\n## Installation\n\n```\nnpm i react-creative-cursor\n```\n\n## Basic Example\n\n```tsx\nimport { Cursor } from 'react-creative-cursor';\nimport 'react-creative-cursor/dist/styles.css';\n\nconst index = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCursor isGelly={true} /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n**It's essential to add the Cursor component to each route if you want to use all options properly. otherwise, if you want to use cursor follower, feel free and import in app or layout component**.\n\n## Magnetic Cursor\n\n```tsx\nimport { Cursor } from 'react-creative-cursor';\nimport 'react-creative-cursor/dist/styles.css';\n\nconst index = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCursor isGelly={true} /\u003e\n      \u003cdiv data-cursor-magnetic\u003e\n        \u003ch1\u003eMagnetic Cursor\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Sticky Cursor\n\n```tsx\nimport { Cursor } from 'react-creative-cursor';\nimport 'react-creative-cursor/dist/styles.css';\n\nconst index = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCursor isGelly={true} /\u003e\n      \u003cdiv data-cursor-stick=\"#stick-title\"\u003e\n        \u003ch1 id=\"stick-title\" style={{textAlign: center}}\u003eSticky Cursor\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\nIt's better for the element which the pointer sticks to be a **block** and **text-center** element.\n\n## Change Color\n\n```tsx\nimport { Cursor } from 'react-creative-cursor';\nimport 'react-creative-cursor/dist/styles.css';\n\nconst index = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCursor isGelly={true} /\u003e\n      \u003cdiv data-cursor-color=\"#61dbfb\"\u003e\n        \u003ch1 id=\"stick-title\"\u003eColorized Cursor\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Change Size\n\n```tsx\nimport { Cursor } from 'react-creative-cursor';\nimport 'react-creative-cursor/dist/styles.css';\n\nconst index = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCursor isGelly={true} /\u003e\n      \u003cdiv data-cursor-size=\"80px\"\u003e\n        \u003ch1 id=\"stick-title\"\u003eSized Cursor\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Change Background Image\n\n```tsx\nimport { Cursor } from 'react-creative-cursor';\nimport 'react-creative-cursor/dist/styles.css';\n\nconst index = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCursor isGelly={true} /\u003e\n      \u003cdiv data-cursor-background-image=\"https://reactjs.org/logo-og.png\" data-cursor-size=\"200px\"\u003e\n        \u003ch1 id=\"stick-title\"\u003eReact.js\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Exclusion Mode\n\n```tsx\nimport { Cursor } from 'react-creative-cursor';\nimport 'react-creative-cursor/dist/styles.css';\n\nconst index = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCursor isGelly={true} /\u003e\n      \u003cdiv data-cursor-exclusion style={{backgroundColor: '#fff'}}\u003e\n        \u003ch1 id=\"stick-title\"\u003eReact.js\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Add Text\n\n```tsx\nimport { Cursor } from 'react-creative-cursor';\nimport 'react-creative-cursor/dist/styles.css';\n\nconst index = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCursor isGelly={true} /\u003e\n      \u003cdiv data-cursor-text=\"React\" data-cursor-size=\"100px\"\u003e\n        \u003ch1 id=\"stick-title\"\u003eReact.js\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Props\n\n| Props                            | Value Type                                 | Default Value  |\n| -------------------------------- | ------------------------------------------ | -------------- |\n| isGelly                          | `boolean`                                  | false          |\n| animationDuration                | `number`                                   | 1.25           |\n| animationEase                    | `string \\| gsap.EaseFunction \\| undefined` | Expo.easeOut   |\n| gellyAnimationAmount             | `number`                                   | 50             |\n| stickAnimationAmount             | `number`                                   | 0.09           |\n| stickAnimationDuration           | `number`                                   | 0.7            |\n| stickAnimationEase               | `string \\| gsap.EaseFunction \\| undefined` | Power4.easeOut |\n| magneticAnimationAmount          | `number`                                   | 0.2            |\n| magneticAnimationDuration        | `number`                                   | 0.7            |\n| magneticAnimationEase            | `string \\| gsap.EaseFunction \\| undefined` | Power4.easeOut |\n| colorAnimationEase               | `string \\| gsap.EaseFunction \\| undefined` | Power4.easeOut |\n| colorAnimationDuration           | `number`                                   | 0.2            |\n| backgroundImageAnimationEase     | `string \\| gsap.EaseFunction \\| undefined` | undefined      |\n| backgroundImageAnimationDuration | `number`                                   | 0              |\n| sizeAnimationEase                | `string \\| gsap.EaseFunction \\| undefined` | Expo.easeOut   |\n| sizeAnimationDuration            | `number`                                   | 0.5            |\n| textAnimationEase                | `string \\| gsap.EaseFunction \\| undefined` | Expo.easeOut   |\n| textAnimationDuration            | `number`                                   | 1              |\n| cursorSize                       | `number`                                   | 48             |\n| cursorBackgrounColor             | `string`                                   | '#000'         |\n| exclusionBackgroundColor         | `string`                                   | '#fff'         |\n| cursorInnerColor                 | `string`                                   | '#fff'         |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsan-shv%2Freact-creative-cursor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fehsan-shv%2Freact-creative-cursor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsan-shv%2Freact-creative-cursor/lists"}