image-to-particles v0.0.5

ImgToParticle Component

The ImgToParticle component is a React component designed to create a particle effect based on an input image. This README will guide you through the setup and usage of this component.

Installation

To use the ImgToParticle component in your project, you can install it via npm or yarn:

npm install @image-to-particles/ImgToParticles

or

yarn add @image-to-particles/ImgToParticles

Usage

Once installed, you can import and use the ImgToParticle component in your React application as follows:

import React from 'react';
import { ImgToParticles } from 'image-to-particles';

const App = () => {
  return (
    <div className='App'>
      <ImgToParticles img_64='your_image_base64_here' />
    </div>
  );
};

export default App;

Example

import React from 'react';
import { ImgToParticles } from 'image-to-particles';

const App = () => {
  return (
    <div className='App'>
      <ImgToParticles
        img_64='your_image_base64_here'
        pixelGap={5}
        pixelSize={3}
        pixelFriction={0.95}
        pixelEase={0.5}
        mouseCircleRadius={800}
        classNames={{ canvasClassName: 'custom-canvas-class', imgClassName: 'custom-img-class' }}
        imgPositionX='right'
        imgPositionY='bottom'
      />
    </div>
  );
};

export default App;

Notes

• Ensure that the provided image is base64 encoded (Here is a @converter).
• Adjust the props according to your desired particle effect and image positioning.
• You can customize the appearance of the canvas and image by providing custom class names via the classNames prop.

Author

• @asykoutris

🔗 Links

License

MIT