🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

Related tags

Effect javascript
Overview

Header preview

Aquarelle

Codacy Badge Bower Twitter Travis Donate

About

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

Installation

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>

API

Constructor

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

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

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

Events

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

Methods

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)

Usage

≈

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

aquarelle.addEventListener('created', listener);

aquarelle.removeEventListener('created', listener);
Demos

Static demo

Dynamic demo

Licence

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
Comments
  • Add git tags

    Add git tags

    Hi @Juriv, We are cdnjs team.we're going to host this library. The git auto-update in cdnjs relies on git tags so that it can recognized the correct version and automatically update this repo. Could you please add git tags for the repo? Thank you.

    https://github.com/cdnjs/cdnjs/issues/10310

    opened by honestree 1
  • Please release on npm

    Please release on npm

    I saw in the thread on Product Hunt that you would consider packaging this for release on npm if enough users asked you to. I propose we use this issue to measure user interest in an npm package.

    opened by lewiscowper 1
  • Issue running examples

    Issue running examples

    Cloned the latest, and tried to run the example. Added the CDNs, installed the bower folder in the directory, but I get the following errors:

    Uncaught TypeError: aquarelle.addEventListener is not a function at index.html:139:15

    Aquarelle.js:103 Uncaught TypeError: d3.geom.contour is not a function at Aquarelle.drawMaskImage (Aquarelle.js:103:35) at Image.Aquarelle.self.mask.img.onload (Aquarelle.js:24:22)

    The problem in examples/index.html is here:

    var aquarelle = new Aquarelle(image, 'img/mask.png', {
    autoplay: true,
    loop: true
});

aquarelle.addEventListener('created', function() {
    var canvas = this.getCanvas();
    canvas.removeAttribute('style');
    image.parentNode.insertBefore(canvas, image.nextSibling);
    image.parentNode.removeChild(image);
});

    Using VSCODE Go-Live, macos, installed bower with brew. Thoughts? Thanks for looking!

    opened by bxuserx 0
  • Update Render

    Update Render

    Fix this warning when render() method is called: THREE.WebGLRenderer.render(): the renderTarget argument has been removed. Use .setRenderTarget() instead.

    opened by yudakan 0
  • Scattering

    Scattering

    Hello, the first time I took a look at this js it was awesome, now the static demo is scattering is there any issue? I was thinking on using it on one of my projects. Thanks,F.

    opened by ghost 0
  • Performance impact

    Performance impact

    Hello,

    Loving this effect!

    However i'm noticing a dramatic impact on performance in my site. I just need to use it for the beginning intro, the effect is then removed and it is not needed again.

    Despite removing the canvas and the animation having finished, performance of the whole site is permanently reduced. If I reload without this effect performance returns to its normal state.

    For reference the canvas and relevant images are inside a React element (though the same is occurring when they're not) and the project is using Ruby on Rails. When i say removing the effect I am calling

    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode) from inside the react element containing the canvas and aquarelle object. Thus the canvas is removed from the DOM.

    Is there a way to use the aquarelle effect for the beginning and then completely remove it from memory? That is close any Three.js items, clear everything and effectively return the site to a state if the effect had never been run?

    Thanks

    opened by BenEaston 3
Owner
Ramotion
UI Engineering, UI/UX Design and Front-End Development Agency
Ramotion
GitHub https://www.ramotion.com/agency/web-design/
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

lindelof 92 Dec 17, 2022
A-Frame Rainfall effect component

A-Frame Rain component aframe-rain is Rainfall effect component for A-Frame which displays a lot of rain drop/splash objects by using instancing techn

Takahiro 39 Dec 19, 2021
A Snow Effect component for React.

react-snowstorm A Snow Effect component for React. Uses Snowstorm under the hood. Live Demo : http://burakcan.github.io/react-snowstorm Getting Starte

Burak Can 225 Aug 31, 2022
Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Mark Rolich 808 Dec 18, 2022
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In

Yasunobu Ikeda 96 Dec 24, 2022
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

Ciaran Walsh 1.8k Dec 21, 2022
⌨️ A tiny library for creating a typing effect on specified text element.

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element. Demo Size (It's really tiny) Minimized: 2.9KB Gziped: 1.1KB Inst

Korney Vasilchenko 175 Sep 29, 2021
A simple yet powerful native javascript plugin for a cool typewriter effect.

TypewriterJS v2 NPM Repository JSFiddle Example Emoji Example CDN You can use the CDN version of this plugin for fast and easy setup. <script src="htt

Tameem Safi 1.8k Jan 4, 2023
:keyboard: Simulate a typewriter effect in vanilla JavaScript.

malarkey Simulate a typewriter effect in vanilla JavaScript. Flexible API allowing granular control Option to repeat the sequence indefinitely Allows

Yuan Qing Lim 237 Nov 18, 2022
Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.

/** * DHTML Snowstorm! JavaScript-based Snow for web pages * -------------------------------------------------------- * Version 1.44.20131208 (Prev

Scott Schiller 518 Dec 24, 2022
Small but good javascript smoke effect 🌬💨

Demo You can play with a live demo here → Installation Basic Copy the smoke.js file into your project and use it with a script tag: <script src="smoke

Guillermo Webster 239 Dec 28, 2022
Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped

pickout Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE For syntax of the previous version click here How to

Alan Ktquez 89 Sep 20, 2022
Javascript Sound Effect Generator

This is a JavaScript library for sound effect generation and is supported on most current browsers. Generation speed is approximately 1s audio = 10ms

Loov 567 Oct 31, 2022
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022
Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage <div class="box"> <p>Lorem ip

rewish 195 Dec 30, 2022