{"id":19768631,"url":"https://github.com/leonkohli/interactive-particle-network","last_synced_at":"2025-07-28T10:35:04.262Z","repository":{"id":182605816,"uuid":"668782302","full_name":"LeonKohli/interactive-particle-network","owner":"LeonKohli","description":"Interactive Starry Background: An immersive, dynamic starfield experience for your web project. Powered by vanilla JavaScript, perfect for engaging user interfaces.","archived":false,"fork":false,"pushed_at":"2023-08-06T17:25:56.000Z","size":8917,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-19T08:58:27.058Z","etag":null,"topics":["html","javascript","star","ui","ux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LeonKohli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-20T15:19:54.000Z","updated_at":"2025-02-15T09:59:30.000Z","dependencies_parsed_at":"2025-05-12T22:54:32.361Z","dependency_job_id":"ecf985cf-6122-46b6-bf98-8486cd756f55","html_url":"https://github.com/LeonKohli/interactive-particle-network","commit_stats":null,"previous_names":["leonkohli/interactive-particle-network"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LeonKohli/interactive-particle-network","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonKohli%2Finteractive-particle-network","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonKohli%2Finteractive-particle-network/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonKohli%2Finteractive-particle-network/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonKohli%2Finteractive-particle-network/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeonKohli","download_url":"https://codeload.github.com/LeonKohli/interactive-particle-network/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeonKohli%2Finteractive-particle-network/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267502910,"owners_count":24098232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","star","ui","ux"],"created_at":"2024-11-12T04:39:30.013Z","updated_at":"2025-07-28T10:35:04.232Z","avatar_url":"https://github.com/LeonKohli.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ Interactive Particle Network 🚀🌌\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/LeonKohli/interactive-particle-network\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/last-commit/LeonKohli/interactive-particle-network\" alt=\"GitHub last commit\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/LeonKohli/interactive-particle-network/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/LeonKohli/interactive-particle-network\" alt=\"GitHub stars\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/LeonKohli/interactive-particle-network/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/LeonKohli/interactive-particle-network\" alt=\"GitHub issues\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/LeonKohli/interactive-particle-network/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/LeonKohli/interactive-particle-network\" alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n🌌 **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. 🌠\n\n## ⚡ Live Demo\n\nExperience the interactive starry background [here](https://codepen.io/LeonKohli/pen/poQKLOL).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/LeonKohli/interactive-particle-network/assets/98176333/ac7b59d7-8dfb-4290-88ec-632fd9348170\" alt=\"demo\"\u003e\n\u003c/p\u003e\n\n## 🌟 Features\n\n- **👐 Interactive**: The stars are at your command. Move your cursor and witness constellations form and follow!\n- **🎲 Dynamically Generated**: Every refresh greets you with a unique constellation pattern.\n- **📐 Responsive**: Perfectly adapts to any window size for a seamless visual experience.\n- **🔨 Pure JavaScript**: No dependencies. Just plain JavaScript.\n\n## 🚀 Getting Started\n\n1. Clone the repository:\n   ```sh\n   git clone https://github.com/LeonKohli/interactive-particle-network.git\n   ```\n2. Open the `index.html` file in your web browser.\n\n## 🛠️ Usage\n\nFeel 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!\n\n## ⚙️ Customize Your Universe\n\n**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:\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🌟 Configuration Options\u003c/strong\u003e\u003c/summary\u003e\n\n  - `numberOfStars`: Set the number of stars in your sky.\n  - `maxDistance`: Maximum distance for a star connection.\n  - `starSize`: Range of possible star sizes.\n  - `speedFactor`: Speed at which stars move around the canvas.\n  - `mouseRadius`: Area around the mouse where stars will attempt to form connections.\n  - `starColor`: Color of the stars.\n  - `connectionColor`: Color of the lines that connect stars.\n  - `canvasBackgroundColor`: Background color of your canvas.\n  - `lineThickness`: Thickness of the connection lines.\n  - `starShapes`: Shapes of the stars - 'circle' or 'star'.\n  - `randomStarSpeeds`: Set this to true for stars moving at random speeds.\n  - `rotationSpeed`: Range of possible rotation speeds for star-shaped stars.\n  - `connectionsWhenNoMouse`: Set this to true to form star connections without mouse interference.\n  - `percentStarsConnecting`: Percentage of stars that can connect when the mouse is not on the canvas.\n  - `connectionLinesDashed`: Set this to true for dashed connection lines.\n  - `dashedLinesConfig`: Configuration for the dashed lines.\n  - `canvasGradient`: Add a gradient for the canvas background.\n  - `starDensity`: Density of the stars - 'low', 'medium', 'high', or 'ultra'.\n\u003c/details\u003e\n\nBy customizing these options, you can create a truly unique and stunning celestial spectacle! 💫\n\n## 🎨 Predefined Configurations\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./examples.md#starry-night\"\u003eStarry Night\u003c/a\u003e •\n  \u003ca href=\"./examples.md#astral-serenity\"\u003eAstral Serenity\u003c/a\u003e •\n  \u003ca href=\"./examples.md#nebula-burst\"\u003eNebula Burst\u003c/a\u003e •\n  \u003ca href=\"./examples.md#cosmic-web\"\u003eCosmic Web\u003c/a\u003e •\n  \u003ca href=\"./examples.md#galactic-symphony\"\u003eGalactic Symphony\u003c/a\u003e •\n  \u003ca href=\"./examples.md#celestial-dream\"\u003eCelestial Dream\u003c/a\u003e •\n  \u003ca href=\"./examples.md#quantum-realm\"\u003eQuantum Realm\u003c/a\u003e •\n  \u003ca href=\"./examples.md#eternal-twilight\"\u003eEternal Twilight\u003c/a\u003e •\n  \u003ca href=\"./examples.md#alien-encounter\"\u003eAlien Encounter\u003c/a\u003e •\n  \u003ca href=\"./examples.md#cybernetic-circuit\"\u003eCybernetic Circuit\u003c/a\u003e\n\u003c/p\u003e\n\nToo many options? Jumpstart your journey with our predefined configurations.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👥 Contributing\n\nWe 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonkohli%2Finteractive-particle-network","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleonkohli%2Finteractive-particle-network","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonkohli%2Finteractive-particle-network/lists"}