# cursor_tracer 

**Repository Path**: SuperWindcloud/cursor_tracer

## Basic Information

- **Project Name**: cursor_tracer 
- **Description**: 有趣的鼠标拖尾特效 , JS 实现
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-15
- **Last Updated**: 2025-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#   interesting cursor tail effects 


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

 
# How to Use
```sh
npm install cursor-effects
```

```js
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`

```js
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.

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

### fairyDustCursor

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

```js
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),
and delay between emoji with the `delay` option (defaults to `16`)

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

### textFlag

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

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

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

```js
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)

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

### characterCursor

Consider 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)
```js
new cursoreffects.characterCursor({ 
    element: document.querySelector("#character"), 
    characters: ["h", "e", "l", "l", "o"],
    font: "15px serif",
    colors: [
        "#6622CC",
        "#A755C2",
        "#B07C9E",
        "#B59194",
        "#D2A1B8",
    ],
    characterLifeSpanFunction: function() {
        return Math.floor(Math.random() * 60 + 80);
    },
    initialCharacterVelocityFunction: function() {
        return {
            x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 5,
            y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 5,
        }
    },
    characterVelocityChangeFunctions: {
      x_func: function(age, lifeSpan) {
        return (Math.random() < 0.5 ? -1 : 1)/30;
      },
      y_func: function(age, lifeSpan) {
        return (Math.random() < 0.5 ? -1 : 1)/ 15;
      },
    },
    characterScalingFunction: function(age, lifeSpan) {
        let lifeLeft = lifeSpan - age;
        return Math.max(lifeLeft / lifeSpan * 2, 0);
    },
    characterNewRotationDegreesFunction: function(age, lifeSpan) {
        let lifeLeft = lifeSpan - age;
        console.log(age, lifeSpan);
        return lifeLeft / 5;
    }
})
```