Fork me on GitHub

Alex Rupérez

Published: 28 Mar 12:09
I starred Ramotion/aquarelle at GitHub.
:octocat: 🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion
View on GitHub


Header preview


Codacy Badge Bower Twitter Travis Donate


This project is maintained by Ramotion, Inc.
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Browser support

  • Chrome
  • Safari
  • Opera
  • Firefox
  • IE 11


bower install aquarelle

Then insert in your html:

<script src="bower_components/three.js/build/three.js"></script>

<script src="bower_components/aquarelle/Aquarelle.js"></script>

<script src="bower_components/three.js/examples/js/postprocessing/EffectComposer.js"></script>

<script src="bower_components/three.js/examples/js/postprocessing/ClearPass.js"></script>
<script src="bower_components/aquarelle/AquarellePass.js"></script>
<script src="bower_components/three.js/examples/js/postprocessing/ShaderPass.js"></script>
<script src="bower_components/three.js/examples/js/shaders/CopyShader.js"></script>



new Aquarelle(textureImage, maskImage[, options]);

Names Required Type Description
textureImage true string, Image or <img> background image
maskImage true string, Image or <img> background image mask
options false object initial options


Names Defaults Description
fromAmplitude 50 initial noise amplitude value
toAmplitude 0 final noise amplitude value
fromFrequency 8 initial noise frequiency
toFrequency 7 final noise frequiency
fromOffset -30 initial mask size
autoplay false true - start animation before first frame is being rendered
loop false true - repeat animation in loop
duration 8000 animation duration


Names Description
created triggered before first frame is rendered
changed triggered before rendering of a frame
completed triggered before latest frame is rendered
started triggered before animation is started
played triggered after animation is started
paused triggered before pause of animation
stopped triggered before reset of animation


Names Description
pause() pause animation
play() start animation
stop() stop and reset animation
start() start animation over
reverse() reverse animation
reset() re-render frame
setOptions([object]) set animation options
transitionInRange(startValue, endValue[, startTimeMS[, endTimeMS]]) return value between startValue..endValue in range startTimeMS..endTimeMS
addEventListener(type, listener) add listener (listener) of event (type)
removeEventListener(type, listener) remove (listener) of event (type)


var aquarelle = new Aquarelle(textureImage, maskImage[, options]);
function listener(event) {}

aquarelle.addEventListener('created', listener);

aquarelle.removeEventListener('created', listener);

Static demo

Dynamic demo


Aquarelle is released under the MIT license. See LICENSE for details.

Get the Showroom App for iOS to give it a try

Try our UI components in our iOS app. Contact us if interested.

Follow us for the latest updates