Noise3000

Delicious film grain for the internet and beyond (in HD!)

🍒 VISIT THE PROJECT (MINI DEMO) WEBSITE

#2: ANOTHER DEMO: Noise in container

Why?

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

What?

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!

Usage

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
  });

Notes

• 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.

Say Hi!

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 ezekielaquino@gmail.com or via @the_ezekiel or Share this on Twitter!

P.S. Follow me on twitter!

License

This project is licensed under the MIT License - see the LICENSE.md file for details