houdini-noise

A CSS Houdini Worklet to paint HSL powered background noise.

Getting started

1. Load the worklet

Using CDN is the easiest way to add the library:

if('paintWorklet'inCSS){
CSS.paintWorklet.addModule('https://unpkg /houdini-noise/dist/worklet.js');
}

You can use the polyfill

To add support for all moder browsers, you can load the worklet withcss-paint-polyfillfallback.

<script>
;(asyncfunction(){
if(CSS['paintWorklet']===undefined)
awaitimport('https://unpkg /css-paint-polyfill')

CSS.paintWorklet.addModule('https://unpkg /houdini-noise/dist/worklet.js');
})()
</script>

2. Ready to use it in your CSS!

To useNoiseworklet you need define some custom properties with values and add the valuepaint(noise)onbackgroundproperty.

.element{
--noise:0;/* Entry point to animate noise */
--noise-cell-size:1;
--noise-hue:330;
--noise-saturation:100;
--noise-lightness:080;
background:paint(noise);
}

Property	Description	Default
--noise	Hack,use this property to animate noise. Animating the property triggers a repaint.	0
--noise-cell-size	Cell Size,use this to define the size of noise particles inpx	0
--noise-hue	Hue Range,use this to define a set hue or a hue range	0 0
--noise-saturation	Saturation Range,use this to define a set saturation or a saturation range	0 0
--noise-lightness	Lightness Range,use this to define a set lightness or a lightness range	0 0

Development

Run it locally!

npm i
make develop

License

MIT License

Copyright (c) 2020 jh3y