https://github.com/lbebber/HeatDistortionEffect

Animated haze distortion effect for images and text, with WebGL.
https://github.com/lbebber/HeatDistortionEffect

Last synced: about 1 month ago
JSON representation

Animated haze distortion effect for images and text, with WebGL.

• Host: GitHub
• URL: https://github.com/lbebber/HeatDistortionEffect
• Owner: lbebber
• Created: 2016-05-11T02:53:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-05-11T12:31:59.000Z (over 8 years ago)
• Last Synced: 2024-08-02T12:23:19.530Z (4 months ago)
• Language: JavaScript
• Size: 1.31 MB
• Stars: 297
• Watchers: 9
• Forks: 66
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-web-effect - HeatDistortionEffect - Animated haze distortion effect for images and text, with WebGL (🚀 A series of exquisite and compact web page cool effects / Image Effect)
• awesome-web-effect - HeatDistortionEffect - Animated haze distortion effect for images and text, with WebGL (🚀 A series of exquisite and compact web page cool effects / Image Effect)

README

        
# Animated Heat Distortion Effects with WebGL

A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text. By Lucas Bebber.

[Article on Codrops](http://tympanus.net/codrops/?p=26950)

[Demo](http://tympanus.net/Tutorials/HeatDistortionEffect/)

## Installing

First, you'll need [node.js](https://nodejs.org/), which includes `npm`. Then, open the project folder on the terminal and run:

`$ npm i`

## Building and running

### Building

`$ npm run build`

### Watching

`$ npm run watch`

### Running

`$ npm run start`

Then open `http://localhost:8080/demo`.

### Watching & Running

`$ npm run start-dev`

...and when you're done...

`$ npm run stop-dev`

## License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 

Read more here: [License](http://tympanus.net/codrops/licensing/)

## Misc

Follow Lucas: [Twitter](http://twitter.com/lucasbebber), [Dribbble](https://dribbble.com/lbebber), [Flickr](https://www.flickr.com/lbebber)

Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/)

[© Codrops 2016](http://www.codrops.com)