Delicious film grain for the internet and beyond (in HD!)
๐ VISIT THE PROJECT (MINI DEMO) WEBSITE
#2: ANOTHER DEMO: Noise in container
Because Why Notโข? Sometimes grain can be good. Get that paper, film, tangible feels pain-free and performant.
๐ ๐พ THE PROJECT SITE IS A MINI DEMO
#2: ANOTHER DEMO: Noise in container
Noise3000 basically creates a noisy
element and is added either to the page or to a specified container. The grain is then animated via requestAnimationFrame using 3D transforms. Everything you need is contained in this ~8kb minified package, only thing you need to do is plop it in!
Download or npm install noise3000
then simply call Noise3k
like below: (you can also pass in a few options)
Noise3k({
container: '#element', // (optional || default: document.body) specify where the noise is applied
grainSize: 1, // (optional || default: 1) Multiplier for the grain size
});
- Play around with the grainSize to achieve your desired result.
- Different colors react differently with the grain. I've found that highly saturated colors tend to make the grain less visible. I'm still experimenting on which type of noise is best.
Did you use NOISE3000 on something? Did you get noisy? So noisy! If yes, do let me see what you've made! Drop me a line at [email protected] or via @the_ezekiel or Share this on Twitter!
P.S. Follow me on twitter!
This project is licensed under the MIT License - see the LICENSE.md file for details