DEV Community

Vinkal Prajapati
Vinkal Prajapati

Posted on

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

Top comments (0)