Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-starry-sky
A simple component library to create a container with an animated background.
https://github.com/omnedia/ngx-starry-sky
Last synced: about 1 month ago
JSON representation
A simple component library to create a container with an animated background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-starry-sky
- Owner: omnedia
- License: mit
- Created: 2024-08-20T13:42:22.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-09-25T09:03:29.000Z (4 months ago)
- Last Synced: 2024-11-18T09:26:34.072Z (about 2 months ago)
- Language: TypeScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-starry-sky (⭐0) - An Angular library that creates a beautiful starry sky background with optional shooting star effects. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-starry-sky - An Angular library that creates a beautiful starry sky background with optional shooting star effects. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-starry-sky - An Angular library that creates a beautiful starry sky background with optional shooting star effects. (Table of contents / Third Party Components)
README
# 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
- Realistic starry sky background with twinkling stars.
- Configurable shooting star effects, including speed, color, and frequency.
- Fully customizable star density, twinkle behavior, and sky color.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-starry-sky
```
## Usage
Import the `NgxStarrySkyComponent` in your Angular module or component:
```typescript
import { NgxStarrySkyComponent } from '@omnedia/ngx-starry-sky';
@Component({
...
imports: [
...
NgxStarrySkyComponent,
],
...
})
```
Use the component in your template:
```html
Your content here
```
## API
```html
```
- `skyColor` (optional): The background color of the sky. Accepts any valid CSS color value.
- `starsBackgroundConfig` (optional): Configuration object for the starry background, including star density, twinkle behavior, and twinkle speed.
- `shootingStarsConfig` (optional): Configuration object for the shooting stars, including speed, color, and frequency.
- `disableShootingStars` (optional): A boolean to enable or disable shooting stars. Defaults to false.
- `styleClass` (optional): A custom CSS class to apply to the starry sky container.
## Configuration Options
### `starsBackgroundConfig`
- `starDensity`: The density of stars in the sky, affecting how many stars are rendered. Defaults to 0.00015.
- `allStarsTwinkle`: A boolean to enable or disable twinkling for all stars. Defaults to true.
- `twinkleProbability`: The probability that a star will twinkle if allStarsTwinkle is false. Defaults to 0.7.
- `minTwinkleSpeed`: The minimum speed of the twinkling effect. Defaults to 0.5.
- `maxTwinkleSpeed`: The maximum speed of the twinkling effect. Defaults to 1.
### `shootingStarsConfig`
- `minSpeed`: The minimum speed of the shooting stars. Defaults to 10.
- `maxSpeed`: The maximum speed of the shooting stars. Defaults to 30.
- `minDelay`: The minimum delay between shooting stars in milliseconds. Defaults to 1200ms.
- `maxDelay`: The maximum delay between shooting stars in milliseconds. Defaults to 4200ms.
- `starColor`: The color of the shooting stars. Defaults to #9E00FF.
- `trailColor`: The color of the trail left by the shooting stars. Defaults to #2EB9DF.
- `starWidth`: The width of the shooting stars. Defaults to 10px.
- `starHeight`: The height of the shooting stars. Defaults to 1px.
## Example
```html
Magical Night 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.
```css
.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.