π 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)