Animated Background Hero

About this module

A hero overlaying a real canvas particle field with mouse interaction — a premium ambient background.

Installation

1. 1

   Create the files

   Create `index.html` and `style.css` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the section markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <section class="mh-sec mh-part-hero">
     <canvas id="mh-bg" aria-hidden="true"></canvas>
     <div class="mh-container mh-center">
       <span class="mh-eyebrow">Interactive background</span>
       <h1 class="mh-h1">Motion that moves people</h1>
       <p class="mh-sub">Particles drift and react to your cursor in real time.</p>
       <a href="#" class="mh-btn">See it in action</a>
     </div>
   </section>

2. 2

   Wire up the script

   Include `script.js` before the closing body tag.

   const canvas = document.getElementById("mh-bg");
   const ctx = canvas.getContext("2d");
   let w, h, parts = [], mouse = { x: 0, y: 0 };
   function resize() {
     const r = canvas.getBoundingClientRect();
     w = canvas.width = r.width; h = canvas.height = r.height;
     parts = Array.from({ length: 60 }, () => ({
       x: Math.random() * w, y: Math.random() * h,
       vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4,
       r: Math.random() * 2 + 1
     }));
   }
   function tick() {
     ctx.clearRect(0, 0, w, h);
     for (const p of parts) {
       p.x += p.vx; p.y += p.vy;
       if (p.x < 0 || p.x > w) p.vx *= -1;
       if (p.y < 0 || p.y > h) p.vy *= -1;
       const dx = p.x - mouse.x, dy = p.y - mouse.y;
       if (Math.hypot(dx, dy) < 100) { p.x += dx * 0.02; p.y += dy * 0.02; }
       ctx.beginPath();
       ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
       ctx.fillStyle = "rgba(129,140,248,0.5)";
       ctx.fill();
     }
     requestAnimationFrame(tick);
   }
   canvas.addEventListener("mousemove", (e) => {
     const r = canvas.getBoundingClientRect();
     mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top;
   });
   resize(); window.addEventListener("resize", resize); tick();