https://github.com/5t3ph/houdini-cosmic-starfield

Generate a dynamic cosmic starfield with optional cosmic clouds and customizable gradient.
https://github.com/5t3ph/houdini-cosmic-starfield

css css-houdini houdini-css-paint

Last synced: 15 days ago
JSON representation

Generate a dynamic cosmic starfield with optional cosmic clouds and customizable gradient.

• Host: GitHub
• URL: https://github.com/5t3ph/houdini-cosmic-starfield
• Owner: 5t3ph
• Created: 2021-09-26T15:47:51.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-26T21:37:24.000Z (about 3 years ago)
• Last Synced: 2024-11-19T04:28:31.474Z (about 1 month ago)
• Topics: css, css-houdini, houdini-css-paint
• Language: JavaScript
• Homepage: https://codepen.io/5t3ph/pen/RwgqVZO
• Size: 4.6 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![preview of the effect showing a linear gradient from top to bottom of nearly black, dark purple, and a purpley navy, over top of which are many small dots in varying sizes and opacity, then a cloud like effect, and final the words Hello World](preview.png)

# CSS Houdini Cosmic Starfield

> From Stephanie Eckles [@5t3ph](https://twitter.com/5t3ph) - author of [ModernCSS.dev](https://moderncss.dev).

Generate a dynamic cosmic starfield with optional cosmic clouds and customizable gradient.

**[Preview on CodePen](https://codepen.io/5t3ph/pen/RwgqVZO)**

## How to Use

While Houdini paint worklets have the best support out of available Houdini features, they still currently require a polyfill to ensure they are applied cross browser.

So, first include the following once in your project.

```html

```

> Note: The polyfill will not work if the worklet is applied to pseudo elements, and _may_ have issues with customization when applied to the `body` element.

Then, include the paint worklet script _after_ the polyfill is loaded:

```html

  CSS.paintWorklet.addModule("https://unpkg.com/houdini-cosmic-starfield");

  // Trickery to get the polyfill to draw the worklet in Firefox and Safari

  setTimeout(() => {

    document.querySelector("ANCESTOR_ELEMENT").style.width = "100.01%";

    document.querySelector("ANCESTOR_ELEMENT").style.width = "100%";

  }, 500);

```

Finally, use it in your styles! For best results, assign as the `background-image` to a dedicated element.

```css

.cosmic-starfield-element {

  /* Number of stars */

  --cosmic-starfield-stars: 4280;

  /* 'true' or do not include to hide the clouds */

  --cosmic-starfield-clouds: true;

  /* String array of at least two hex codes */

  --cosmic-starfield-gradient-colors: #471f60, #231b6e;

  /* Use the worklet! */

  background-image: paint(cosmic-starfield);

}

```

> `!important` - provided gradient colors must be in hex format.

## What is CSS Houdini?

Check out other Houdini paint worklets and more info at [Houdini.How](https://houdini.how).