https://github.com/jh3y/houdini-noise
CSS Houdini PaintWorklet for background noise
https://github.com/jh3y/houdini-noise
css csshoudini houdini worklet
Last synced: 5 months ago
JSON representation
CSS Houdini PaintWorklet for background noise
- Host: GitHub
- URL: https://github.com/jh3y/houdini-noise
- Owner: jh3y
- Created: 2020-12-13T17:23:49.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-14T22:13:30.000Z (almost 5 years ago)
- Last Synced: 2025-04-25T15:58:56.447Z (6 months ago)
- Topics: css, csshoudini, houdini, worklet
- Language: JavaScript
- Homepage: https://codepen.io/jh3y/pen/LYRxQrQ
- Size: 62.5 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```js
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('https://unpkg.com/houdini-noise/dist/worklet.js');
}
```
#### You can use the polyfill
To add support for all moder browsers, you can load the worklet with [css-paint-polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill) fallback.
```html
;(async function() {
if (CSS['paintWorklet'] === undefined)
await import('https://unpkg.com/css-paint-polyfill')
CSS.paintWorklet.addModule('https://unpkg.com/houdini-noise/dist/worklet.js');
})()
```
### 2. Ready to use it in your CSS!
To use **Noise** worklet you need define some custom properties with values and add the value `paint(noise)` on `background` property.
```css
.element {
--noise: 0; /* Entry point to animate noise */
--noise-cell-size: 1;
--noise-hue: 330;
--noise-saturation: 100;
--noise-lightness: 0 80;
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 in `px` | `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