Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

Related tags

Effect javascript 90s
Overview

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.

How to Use

For the most part these scripts are plug and play.

Include the script in your HTML...

<script src="your/path/to/ghostCursor.js"></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 ghostCursor();

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

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

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

springyEmojiCursor

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

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

fairyDustCursor

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

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

emojiCursor

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

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

NPM

I haven't got around to it yet, but if you'd like to make a rollup that compiles everything all nice, be my guest... otherwise I'll get to it eventually!

License

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

Comments
  • Adding to a squarespace site, X and Y coordinates not being picked up correct or offset or something

    Adding to a squarespace site, X and Y coordinates not being picked up correct or offset or something

    https://codepen.io/tholman/pen/rxJpdQ Trying to add this to a friends website for them but having a bit of trouble with alignment

    document.body.appendChild(this.element);

    Throws all the emojis to the bottom of the page and none show over the content only below, I think this is because of a clear fix.

    If Insert it in a div above the clearfix , the x and y coordinates are all slightly off.

    Any help would be appreciated

    opened by MajorTennis 14
  • this is undefined error in last releases

    this is undefined error in last releases

    Hello,

    since 1.0.5 i get the error message "this is undefined" it looks like it is caused by this commit https://github.com/tholman/cursor-effects/commit/c4b4aef2cd371d2c32b23d903ccb65c0be5a4a64

    opened by revoltek-daniel 6
  • Following Dot custom color

    Following Dot custom color

    I had the pleasure of implementing the trailing effect for one of our internal demos for a product and i got asked the following question so often : 'is it possible to change the color of the dot ?' , so i decided to make it happen lol . I added a couple of lines to make custom colors possible for the following dot . Cheers ,ZTF

    opened by ZTF666 6
  • here is a bunch of old examples

    here is a bunch of old examples

    The page seems to have been around for ages, there are some really crazy ones:

    http://rainbow.arch.scriptmania.com/scripts/index.html

    I remember http://rainbow.arch.scriptmania.com/scripts/elasticballs.html from waaaay back. No info about licenses though, so I don't want to directly copy them here.

    opened by sknebel 4
  • Respect prefers-reduced-motion setting

    Respect prefers-reduced-motion setting

    Fixes #26

    Extremely copy-pastey, but it seems like each cursor is its own encapsulated thing so it seemed like the thing to do.

    • check prefers-reduced-motion when we init the cursor trail
    • when the value of prefers-reduced-motion changes, either re-init or destroy the cursor trail
    • add an id to the trail's canvas element, so that we can remove it from the DOM where necessary (this may help with #33?)
    opened by sophiekoonin 3
  • Toggle Cursor effects

    Toggle Cursor effects

    I'm wondering if there is a way to toggle the cursor on and off. I like the clock cursor, brings some retro early 00s flair, but it also interfers with reading websites. I have a event listening for mousemove and if the main tag is in the :hover query selector results I would like to turn off the cursor.

    enhancement 
    opened by ispringle 3
  • FIrefox 82.0a1. Cursor Effects using emojis are broken because weird BoundingBoxes

    FIrefox 82.0a1. Cursor Effects using emojis are broken because weird BoundingBoxes

    For snowFlake, emoji, and springyEmoji the drawImage call fails. This is because the TextMetrics returned from measureText have bounding box values that add to zero.

    TextMetrics
    actualBoundingBoxAscent: -3.843
    actualBoundingBoxDescent: 3.843
    actualBoundingBoxLeft: 10.5
    actualBoundingBoxRight: -10.5
    width: 21

          let measurements = context.measureText(emoji);
      let bgCanvas = document.createElement("canvas");
      let bgContext = bgCanvas.getContext("2d");

      bgCanvas.width = measurements.width;
      bgCanvas.height =
        measurements.actualBoundingBoxAscent +
        measurements.actualBoundingBoxDescent;

      bgContext.textAlign = "center";
      bgContext.font = "21px serif";
      bgContext.textBaseline = "middle";
      bgContext.fillText(
        emoji,
        bgCanvas.width / 2,
        measurements.actualBoundingBoxAscent
      );

    The easier fix I found is just using the height for the width, but no idea how other browser would take that. The ghostCursor is also broke for me, but I wasn't able to find out why.

    opened by HartleyAHartley 3
  • Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

    Uncaught TypeError: Cannot read properties of null (reading 'appendChild') 

    <html>
 <link href='https://fonts.googleapis.com/css?family=Mountains of Christmas' rel='stylesheet'>
 <script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>  
 <script> 
   new cursoreffects.snowflakeCursor();
 </script>

    There's the top of my web page. I'm getting the following error:

    Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at new t.snowflakeCursor (browser.js:1:17588)
    at (index):6:3

    Please let me know if I'm missing anything

    opened by twiclo 2
  • Make publishable on npm

    Make publishable on npm

    This pr adds a rollup build script which will build the package into three files:

    dist/browser.js     - The file browsers use (iife format)
dist/esm.js         - The file module imports use (esm format)
dist/cjs.cjs        - The file require import use (cjs format)

    It also updates the docs to show the new way to import and consume the library from the different environments. I tested these changes on jsfiddle, a vite project, and on the demo index.html file included in the repo

    opened by ghostdevv 2
  • Too many particles are created when Chrome DevTools is opened

    Too many particles are created when Chrome DevTools is opened

    Hey I figured out, that if you open Chromes DevTools on a site, where your particle code is applied, there are too many particles being created.

    I dont know why it happens but it does. Although it is not really a dealbreaker I thought that you may be interested in taking a look at it.

    opened by MichaelMandel26 2
  • Added null check for options

    Added null check for options

    Added null checks to options in rainbowCursor.js and trailingCursor.js. These were failing when calling either of those functions without passing in an options variable. I tested all of the other cursor functions as well.

    opened by AndrewPetz 1
  • New mousepointer idea: Baby Turtle

    New mousepointer idea: Baby Turtle

    There should be a mouse pointer in the form of a Baby Turtle.

    I've seen that pointer shape in a screenshot of an obscure 90s game first, created by Twitter user @blinry. I think it was somewhere in this thread

    opened by knbknb 1
  • how about using typescript

    how about using typescript

    Interesting library!

    Hello, I am a heavy user of typescript, and i found that this library doesn't have ts support (neither written in ts, nor seems to have a type declaration package like @types/xxx).

    I'd love to do the work, rewrite this interesting library into ts to provide better type support, and I'll do it and issue a pr this week if you're up to it

    Some developers don't like seeing ts, so I want to ask your opinion here first.

    opened by lopo12123 0
  • mouse animation idea: oneko

    mouse animation idea: oneko

    Hello, thanks for your great work. You have asked for ideas. I have fond memories of the little cat following my mouse: oneko.

    It was a bsd package https://ftp.netbsd.org/pub/pkgsrc/current/pkgsrc/x11/oneko/index.html you can find many illustrations by googling "oneko cat x11".

    opened by e70838 0
  • Make Framerate independent

    Make Framerate independent

    Not sure I got everyone perfect but, the effects assumes 60fps. At least in Chrome on M1 Macs they run at 120fps so all the effects run too fast (unless that was the intent)

    One thing I didn't fix, at 120fps, effects that spawn particles spawn twice as many particles.

    Note: normally I'd compute deltaTime in seconds as in

    const deltaTime = (time - lastTime) / 1000

    But, all the calculations in the code assumed 60 fps so it seemed easier to pass in a 60fps clock, meaning, if the frame rate is 60fps then deltaTime will equal 1.0 and all the calculations will be the same. If fthe frame rate is 120fps then deltaTime will equal 0.5. If the frame rate is 30fps then deltaTime will equal 2.0.

    As for the limit, if the user changes tabs then requestAnimationFrame stop firing. When you get back deltaTime might be giant which could break calculations so the code limits the framerate to 10fps. Below that things will always run at 10fps. This is also useful for debugging because otherwise, stepping through the code, deltaTime would be giant.

    opened by greggman 0
  • Linux cursor does not match the default image

    Linux cursor does not match the default image

    I'm not sure if this is something that is possible to fix, but on different desktop environments the cursor looks different, and thus the static data string in the ghost and trailing cursors does not match.

    different default cursor example

    I haven't heard of any API or similar that can detect what the user's cursor looks like and duplicate into a datastring that you can use, but I wanted to open this in case anybody out there has and could recommend it.

    opened by ajmeese7 2
Releases(1.0.8)
Owner
Tim Holman
Tinkerer, tuner & tamperer.
Tim Holman
GitHub https://tholman.com/cursor-effects
magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox

Halo Lab 35 Nov 30, 2022
Playground for the fire effect from DOOM. Really simple algorithm and all experiments are welcome!

Doom Fire Algorithm Playground A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experim

Filipe Deschamps 1.3k Jan 2, 2023
:tada: Add a cute click effect to your mouse in your vuepress!

vuepress-plugin-cursor-effects ?? Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu

null 19 Sep 25, 2022
An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms

CSS Space Shooter Play The Game This is an experiment I made to investigate the capabilities of CSS 3D transforms. Having played about with this techn

Michael Bromley 162 Oct 2, 2022
A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

lindelof 92 Dec 17, 2022
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

Codrops 33 Sep 23, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
A set of playful dragging effects for images using various techniques.

Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t

Codrops 71 Dec 4, 2022
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Gaëtan Renaudeau 797 Nov 26, 2022
Simple styles and effects for enhancing text input interactions.

Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you

Codrops 966 Jan 4, 2023
Demonstration of different animation effects with AngularJS ngView directive.

ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you

Aliaksandr Astashenkau 184 Dec 31, 2022
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Codrops 1.4k Jan 4, 2023
A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Vincent Guo 252 Nov 11, 2022
A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Codrops 1.2k Jan 1, 2023
Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

Zach Saucier 97 Dec 8, 2022
Live input Web Audio effects

Live Audio Input effects I whipped this app up to test live audio input, letting the user select a few common tunable effects and see (and hear) the e

Chris Wilson 488 Dec 22, 2022
Some ideas for decorative link distortion effects using SVG filters.

Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De

Codrops 122 Dec 4, 2022
Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Codrops 197 Oct 16, 2022
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Akihiro Oyamada 68 Nov 28, 2022