yswang0927/cursor-effects

90年代流行的页面鼠标指针动画效果

90's 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
• Following Dot
• Bubbles Particles
• Snowflake Particles
• Fairy Dust
• Clock Cursor

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

<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

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

new cursoreffects.ghostCursor();
</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.

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

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: ["🔥", "🐬", "🦆"]});

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)

new cursoreffects.trailingCursor({particles: 15});

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