Image Refractor

A canvas-based web-component for applying animated water-like refraction effects to images.


:wave: Check out the demo

Getting Started

You can either install this package
with npm and import it into your JavaScript or TypeScript project or use it in a browser.

$3

Install with npm:

``bash
npm i --save image-refractor
`

Import into your project as follows in order to register the custom web-component:

`javascript
import 'image-refractor';
`

$3

Alternatively just load it from a CDN as follows:

`html

`

Usage

After importing the component, it can simply be used like any other HTML element:

`html
width="1000"
height="1000"
refract="1.333"
speed="0.03"
intensity="1.0"
src="https://domain.com/image.png"
>
`

Options

The component can be configured using the following attributes:

| Attribute | Description |
| ----------- | ----------------------------------------------------------------------------------------------------- |
| src | The texture image |
| width | The rendered image width in pixels. This describes the canvas resolution. |
| height | The rendered image height in pixels. Also here, the height is used to describe the canvas resolution. |
| refract | The refraction index that is used. |
| speed | The animation speed. Good values are between 0.01 and 0.1. |
| intensity` | The intensity of the underlaying noise. Higher values generate higher distortion. |

Check out the source of the demo page for some configuration examples.

Acknowledgements

Thanks to SuperHi for the great inspiration video and
Yi-Wen Lin for his fbm implementation.