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 | | The same as animate but only apply on mobile devices | | 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 |