https://github.com/sr-tamim/react-motion-particles

A React component library for creating interactive motion particles effects based on mouse movements or device movement.
https://github.com/sr-tamim/react-motion-particles

motion-particles mousemove particlesjs react react-motion react-motion-particles reactjs wensyve

Last synced: about 18 hours ago
JSON representation

A React component library for creating interactive motion particles effects based on mouse movements or device movement.

• Host: GitHub
• URL: https://github.com/sr-tamim/react-motion-particles
• Owner: sr-tamim
• License: mit
• Created: 2024-01-06T12:54:42.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-01T17:16:06.000Z (12 months ago)
• Last Synced: 2024-12-31T19:46:38.256Z (17 days ago)
• Topics: motion-particles, mousemove, particlesjs, react, react-motion, react-motion-particles, reactjs, wensyve
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@wensyve/react-motion-particles
• Size: 13.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @wensyve/react-motion-particles

A React component library for creating interactive motion particles effects based on mouse movements or device movement.

## Installation

You can install this package using npm or yarn:

```sh

npm install @wensyve/react-motion-particles

```

```sh

yarn add @wensyve/react-motion-particles

```

## Usage

First, import the `MotionParticlesContainer` and `MotionParticle` components:

```js

import { MotionParticlesContainer, MotionParticle } from '@wensyve/react-motion-particles';

```

Then, wrap the `MotionParticle` components with the `MotionParticlesContainer` component:

```js

    

        
{/* Your content */}

    

    

        
{/* Your content */}

    


```

Each `MotionParticle` child of `MotionParticlesContainer` will move based on mouse movements or device movement. The `motionSpeed` prop determines the speed of the movement. The higher the value, the faster the movement.

Negative `motionSpeed` values will move the MotionParticle in the opposite direction of the mouse movement or device movement.

You can also use the `MotionParticlesContainer` at the root of your react app and then you can use the `MotionParticle` component anywhere in your app.

```js

// App.js file

import React from 'react';

import MotionParticlesContainer from '@wensyve/react-motion-particles';

function App() {

    return (

        

            


                {/* Your content */}

            

        

    );

}


export default App;

```

```js

// SomeOtherComponent.js file

import React from 'react';

import { MotionParticle } from '@wensyve/react-motion-particles';

function SomeOtherComponent() {

    return (

        


            

                
{/* Your content */}

            

            

                
{/* Your content */}

            

        

    );

}

```


## Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.

## License

[MIT](https://choosealicense.com/licenses/mit/)

## Author

[![sr-tamim's Profilator](https://profilator.deno.dev/sr-tamim?v=1.0.0.alpha.4)](https://github.com/sr-tamim)

## Contributors

![Contributors](https://contrib.rocks/image?repo=sr-tamim/react-motion-particles)

#### Powered by [WENSYVE](https://wensyve.com)