Home

Awesome

ngx-starry-sky

@omnedia/ngx-starry-sky is an Angular library that creates a beautiful starry sky background with optional shooting star effects. This component is fully customizable, allowing you to adjust the density of stars, the behavior of shooting stars, and the overall appearance of the sky.

Features

Installation

Install the library using npm:

npm install @omnedia/ngx-starry-sky

Usage

Import the NgxStarrySkyComponent in your Angular module or component:

import { NgxStarrySkyComponent } from '@omnedia/ngx-starry-sky';

@Component({
  ...
  imports: [
    ...
    NgxStarrySkyComponent,
  ],
  ...
})

Use the component in your template:

<om-starry-sky
  [skyColor]="'#0a0a0a'"
  [starsBackgroundConfig]="{
    starDensity: 0.0002,
    allStarsTwinkle: true,
    twinkleProbability: 0.8
  }"
  [shootingStarsConfig]="{
    minSpeed: 15,
    maxSpeed: 35,
    starColor: '#FFFFFF',
    trailColor: '#FF6347'
  }"
  styleClass="custom-starry-sky"
>
  <h1>Your content here</h1>
</om-starry-sky>

API

<om-starry-sky
  [skyColor]="skyColor"
  [starsBackgroundConfig]="starsBackgroundConfig"
  [shootingStarsConfig]="shootingStarsConfig"
  [disableShootingStars]="disableShootingStars"
  styleClass="your-custom-class"
>
  <ng-content></ng-content>
</om-starry-sky>

Configuration Options

starsBackgroundConfig

shootingStarsConfig

Example

<om-starry-sky
  [skyColor]="'#000022'"
  [starsBackgroundConfig]="{
    starDensity: 0.00025,
    twinkleProbability: 0.9,
    minTwinkleSpeed: 0.3,
    maxTwinkleSpeed: 0.7
  }"
  [shootingStarsConfig]="{
    minSpeed: 20,
    maxSpeed: 40,
    starColor: '#FFD700',
    trailColor: '#FF4500'
  }"
  styleClass="starry-sky-custom"
>
  <div class="content">Magical Night Sky</div>
</om-starry-sky>

This example creates a starry sky with higher star density, frequent twinkling, and golden shooting stars with a fiery trail.

Styling

To further customize the appearance of the starry sky or container, use the styleClass input to apply your own CSS classes.

.starry-sky-custom {
  position: relative;
  height: 100vh;
  background-color: #000022;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 50px;
}

This will create a fullscreen starry sky with custom content displayed on top.

Contributing

Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.

License

This project is licensed under the MIT License.