{"id":13547788,"url":"https://github.com/Ramotion/aquarelle","last_synced_at":"2025-04-02T20:30:52.853Z","repository":{"id":41162015,"uuid":"62564394","full_name":"Ramotion/aquarelle","owner":"Ramotion","description":":octocat: 🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion","archived":false,"fork":false,"pushed_at":"2019-10-20T16:55:31.000Z","size":10909,"stargazers_count":1806,"open_issues_count":7,"forks_count":106,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-03-25T09:07:05.970Z","etag":null,"topics":["javascript"],"latest_commit_sha":null,"homepage":"https://www.ramotion.com/agency/web-design/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ramotion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-04T13:30:24.000Z","updated_at":"2025-03-17T05:23:08.000Z","dependencies_parsed_at":"2022-07-14T08:49:23.807Z","dependency_job_id":null,"html_url":"https://github.com/Ramotion/aquarelle","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Faquarelle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Faquarelle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Faquarelle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Faquarelle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ramotion","download_url":"https://codeload.github.com/Ramotion/aquarelle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246477763,"owners_count":20784053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript"],"created_at":"2024-08-01T12:01:01.068Z","updated_at":"2025-04-02T20:30:47.838Z","avatar_url":"https://github.com/Ramotion.png","language":"JavaScript","funding_links":["https://paypal.me/Ramotion"],"categories":["🚀 A series of exquisite and compact web page cool effects","JavaScript","Frameworks/Libraries"],"sub_categories":["Other Effect","Graphics"],"readme":"[![Header](./header.png)](https://www.ramotion.com/agency/app-development?utm_source=gthb\u0026utm_medium=special\u0026utm_campaign=aquarelle)\n[![preview](./Screenshots/web__transition__effect_ramotion.gif)](https://ramotion.github.io/aquarelle/)\n\n# Aquarelle\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/a2d54fa890b84f538be1bc9349dc5121)](https://www.codacy.com/app/juri-v/aquarelle?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=Ramotion/aquarelle\u0026amp;utm_campaign=Badge_Grade)\n[![Bower](https://img.shields.io/bower/v/aquarelle.svg)]()\n[![Twitter](https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat)](http://twitter.com/Ramotion)\n[![Travis](https://img.shields.io/travis/Ramotion/aquarelle.svg)](https://travis-ci.org/Ramotion/aquarelle)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/Ramotion)\n\n\n## About\nThis project is maintained by Ramotion, Inc.\u003cbr\u003e\nWe specialize in the designing and coding of custom UI for Mobile Apps and Websites.\u003cbr\u003e\n\n**Looking for developers for your project?**\u003cbr\u003e\nThis project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.\n\n\u003ca href=\"https://dev.ramotion.com?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=aquarelle\"\u003e \n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png\" width=\"187\" height=\"34\"\u003e\u003c/a\u003e \u003cbr\u003e\n\n## Browser support\n\n* Chrome\n* Safari\n* Opera\n* Firefox\n* IE 11\n\n## Installation\n\n`bower install aquarelle`\n\nThen insert in your html:\n\n```html\n\u003cscript src=\"bower_components/three.js/build/three.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"bower_components/aquarelle/Aquarelle.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"bower_components/three.js/examples/js/postprocessing/EffectComposer.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"bower_components/three.js/examples/js/postprocessing/ClearPass.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/aquarelle/AquarellePass.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/three.js/examples/js/postprocessing/ShaderPass.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/three.js/examples/js/shaders/CopyShader.js\"\u003e\u003c/script\u003e\n```\n\n\n## API\n\n### Constructor\n\n`new Aquarelle(textureImage, maskImage[, options]);`\n\n| Names | Required | Type | Description\n| --- | --- | --- | ---\n| textureImage | `true` | `string`, `Image` or `\u003cimg\u003e` | background image\n| maskImage | `true` | `string`, `Image` or `\u003cimg\u003e` | background image mask\n| options | `false` | `object` | initial options\n\n### Options\n\n| Names | Defaults | Description\n| --- | --- | ---\n| fromAmplitude | `50` | initial noise amplitude value\n| toAmplitude | `0` | final noise amplitude value\n| fromFrequency | `8` | initial noise frequiency\n| toFrequency | `7` | final noise frequiency\n| fromOffset | `-30` | initial mask size\n| autoplay | `false` | `true` - start animation before first frame is being rendered\n| loop | `false` | `true` - repeat animation in loop\n| duration | `8000` | animation duration\n\n### Events\n\n| Names | Description\n| --- | ---\n| created | triggered before first frame is rendered\n| changed | triggered before rendering of a frame\n| completed | triggered before latest frame is rendered\n| started | triggered before animation is started\n| played | triggered after animation is started\n| paused | triggered before pause of animation\n| stopped | triggered before reset of animation\n\n### Methods\n\n| Names | Description\n| --- | ---\n| `pause()` | pause animation\n| `play()` | start animation\n| `stop()` | stop and reset animation\n| `start()` | start animation over\n| `reverse()` | reverse animation\n| `reset()` | re-render frame\n| `setOptions([object])` | set animation options\n| `transitionInRange(startValue, endValue[, startTimeMS[, endTimeMS]])` | return value between `startValue`..`endValue` in range `startTimeMS`..`endTimeMS`\n| `addEventListener(type, listener)` | add listener (`listener`) of event (`type`)\n| `removeEventListener(type, listener)` | remove (`listener`) of event (`type`)\n\n\n## Usage\n\n≈\n\n```javascript\nvar aquarelle = new Aquarelle(textureImage, maskImage[, options]);\n```\n\n##### Listeners\n\n```javascript\nfunction listener(event) {}\n\naquarelle.addEventListener('created', listener);\n\naquarelle.removeEventListener('created', listener);\n```\n##### Demos\n\n[Static demo](http://ramotion.github.io/aquarelle)\n\n[Dynamic demo](https://ramotion.github.io/aquarelle/example_scroll.html)\n\n## Licence\n\nAquarelle is released under the MIT license.\nSee [LICENSE](./LICENSE) for details.\n\n# Get the Showroom App for iOS to give it a try\nTry our UI components in our iOS app. Contact us if interested.\n\n\u003ca href=\"https://itunes.apple.com/app/apple-store/id1182360240?pt=550053\u0026ct=aquarelle\u0026mt=8\" \u003e \n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/app_store@2x.png\" width=\"117\" height=\"34\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.ramotion.com/agency/app-development?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=aquarelle\"\u003e \n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png\" width=\"187\" height=\"34\"\u003e\u003c/a\u003e\n\u003cbr\u003e\n\u003cbr\u003e\nFollow us for the latest updates \n\u003cbr\u003e\n\n\u003ca href=\"https://goo.gl/rPFpid\" \u003e\n\u003cimg src=\"https://i.imgur.com/ziSqeSo.png/\" width=\"156\" height=\"28\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRamotion%2Faquarelle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRamotion%2Faquarelle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRamotion%2Faquarelle/lists"}