0.1.1 • Published 6 months ago
image-refractor v0.1.1
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-refractorImport 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.