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;

| Parameter | Type | Description | | :------------------ | :------- | :-------------------------------------------------------------------------------------------------------------------------- | | img_64 | string | Required. Base64 encoded string representing the image. | | pixelGap | number | Gap between each particle. Default is 4. | | pixelSize | number | Size of each particle. Default is 4. | | pixelFriction | number | Friction applied to particles' movement. Default is 0.98. | | pixelEase | number | Ease applied to particles' movement. Default is 0.8. | | mouseCircleRadius | number | Radius of the mouse circle interaction. Default is 1000. | | classNames | object | Object containing custom class names for canvas and image elements. | | imgPositionX | string | Horizontal position of the image within the canvas. Default is middle. Possible values are left, middle, and right. | | imgPositionY | string | Vertical position of the image within the canvas. Default is middle. Possible values are top, middle, and bottom. |

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