React Dissolve

A color and image animated dissolve effect. (❁´◡`❁)

If you like my work, please buy me a coffee. []~(￣▽￣)~*

Live demo

Check out the Codesandbox live demo

Installation

Download it with npm

npm i react-dissolve

How to use

Import it to anywhere in your project.

import DissolveEffect from "react-dissolve";

<DissolveEffect
 width={500}
 height={500}
 color={"#40DECF"}
 style={{
 maxWidth: "100%",
 }}
/>

And BOOM! 🌟🌟🌟

Image is supported now!

Props 🍞

Prop	Type	Default	Description
animate	always|hover|none	always	When to animate
animateMobile	always|hover|none	none
breakpoint	number	768	The breackpoint(in px) for mobile
className	string	undefined	Class name
src	string	underfined	Specifies the path to the image
color	string	#40DECF	The color of the effect
debug	boolean	false	Debug mode will show some indicators of the effect
fade.innerEffect	boolean	false	Apply the dissolve effect within the inner circle
fade.innerEdge	number	0	A inner circle where the dissolve effect start to fade
fade.outerEdge	number	1	A outer circle where the dissolve effect end
fade.offset	{x: number, y: number}	{x: 0, y: 0}	Offset of the center
fade.ease	linear|easeIn|easeOut|easeInOut	linear	Ease the fading
frameRate	number	30	Frame rate of the effect\n can only update it on start
handle	boolean	false	Toggle the handle so you can change most of the value runtime
height	number	undefined (required)	The height of the canvas
softenShape	boolean	false	Soften the shape of the effect
style	React.CSSProperties	undefined	CSS Properties
threshold	number	0.5	Threshold of the dissolve effect
width	number	undefined (required)	The widht of the canvas
zoom	number	40	Zoom in/out to scale up/down the shape