Skip to content

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

License

Notifications You must be signed in to change notification settings

sr-tamim/react-motion-particles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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-particles
yarn add @wensyve/react-motion-particles

Usage

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.

License

MIT

Author

sr-tamim's Profilator

Contributors

Contributors

Powered by WENSYVE