npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cursor-effects-hdpi

v1.0.12

Published

Old-school cursor effects for your browser built in modern JavaScript.

Downloads

3

Readme

90s Cursor Effects

"Knowing the codes" used to be all the rage, I want to bring a few back.

A 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.

The current effects are:

  • Rainbow Cursor
  • Emoji Rain
  • Elastic Emoji
  • Ghost Following
  • Trailing Cursor
  • Text Flag Cursor
  • Following Dot
  • Bubbles Particles
  • Snowflake Particles
  • Fairy Dust
  • Clock Cursor

How to Set Up Locally/Develop

  1. First the packages request (this is only rollup, which code compilation) with npm install
  2. 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.

How to Use

You 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

<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>

Alternatively 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.

<script type="module">
  import { fairyDustCursor } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";

  new fairyDustCursor();
</script>

And 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.

window.addEventListener("load", (event) => {
  new cursoreffects.ghostCursor();
});

You can also target specific elements, to have the canvas appear inside those, for example:

const targetElement = document.querySelector("#ghost");
new cursoreffects.ghostCursor({ element: targetElement });

To remove the effect, you can call destroy on it.

// Create
let cursorEffect = new ghostCursor();

// Destroy
cursorEffect.destroy()

or you can use NPM

npm install cursor-effects
import { emojiCursor } from "cursor-effects";
new emojiCursor({ emoji: ["🔥", "🐬", "🦆"] });

Specific Customization

A 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).

rainbowCursor

You can change the colors, size and length in rainbowCursor

new cursoreffects.rainbowCursor({
  length: 3,
  colors: ["red", "blue"],
  size: 4,
});

springyEmojiCursor

You can change the emoji in springyEmojiCursor's emoji with the emoji a single string emoji.

new cursoreffects.springyEmojiCursor({ emoji: "🤷‍♂️" });

fairyDustCursor

You can change the emoji in fairyDustCursor's colors with the colors option (an array of colors)

new cursoreffects.fairyDustCursor({
  colors: ["#ff0000", "#00ff00", "#0000ff"],
});

emojiCursor

You can change the emoji in emojiCursor's emoji with the emoji option (a list of emoji)

new cursoreffects.emojiCursor({ emoji: ["🔥", "🐬", "🦆"] });

textFlag

You can change the textFlag's text with the text option (String), and color of the text with the color option (hex)

 new textFlag({text: "test",color:["#FF6800"]});

Accessibility

The cursor won't display if the user's system accessibility settings have prefers-reduced-motion enabled.

trailingCursor

You 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)

new cursoreffects.trailingCursor({particles: 15, rate: 0.8, baseImageSrc: "data:image/png;base64,iVB..."});

You can change the color of the following dot in followingDotCursor with the color option (hex)

new cursoreffects.followingDotCursor({ color: ["#323232a6"] });

License

MIT af, but if you're using the scripts a GitHub sponsorship or shouting me a coffee would always be appreciated :)