@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:
npm install @wensyve/react-motion-particlesyarn add @wensyve/react-motion-particlesUsage
First, import the MotionParticlesContainer and MotionParticle components:
import { MotionParticlesContainer, MotionParticle } from '@wensyve/react-motion-particles';Then, wrap the MotionParticle components with the MotionParticlesContainer component:
<MotionParticlesContainer>
<MotionParticle motionSpeed={2.5}>
<div>{/* Your content */}</div>
</MotionParticle>
<MotionParticle motionSpeed={1}>
<div>{/* Your content */}</div>
</MotionParticle>
</MotionParticlesContainer>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.
// App.js file
import React from 'react';
import MotionParticlesContainer from '@wensyve/react-motion-particles';
function App() {
return (
<MotionParticlesContainer>
<div className="app">
{/* Your content */}
</div>
</MotionParticlesContainer>
);
}
export default App;// SomeOtherComponent.js file
import React from 'react';
import { MotionParticle } from '@wensyve/react-motion-particles';
function SomeOtherComponent() {
return (
<div>
<MotionParticle motionSpeed={2.5}>
<div>{/* Your content */}</div>
</MotionParticle>
<MotionParticle motionSpeed={1}>
<div>{/* Your content */}</div>
</MotionParticle>
</div>
);
}Contributing
Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.