https://github.com/leonkohli/interactive-particle-network

Interactive Starry Background: An immersive, dynamic starfield experience for your web project. Powered by vanilla JavaScript, perfect for engaging user interfaces.
https://github.com/leonkohli/interactive-particle-network

html javascript star ui ux

Last synced: 16 days ago
JSON representation

Interactive Starry Background: An immersive, dynamic starfield experience for your web project. Powered by vanilla JavaScript, perfect for engaging user interfaces.

• Host: GitHub
• URL: https://github.com/leonkohli/interactive-particle-network
• Owner: LeonKohli
• License: mit
• Created: 2023-07-20T15:19:54.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-06T17:25:56.000Z (over 1 year ago)
• Last Synced: 2025-01-09T17:12:47.601Z (17 days ago)
• Topics: html, javascript, star, ui, ux
• Language: JavaScript
• Homepage:
• Size: 8.5 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# ✨ Interactive Particle Network 🚀🌌



  

    

  

  

    

  

  

    

  

  

    

  



🌌 **Welcome to the Interactive Starry Background**! This project transforms your browser into a universe, complete with a dynamically evolving star field. Explore constellations that shift and interconnect as your cursor moves - an interactive, ever-changing celestial spectacle. 🌠

## ⚡ Live Demo

Experience the interactive starry background [here](https://codepen.io/LeonKohli/pen/poQKLOL).



  



## 🌟 Features

- **👐 Interactive**: The stars are at your command. Move your cursor and witness constellations form and follow!

- **🎲 Dynamically Generated**: Every refresh greets you with a unique constellation pattern.

- **📐 Responsive**: Perfectly adapts to any window size for a seamless visual experience.

- **🔨 Pure JavaScript**: No dependencies. Just plain JavaScript.

## 🚀 Getting Started

1. Clone the repository:

   ```sh

   git clone https://github.com/LeonKohli/interactive-particle-network.git

   ```

2. Open the `index.html` file in your web browser.

## 🛠️ Usage

Feel free to incorporate this interactive background into your own projects. Whether it's a personal portfolio, an online store, or a blog, our starry sky will fit right in. Don't forget to give credit where it's due!

## ⚙️ Customize Your Universe

**Interactive Particle Network** is not just a starry background, it's _your_ starry background. With numerous customization options, you can tweak the universe to match your mood or project's theme:

  🌟 Configuration Options

  - `numberOfStars`: Set the number of stars in your sky.

  - `maxDistance`: Maximum distance for a star connection.

  - `starSize`: Range of possible star sizes.

  - `speedFactor`: Speed at which stars move around the canvas.

  - `mouseRadius`: Area around the mouse where stars will attempt to form connections.

  - `starColor`: Color of the stars.

  - `connectionColor`: Color of the lines that connect stars.

  - `canvasBackgroundColor`: Background color of your canvas.

  - `lineThickness`: Thickness of the connection lines.

  - `starShapes`: Shapes of the stars - 'circle' or 'star'.

  - `randomStarSpeeds`: Set this to true for stars moving at random speeds.

  - `rotationSpeed`: Range of possible rotation speeds for star-shaped stars.

  - `connectionsWhenNoMouse`: Set this to true to form star connections without mouse interference.

  - `percentStarsConnecting`: Percentage of stars that can connect when the mouse is not on the canvas.

  - `connectionLinesDashed`: Set this to true for dashed connection lines.

  - `dashedLinesConfig`: Configuration for the dashed lines.

  - `canvasGradient`: Add a gradient for the canvas background.

  - `starDensity`: Density of the stars - 'low', 'medium', 'high', or 'ultra'.

By customizing these options, you can create a truly unique and stunning celestial spectacle! 💫

## 🎨 Predefined Configurations



  Starry Night •

  Astral Serenity •

  Nebula Burst •

  Cosmic Web •

  Galactic Symphony •

  Celestial Dream •

  Quantum Realm •

  Eternal Twilight •

  Alien Encounter •

  Cybernetic Circuit



Too many options? Jumpstart your journey with our predefined configurations.

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 👥 Contributing

We welcome all contributions! If you're interested in enhancing our universe, please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to submit pull requests.