{"id":13402330,"url":"https://github.com/tholman/cursor-effects","last_synced_at":"2025-05-14T02:05:49.535Z","repository":{"id":37623064,"uuid":"49692445","full_name":"tholman/cursor-effects","owner":"tholman","description":"Old-school cursor effects for your browser built with modern JavaScript","archived":false,"fork":false,"pushed_at":"2025-01-24T13:51:38.000Z","size":142,"stargazers_count":3601,"open_issues_count":12,"forks_count":260,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-05-09T19:51:49.755Z","etag":null,"topics":["90s","canvas","javascript","library"],"latest_commit_sha":null,"homepage":"https://tholman.com/cursor-effects","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tholman.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["tholman"],"ko_fi":"tholman","custom":["https://www.buymeacoffee.com/tholman"]}},"created_at":"2016-01-15T02:57:02.000Z","updated_at":"2025-05-08T00:28:45.000Z","dependencies_parsed_at":"2024-05-13T00:22:49.622Z","dependency_job_id":"8692d699-a86f-402a-b421-6749a758c18b","html_url":"https://github.com/tholman/cursor-effects","commit_stats":{"total_commits":107,"total_committers":15,"mean_commits":7.133333333333334,"dds":"0.22429906542056077","last_synced_commit":"a2a58f5699ee889f9a8470f720e6b3ad0e50fadf"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tholman%2Fcursor-effects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tholman%2Fcursor-effects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tholman%2Fcursor-effects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tholman%2Fcursor-effects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tholman","download_url":"https://codeload.github.com/tholman/cursor-effects/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254052692,"owners_count":22006716,"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":["90s","canvas","javascript","library"],"created_at":"2024-07-30T19:01:14.626Z","updated_at":"2025-05-14T02:05:44.523Z","avatar_url":"https://github.com/tholman.png","language":"JavaScript","readme":"# 90s Cursor Effects\r\n\r\n_\"Knowing the codes\" used to be all the rage, I want to bring a few back._\r\n\r\nA repo of the old effects that inspired creativity and the desire to learn at least a little code around the world. Modernised so they're a little more efficient, and just as annoying (and twice as fun) as they were before. [Have a play here](https://tholman.com/cursor-effects).\r\n\r\nThe current effects are:\r\n\r\n- Rainbow Cursor\r\n- Emoji Rain\r\n- Elastic Emoji\r\n- Ghost Following\r\n- Trailing Cursor\r\n- Text Flag Cursor\r\n- Following Dot\r\n- Bubbles Particles\r\n- Snowflake Particles\r\n- Fairy Dust\r\n- Clock Cursor\r\n- Character Cursor\r\n\r\n# How to Set Up Locally/Develop\r\n\r\n1. First the packages request (this is only rollup, which code compilation) with `npm install`\r\n2. `npm run watch` This will compile the src in the `dist` folder that `index.html` is looking for and update it when changes are made. You can then go to index.html in the web browser of your choice.\r\n\r\n# How to Use\r\n\r\nYou need to include the following script tag in your webpage (see next section if you want to use this package via npm). And then, once the script is loaded you'll be able to add the effects to the page\r\n\r\n```html\r\n\u003cscript src=\"https://unpkg.com/cursor-effects@latest/dist/browser.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nAlternatively you can use a `type=\"module\"` script on newer browsers with a import statement, if you are using the esm module you will import the cursor specific to your needs, rather than having to use the `cursoreffects.x` style.\r\n\r\n```html\r\n\u003cscript type=\"module\"\u003e\r\n  import { fairyDustCursor } from \"https://unpkg.com/cursor-effects@latest/dist/esm.js\";\r\n\r\n  new fairyDustCursor();\r\n\u003c/script\u003e\r\n```\r\n\r\nAnd then create a new instance of its type in your JavaScript. The script will create the canvas that is used, so nothing else is really needed.\r\n\r\n```js\r\nwindow.addEventListener(\"load\", (event) =\u003e {\r\n  new cursoreffects.ghostCursor();\r\n});\r\n```\r\n\r\nYou can also target specific elements, to have the canvas appear inside those, for example:\r\n\r\n```js\r\nconst targetElement = document.querySelector(\"#ghost\");\r\nnew cursoreffects.ghostCursor({ element: targetElement });\r\n```\r\n\r\nTo remove the effect, you can call `destroy` on it.\r\n```js\r\n// Create\r\nlet cursorEffect = new ghostCursor();\r\n\r\n// Destroy\r\ncursorEffect.destroy()\r\n```\r\n\r\n\r\n### or you can use NPM\r\n\r\n```sh\r\nnpm install cursor-effects\r\n```\r\n\r\n```js\r\nimport { emojiCursor } from \"cursor-effects\";\r\nnew emojiCursor({ emoji: [\"🔥\", \"🐬\", \"🦆\"] });\r\n```\r\n\r\n## Specific Customization\r\n\r\nA few of these have custom options as well (if you are interested in more options, opening an issue or PR is the way to go).\r\n\r\n### rainbowCursor\r\n\r\nYou can change the colors, size and length in `rainbowCursor`\r\n\r\n```js\r\nnew cursoreffects.rainbowCursor({\r\n  length: 3,\r\n  colors: [\"red\", \"blue\"],\r\n  size: 4,\r\n});\r\n```\r\n\r\n### springyEmojiCursor\r\n\r\nYou can change the emoji in `springyEmojiCursor`'s emoji with the `emoji` a single string emoji.\r\n\r\n```js\r\nnew cursoreffects.springyEmojiCursor({ emoji: \"🤷‍♂️\" });\r\n```\r\n\r\n### fairyDustCursor\r\n\r\nYou can change the emoji in `fairyDustCursor`'s colors with the `colors` option (an array of colors)\r\n\r\n```js\r\nnew cursoreffects.fairyDustCursor({\r\n  colors: [\"#ff0000\", \"#00ff00\", \"#0000ff\"],\r\n});\r\n```\r\n\r\n### emojiCursor\r\n\r\nYou can change the emoji in `emojiCursor`'s emoji with the `emoji` option (a list of emoji),\r\nand delay between emoji with the `delay` option (defaults to `16`)\r\n\r\n```js\r\nnew cursoreffects.emojiCursor({ emoji: [\"🔥\", \"🐬\", \"🦆\"], delay: 25 });\r\n```\r\n\r\n### textFlag\r\n\r\nYou can change the  `textFlag`'s text with the `text` option (String),\r\nand color of the text with the `color` option (hex)\r\n\r\n```js\r\n new textFlag({text: \"test\",color:[\"#FF6800\"]});\r\n```\r\n\r\n## Accessibility\r\n\r\nThe cursor won't display if the user's system accessibility settings have [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) enabled.\r\n\r\n### trailingCursor\r\n\r\nYou can change the number of trail steps in `trailingCursor` with the `particles` option (a number), the rate of the trail with the `rate` option (a number between 0 and 1, default is `0.4`), and the trailing cursor image with the `baseImageSrc` option (a URL or base64 string)\r\n\r\n```js\r\nnew cursoreffects.trailingCursor({particles: 15, rate: 0.8, baseImageSrc: \"data:image/png;base64,iVB...\"});\r\n```\r\n\r\nYou can change the color of the following dot in `followingDotCursor` with the `color` option (hex)\r\n\r\n```js\r\nnew cursoreffects.followingDotCursor({ color: [\"#323232a6\"] });\r\n```\r\n\r\n### characterCursor\r\n\r\nConsider this cursor as an extension of the snowflake cursor, but instead of the snowflake emoji you can specify a list of characters and colors to use as well as defining how the character's velocity, rotation and scaling should change over the characters lifespan. For example to produce the same effect you see in the demo page, you would use this. (It will also do this by default, but this is a great way to experiement and play around with the effect)\r\n```js\r\nnew cursoreffects.characterCursor({ \r\n    element: document.querySelector(\"#character\"), \r\n    characters: [\"h\", \"e\", \"l\", \"l\", \"o\"],\r\n    font: \"15px serif\",\r\n    colors: [\r\n        \"#6622CC\",\r\n        \"#A755C2\",\r\n        \"#B07C9E\",\r\n        \"#B59194\",\r\n        \"#D2A1B8\",\r\n    ],\r\n    characterLifeSpanFunction: function() {\r\n        return Math.floor(Math.random() * 60 + 80);\r\n    },\r\n    initialCharacterVelocityFunction: function() {\r\n        return {\r\n            x: (Math.random() \u003c 0.5 ? -1 : 1) * Math.random() * 5,\r\n            y: (Math.random() \u003c 0.5 ? -1 : 1) * Math.random() * 5,\r\n        }\r\n    },\r\n    characterVelocityChangeFunctions: {\r\n      x_func: function(age, lifeSpan) {\r\n        return (Math.random() \u003c 0.5 ? -1 : 1)/30;\r\n      },\r\n      y_func: function(age, lifeSpan) {\r\n        return (Math.random() \u003c 0.5 ? -1 : 1)/ 15;\r\n      },\r\n    },\r\n    characterScalingFunction: function(age, lifeSpan) {\r\n        let lifeLeft = lifeSpan - age;\r\n        return Math.max(lifeLeft / lifeSpan * 2, 0);\r\n    },\r\n    characterNewRotationDegreesFunction: function(age, lifeSpan) {\r\n        let lifeLeft = lifeSpan - age;\r\n        console.log(age, lifeSpan);\r\n        return lifeLeft / 5;\r\n    }\r\n})\r\n```\r\n\r\nNote that none of these behavior changing options are required but in that case it will use similar physics to the snowflake and use the asterisk character instead.\r\n\r\n# License\r\n\r\nMIT af, but if you're using the scripts a [GitHub sponsorship](https://github.com/sponsors/tholman) or [shouting me a coffee](https://www.buymeacoffee.com/tholman) would always be appreciated :)\r\n","funding_links":["https://github.com/sponsors/tholman","https://ko-fi.com/tholman","https://www.buymeacoffee.com/tholman"],"categories":["JavaScript","🚀 A series of exquisite and compact web page cool effects","\u003cimg src=\"media/icons8-windows-11-48.png\" alt=\"logo\" width=\"36\"/\u003e  WINDOWS","Packages"],"sub_categories":["Mouse Effect"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftholman%2Fcursor-effects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftholman%2Fcursor-effects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftholman%2Fcursor-effects/lists"}