Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
houdini-clouds
Advanced tools
A CSS Houdini PaintWorklet to fill a background with clouds, and an experiment in deterministic RNG for Houdini worklets.
☁ Demo (requires a client with PaintWorklet support)
Many Houdini worklets use Math.random()
e.g. for generating noise. Subsequent paints therefore alter the generated image dramatically. This can be a neat effect, but also jarring. Houdini Clouds instead uses a simple random number generator based on C++11's minstd_rand0
, seeded with a configurable static value. Subsequent paints therefore have a more predictable result.
Load the worklet:
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('https://unpkg.com/houdini-clouds/worklet.js');
}
Apply it in CSS:
.element {
background-image: paint(clouds);
}
Custom properties allow you to alter the appearance of the generated clouds:
.element {
--cloud-hue: 210;
--cloud-saturation: 100;
--cloud-lightness: 100;
--cloud-width: 200;
--cloud-density: 1;
--cloud-seed: 7;
background-image: paint(circles);
}
Property | Default | Description |
---|---|---|
--cloud-hue | 210 | Hue of clouds |
--cloud-saturation | 100 | Saturation of clouds |
--cloud-lightness | 100 | Max lightness of clouds |
--cloud-width | 200 | Max width of clouds in CSS pixels |
--cloud-density | 1 | Multiplier to adjust number of clouds |
--cloud-seed | 7 | Default seed for RNG |
You can play with the demo at https://redopop.com/houdini-clouds or clone this repo and npm run demo
to try it locally.
❤️⛅
FAQs
A Houdini PaintWorklet to draw background clouds.
The npm package houdini-clouds receives a total of 1 weekly downloads. As such, houdini-clouds popularity was classified as not popular.
We found that houdini-clouds demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.