{"id":25313865,"url":"https://github.com/cloudwerx-dev/particle-network-background","last_synced_at":"2025-10-28T18:31:01.017Z","repository":{"id":264409680,"uuid":"893293909","full_name":"CLOUDWERX-DEV/particle-network-background","owner":"CLOUDWERX-DEV","description":"🌐 Interactive particle network background animation with real-time customization. Features dynamic particle connections, mouse interactions, and a modern control panel for live settings adjustment. Built with HTML5 Canvas, CSS3, and vanilla JavaScript.","archived":false,"fork":false,"pushed_at":"2024-12-01T17:13:43.000Z","size":38,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-01T18:18:31.127Z","etag":null,"topics":["animation","css","css3","html","html5","javascript","network","particle","particles"],"latest_commit_sha":null,"homepage":"http://cloudwerxlab.com","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/CLOUDWERX-DEV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2024-11-24T03:32:45.000Z","updated_at":"2025-01-14T17:28:02.000Z","dependencies_parsed_at":"2025-02-01T18:18:32.429Z","dependency_job_id":"718bf663-3881-42aa-a5cb-71bbc8279bba","html_url":"https://github.com/CLOUDWERX-DEV/particle-network-background","commit_stats":null,"previous_names":["cloudwerxlabs/particle-network-background","cloudwerx-dev/particle-network-background"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CLOUDWERX-DEV%2Fparticle-network-background","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CLOUDWERX-DEV%2Fparticle-network-background/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CLOUDWERX-DEV%2Fparticle-network-background/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CLOUDWERX-DEV%2Fparticle-network-background/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CLOUDWERX-DEV","download_url":"https://codeload.github.com/CLOUDWERX-DEV/particle-network-background/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238691653,"owners_count":19514482,"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","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":["animation","css","css3","html","html5","javascript","network","particle","particles"],"created_at":"2025-02-13T16:38:48.537Z","updated_at":"2025-10-28T18:31:00.631Z","avatar_url":"https://github.com/CLOUDWERX-DEV.png","language":"JavaScript","readme":"# 🌐 Animated Particle Network Background\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"favicon.svg\" alt=\"Particle Network Logo\" width=\"120\"\u003e\n  \n  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=flat\u0026logo=html5\u0026logoColor=white)\n  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=flat\u0026logo=css3\u0026logoColor=white)\n  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=flat\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n  \n  [![GitHub Release](https://img.shields.io/github/v/release/cloudwerxlabs/particle-network-background?include_prereleases\u0026style=flat)](https://github.com/cloudwerxlabs/particle-network-background/releases)\n  [![GitHub Stars](https://img.shields.io/github/stars/cloudwerxlabs/particle-network-background?style=flat)](https://github.com/cloudwerxlabs/particle-network-background/stargazers)\n  [![GitHub Forks](https://img.shields.io/github/forks/cloudwerxlabs/particle-network-background?style=flat)](https://github.com/cloudwerxlabs/particle-network-background/network/members)\n  [![GitHub Issues](https://img.shields.io/github/issues/cloudwerxlabs/particle-network-background?style=flat)](https://github.com/cloudwerxlabs/particle-network-background/issues)\n  [![GitHub Pull Requests](https://img.shields.io/github/issues-pr/cloudwerxlabs/particle-network-background?style=flat)](https://github.com/cloudwerxlabs/particle-network-background/pulls)\n\u003c/div\u003e\n\n\u003e A stunning, interactive particle network animation for modern web backgrounds. Built with pure JavaScript and HTML5 Canvas.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/ZraTCeT.png\" alt=\"Particle Network Demo\" width=\"100%\" style=\"max-width: 800px;\"\u003e\n\u003c/div\u003e\n\n## ✨ Features\n\n- **Interactive Particle Network** - Dynamic particles that respond to mouse movements\n- **Real-time Customization** - Adjust settings on the fly with an intuitive control panel\n- **Modern Design** - Clean, glass-morphism UI with smooth animations\n- **Performance Optimized** - Efficient canvas rendering and animation frames\n- **Responsive** - Adapts seamlessly to any screen size\n- **Zero Dependencies** - Built with vanilla JavaScript, no external libraries required\n\n## 🚀 Quick Start\n\n1. **Include in your project:**\n   ```html\n   \u003c!-- Add to your HTML --\u003e\n   \u003ccanvas id=\"particleCanvas\"\u003e\u003c/canvas\u003e\n   \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n   \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n   ```\n\n2. **Initialize the canvas:**\n   ```javascript\n   // The animation will start automatically\n   // All configuration is handled through the UI\n   ```\n\n3. **Open in browser:**\n   - Launch `index.html` in a modern web browser\n   - Use the settings panel (⚙️) to customize the animation\n\n## 🎨 Customization\n\n### Visual Settings\n\n- **Background**\n  - Color with opacity control\n  - Seamless color transitions\n\n- **Particles**\n  - Count (10-300)\n  - Size range (0.5-10px)\n  - Color with opacity\n  - Movement speed\n\n- **Connections**\n  - Maximum distance\n  - Line width\n  - Color with opacity\n  - Dynamic connection behavior\n\n### Interactive Features\n\n- **Mouse Interaction**\n  - Adjustable influence radius\n  - Particle attraction/repulsion\n  - Real-time response\n\n- **Animation Effects**\n  - Pulse animation\n  - Speed control\n  - Toggle interactions\n\n## 🛠️ Technical Details\n\n### Canvas Optimization\n\n- **Efficient Rendering**\n  - RequestAnimationFrame for smooth animations\n  - Optimized particle updates\n  - Smart connection calculations\n\n- **Performance Tips**\n  - Adjust particle count based on device capability\n  - Reduce connection distance on mobile devices\n  - Lower opacity for better performance\n\n### Browser Support\n\n- Chrome (recommended)\n- Firefox\n- Safari\n- Edge\n- Opera\n\n## 📱 Responsive Design\n\nThe animation and control panel automatically adapt to different screen sizes:\n\n- **Desktop:** Full-featured experience with expanded controls\n- **Tablet:** Optimized layout with touch-friendly controls\n- **Mobile:** Condensed interface with essential settings\n\n## 🔧 Advanced Configuration\n\n### Parameters Reference\n\nAll available configuration parameters for the particle network:\n\n```javascript\nconst defaultConfig = {\n  // Particle Settings\n  particleCount: 120,      // Number of particles (10-300)\n  minRadius: 1,           // Minimum particle radius (0.5-5)\n  maxRadius: 5,           // Maximum particle radius (2-10)\n  particleColor: '#000000', // Particle color in hex\n  particleOpacity: 1,     // Particle opacity (0-1)\n  \n  // Movement Settings\n  moveSpeed: 0.504,       // Particle movement speed (0.1-2)\n  mouseRadius: 200,       // Mouse interaction radius (50-400)\n  mouseInteraction: true, // Enable mouse interaction\n  \n  // Connection Settings\n  connectDistance: 150,   // Maximum connection distance (50-300)\n  lineWidth: 2,          // Connection line width (0.5-5)\n  lineColor: '#000000',   // Connection line color in hex\n  lineOpacity: 0.2,      // Connection line opacity (0-1)\n  \n  // Background Settings\n  backgroundColor: '#ffffff', // Background color in hex\n  backgroundOpacity: 1,    // Background opacity (0-1)\n  \n  // Animation Settings\n  pulseEnabled: true,     // Enable pulse animation\n  pulseSpeed: 0.0001      // Pulse animation speed (0.0001-0.2)\n}\n```\n\n### Parameter Details\n\n#### Particle Settings\n- `particleCount`: Total number of particles rendered\n  - Higher values create denser networks but impact performance\n  - Recommended: 80-150 for desktop, 30-80 for mobile\n  \n- `minRadius` \u0026 `maxRadius`: Particle size range\n  - Particles are randomly sized within this range\n  - Smaller particles (1-3px) work best for dense networks\n  - Larger particles (4-10px) create bold, sparse networks\n\n- `particleColor`: Color of individual particles\n  - Accepts hex color codes\n  - Use lighter colors for dark backgrounds\n  - Darker colors work best on light backgrounds\n\n- `particleOpacity`: Particle transparency\n  - 1 = fully opaque\n  - 0.5-0.8 creates subtle depth\n  - Lower values work well with higher particle counts\n\n#### Movement Settings\n- `moveSpeed`: Controls particle velocity\n  - 0.1 = very slow, dreamy movement\n  - 0.5 = balanced, natural movement\n  - 1.0+ = fast, energetic movement\n  \n- `mouseRadius`: Mouse interaction area\n  - Larger radius = more particles affected\n  - Smaller radius = more precise interaction\n  - Adjust based on particle density\n\n- `mouseInteraction`: Toggle mouse effects\n  - When true, particles respond to mouse movement\n  - False disables all mouse-related effects\n  - Useful for static backgrounds\n\n#### Connection Settings\n- `connectDistance`: Maximum line length\n  - Affects network density significantly\n  - Larger values create more connections\n  - Consider performance with high particle counts\n\n- `lineWidth`: Connection thickness\n  - Thin lines (0.5-1) for subtle networks\n  - Thicker lines (2-5) for bold visuals\n  - Impacts rendering performance\n\n- `lineColor`: Connection line color\n  - Can match or contrast particle color\n  - Semi-transparent lines work well\n  - Consider contrast with background\n\n- `lineOpacity`: Line transparency\n  - Lower values (0.1-0.3) for subtle connections\n  - Higher values (0.4-1) for prominent networks\n  - Affects visual density perception\n\n#### Background Settings\n- `backgroundColor`: Canvas background\n  - Sets base color for animation\n  - Consider contrast with particles\n  - Can be fully transparent\n\n- `backgroundOpacity`: Background transparency\n  - 1 = solid background\n  - 0 = fully transparent\n  - Useful for overlaying on other content\n\n#### Animation Settings\n- `pulseEnabled`: Toggle size animation\n  - Adds subtle life to static scenes\n  - Works well with slower move speeds\n  - Minimal performance impact\n\n- `pulseSpeed`: Animation timing\n  - 0.0001-0.001 = very subtle pulse\n  - 0.001-0.01 = noticeable rhythm\n  - 0.01-0.2 = dramatic pulsing\n\n### Usage Example\n\n```javascript\n// Create a dreamy, subtle network\nconst dreamyConfig = {\n  particleCount: 100,\n  minRadius: 1,\n  maxRadius: 3,\n  particleColor: '#4a90e2',\n  particleOpacity: 0.7,\n  moveSpeed: 0.3,\n  connectDistance: 120,\n  lineWidth: 1,\n  lineColor: '#4a90e2',\n  lineOpacity: 0.15,\n  backgroundColor: '#1a1a1a',\n  backgroundOpacity: 1,\n  pulseEnabled: true,\n  pulseSpeed: 0.0005\n};\n\n// Create an energetic, bold network\nconst energeticConfig = {\n  particleCount: 150,\n  minRadius: 2,\n  maxRadius: 4,\n  particleColor: '#ff4444',\n  particleOpacity: 1,\n  moveSpeed: 0.8,\n  connectDistance: 180,\n  lineWidth: 2,\n  lineColor: '#ff4444',\n  lineOpacity: 0.3,\n  backgroundColor: '#ffffff',\n  backgroundOpacity: 1,\n  pulseEnabled: true,\n  pulseSpeed: 0.01\n};\n```\n\n### Custom Integration\n\n1. **Canvas Setup**\n   ```javascript\n   const canvas = document.getElementById('particleCanvas');\n   canvas.width = window.innerWidth;\n   canvas.height = window.innerHeight;\n   ```\n\n2. **Event Handling**\n   ```javascript\n   window.addEventListener('resize', () =\u003e {\n     canvas.width = window.innerWidth;\n     canvas.height = window.innerHeight;\n   });\n   ```\n\n### Performance Optimization\n\n- Use appropriate particle counts:\n  - Desktop: 100-300 particles\n  - Tablet: 50-150 particles\n  - Mobile: 30-100 particles\n\n- Adjust connection distance:\n  - Desktop: 150px\n  - Tablet: 100px\n  - Mobile: 80px\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n1. Fork the repository\n2. Create your feature branch\n3. Commit your changes\n4. Push to the branch\n5. Open a Pull Request\n\n### Guidelines\n\n- Follow existing code style\n- Add comments for complex logic\n- Test across different browsers\n- Update documentation as needed\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🌟 Acknowledgments\n\n- Inspired by particle network visualizations\n- Built with modern web technologies\n- Community feedback and contributions\n\n## 🔍 Examples\n\n### Use Cases\n- Website backgrounds\n- Interactive headers\n- Loading screens\n- Data visualizations\n- Creative portfolios\n\n### Tips\n- Adjust opacity for text overlay visibility\n- Use color schemes that match your brand\n- Consider user device capabilities\n- Test performance on various devices\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  Made with ❤️ by \u003ca href=\"https://cloudwerxlab.com\"\u003eCloudWerx Lab\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudwerx-dev%2Fparticle-network-background","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudwerx-dev%2Fparticle-network-background","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudwerx-dev%2Fparticle-network-background/lists"}