Interactive Particles Background Hero

📌 Description:

This project is a modern full-screen hero section featuring an interactive particles background built using the HTML5 Canvas API. The particles move dynamically across the screen, and when the user moves their mouse, they interact with the cursor, creating a smooth animated network effect.

✨ Features:

✅ Fullscreen responsive hero section
✅ Dynamic canvas-based particle animation
✅ Mouse interaction (particles are attracted to the cursor)
✅ Particle-to-particle connecting lines for a network effect
✅ Gradient text with a stylish CTA button
✅ Fully responsive for desktop and mobile devices

🔧 Technologies Used:

HTML5 – Page structure

*CSS3 *– Styling and responsive layout

JavaScript (Canvas API) – Particles animation and interactivity

🎨 How It Works:
1️⃣ The script generates 100 particles that move randomly across the canvas.
2️⃣ When the mouse moves, nearby particles are gently attracted towards the cursor.
3️⃣ If two particles are close enough, a subtle line is drawn between them to create a network effect.
4️⃣ The hero text and call-to-action button are placed on top of the canvas using z-index.

📱 Responsive Design:

Large heading and content for desktop

Automatically scales down for mobile screens

💡 Use Cases:

✅ Landing page hero sections
✅ Portfolio and creative websites
✅ Tech startup homepages or web apps