react-liquid-image

An aesthetic component that turns an image into a particlized version with an interactive liquid effect on mouseOver. Inspired and adapted from the homepage of https://frontendexpert.io/.

Supports customization such as

1. Particle size
2. Particle gap
3. Particle shape (square, circle)
4. Noise (particle resting movement)
5. Push magnitude (on mouseOver)

Usage

1. npm install react-liquid-image
2. import { LiquidImage } from react-liquid-image
3. use with <LiquidImage /> in your React app

Demo

Coming soon

Props

| Prop Name | Description | Type | Default | | ------------ | ------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ---------- | | img | Image source | string | null | | width | Width of resulting particlized image that is drawn | Number | 500 | | height | Width of resulting particlized image that is drawn | Number | 300 | | canvasWidth | Width of the canvas to draw the particlized image on | Number | 800 | | canvasHeight | Width of the canvas to draw the particlized image on | Number | 400 | | noise | How much each particle jiggles when resting (set to 0 for stationary particles at rest) | Number | 0.8 | | gap | Gap between each particle | Number | 5 | | particleType | Shape of each particle | "square" \| "circle" | "square" | | particleSize | Size of each particle | Number | 3 | | threshold | RGB values of pixels to not consider when particlizing the image. 0 will include all pixels, 256 will exclude all pixels | Number | 60 | | push | Amount that each particle is pushed aside on mouseOver | Number | 1/60 |

FAQ

Q. My image is very slow

A: Reduce the number of particles being rendered on the canvas. This can be done through some combination of increasing threshold, gap, particleSize, or decreasing width, height