Skip to content
🖱️ A npm package that allows the user to easily implement motion blur on their mouse cursor.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Added the package files Mar 24, 2020
src Added the package files Mar 24, 2020
.DS_Store Added the package files Mar 24, 2020
.babelrc Added the package files Mar 24, 2020
.gitignore Added the package files Mar 24, 2020
.npmignore Added the package files Mar 24, 2020
README.md Update README.md Mar 26, 2020
package-lock.json Added the package files Mar 24, 2020
package.json Added keywords Mar 24, 2020
webpack.config.js Added the package files Mar 24, 2020

README.md

React-Mouse-Blur 🖱️

A npm package that provides a quick and easy implementation for cursor motion blur

📹 Video

https://www.youtube.com/watch?v=g322U64oSlI

📦 Installation

# with npm
npm install react-mouse-blur

# with yarn
yarn add react-mouse-blur

🔨 Usage

import React, { useRef } from 'react';
import CursorBlur from 'react-mouse-blur';
import './App.css';
import cursor from './autocursor.png';

function App() {
  const intensity1 = useRef(null);
  const intensity2 = useRef(null);
  const intensity3 = useRef(null);
  const intensity4 = useRef(null);
  const transparencyOff = useRef(null);


  return (
    <div className="main">
      <CursorBlur intensity={1} transparency={true} image={cursor} canvas={intensity1} />
      <CursorBlur intensity={2} transparency={true} image={cursor} canvas={intensity2} />
      <CursorBlur intensity={3} transparency={true} image={cursor} canvas={intensity3} />
      <CursorBlur intensity={4} transparency={true} image={cursor} canvas={intensity4} />
      <CursorBlur transparency={false} image={cursor} canvas={transparencyOff} />

      <div className="content">
        <div className="box1" ref={intensity1}> Cursor Blur Intensity 1 </div>
        <div className="box1" ref={intensity2}> Cursor Blur Intensity 2 </div>
        <div className="box1" ref={intensity3}> Cursor Blur Intensity 3 </div>
        <div className="box1" ref={intensity4}> Cursor Blur Intensity 4 </div>
        <div className="box1" ref={transparencyOff}> Cursor Blur No Transparency </div>
        <div className="box1"> No Cursor Blur</div>
      </div>
    </div>
  );
}

export default App;
The intensity prop accepts an int and has levels 1, 2, 3, 4. It determines how powerful the motion blur should be.

The transparency prop accepts a boolean determines if the opacity of the trailing cursor changes.

The image prop determines the image of the trailing cursor.

The canvas prop accepts a ref and determines the area over which the motion blur should occur.

Tips

  • Always make sure that the CursorBlur component is above the canvas component that you are using.

    • This is seen in the usage example above.
  • For the main cursor image and the CursorBlur image to match, you have to set the cursor to be the same as the img prop. This can be done in index.css.

    • index.css
      body {
        cursor: url("./autocursor.png"), auto;
      }
  • If you set the transparency prop to false, then there is no need to set an intensity.

    • This is the case as opacity is not changing.
You can’t perform that action at this time.