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.

NPM

Install with npm:

npm i --save image-refractor

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

import 'image-refractor';

CDN

Alternatively just load it from a CDN as follows:

<script src="https://unpkg.com/image-refractor/dist/image-refractor.js"></script>

Usage

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

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

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.