hero background and border animation and play music in page

hero had background video which was big file to load so replaced it with js particle animation which i also interactive also music which goes with it and page

added animation to button for compelling call to action

app.js

@@ -1,17 +1,174 @@
+// Intersection Observer
 const observer = new IntersectionObserver((entries) => {
+    // Iterate through each entry
     entries.forEach((entry) => {
-        console.log(entry)
+        console.log(entry);
         if (entry.isIntersecting) {
+            // Add 'show' class when element enters viewport
             entry.target.classList.add('show');
             entry.target.classList.remove('no-webkit-fill');
-            setTimeout(() => {
-                entry.target.classList.add('no-webkit-fill');
-            }, 1000);
-        } else {
-            entry.target.classList.remove('show');
+            if (entry.target.classList.contains('hidden-hero-text')) {
+                setTimeout(() => {
+                    entry.target.classList.add('no-webkit-fill');
+                }, 1000);
+            }
+            // Stop observing
+            observer.unobserve(entry.target);
         }
     });
 });
 
-const hiddenElements = document.querySelectorAll('.hidden, .hidden-hero-text, .hiddenimg, .hiddenhero');
-hiddenElements.forEach((el) => observer.observe(el));
+// Select all elements with the specified classes
+const hiddenElements = document.querySelectorAll('.hidden, .hidden-hero-text, .hiddenimg, .hiddenhero, .hidden-hero-btn');
+// Observe each of these elements
+hiddenElements.forEach((el) => observer.observe(el));
+
+
+
+
+// Particle Animation
+var PARTICLE_NUM = 500;
+var PARTICLE_BASE_RADIUS = 0.5;
+var FL = 500;
+var DEFAULT_SPEED = 2;
+var BOOST_SPEED = 300;
+
+var canvas;
+var canvasWidth, canvasHeight;
+var context;
+var centerX, centerY;
+var mouseX, mouseY;
+var speed = DEFAULT_SPEED;
+var targetSpeed = DEFAULT_SPEED;
+var particles = [];
+
+window.addEventListener('load', function () {
+    canvas = document.getElementById('c');
+
+    var resize = function () {
+        canvasWidth = canvas.width = window.innerWidth;
+        canvasHeight = canvas.height = window.innerHeight;
+        centerX = canvasWidth * 0.5;
+        centerY = canvasHeight * 0.5;
+        context = canvas.getContext('2d');
+        context.fillStyle = 'rgb(255, 255, 255)';
+    };
+
+    window.addEventListener('resize', resize);
+    resize();
+
+    mouseX = centerX;
+    mouseY = centerY;
+
+    for (var i = 0, p; i < PARTICLE_NUM; i++) {
+        particles[i] = randomizeParticle(new Particle());
+        particles[i].z -= 500 * Math.random();
+    }
+
+    document.addEventListener('mousemove', function (e) {
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+    }, false);
+
+    document.addEventListener('mousedown', function (e) {
+        targetSpeed = BOOST_SPEED;
+    }, false);
+
+    document.addEventListener('mouseup', function (d) {
+        targetSpeed = DEFAULT_SPEED;
+    }, false);
+
+    setInterval(loop, 1000 / 60);
+}, false);
+
+function loop() {
+    context.save();
+    context.fillStyle = 'rgb(0, 0, 0)';
+    context.fillRect(0, 0, canvasWidth, canvasHeight);
+    context.restore();
+
+    speed += (targetSpeed - speed) * 0.01;
+
+    var p;
+    var cx, cy;
+    var rx, ry;
+    var f, x, y, r;
+    var pf, px, py, pr;
+    var a, a1, a2;
+
+    var halfPi = Math.PI * 0.5;
+    var atan2 = Math.atan2;
+    var cos = Math.cos;
+    var sin = Math.sin;
+
+    context.beginPath();
+    for (var i = 0; i < PARTICLE_NUM; i++) {
+        p = particles[i];
+
+        p.pastZ = p.z;
+        p.z -= speed;
+
+        if (p.z <= 0) {
+            randomizeParticle(p);
+            continue;
+        }
+
+        cx = centerX - (mouseX - centerX) * 1.25;
+        cy = centerY - (mouseY - centerY) * 1.25;
+
+        rx = p.x - cx;
+        ry = p.y - cy;
+
+        f = FL / p.z;
+        x = cx + rx * f;
+        y = cy + ry * f;
+        r = PARTICLE_BASE_RADIUS * f;
+
+        pf = FL / p.pastZ;
+        px = cx + rx * pf;
+        py = cy + ry * pf;
+        pr = PARTICLE_BASE_RADIUS * pf;
+
+        a = atan2(py - y, px - x);
+        a1 = a + halfPi;
+        a2 = a - halfPi;
+
+        context.moveTo(px + pr * cos(a1), py + pr * sin(a1));
+        context.arc(px, py, pr, a1, a2, true);
+        context.lineTo(x + r * cos(a2), y + r * sin(a2));
+        context.arc(x, y, r, a2, a1, true);
+        context.closePath();
+    }
+    context.fill();
+}
+
+function randomizeParticle(p) {
+    p.x = Math.random() * canvasWidth;
+    p.y = Math.random() * canvasHeight;
+    p.z = Math.random() * 1500 + 500;
+    return p;
+}
+
+function Particle(x, y, z) {
+    this.x = x || 0;
+    this.y = y || 0;
+    this.z = z || 0;
+    this.pastZ = 0;
+}
+
+// music controls
+const main = document.querySelector('main');
+const audio = document.getElementById('spaceMusic');
+
+main.addEventListener('click', function () {
+    audio.play();
+});
+
+audio.addEventListener('ended', function () {
+    audio.src = "music/KQEJO-emphasis.mp3";
+    audio.play();
+});
+
+
+
+

index.html

@@ -28,12 +28,20 @@
     </nav>
     <main>
         <section class="hero">
-            <video autoplay loop muted playsinline class="hero_video">
-                <source src="vid/by-Timo-Herbert-from-Pixabay.mp4" type="video/mp4">
+            <div class="star"><canvas id="c"></canvas></div>
+            <!-- <video autoplay loop muted playsinline class="hero_video"> -->
+            <source src="vid/by-Timo-Herbert-from-Pixabay.mp4" type="video/mp4">
             </video>
             <div class="hero_img"><img class="hiddenhero" src="img/pexels-Photo-by-Kristaps.webp"></div>
             <h1 class="hero_text hidden-hero-text">TOUCH NEW HORIZONS</h1>
-            <button class="hero_btn">Xplore</button>
+            <div class="hero_btn hidden-hero-btn">
+                <a href="#">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>Xplore</a>
+            </div>
+            <!-- <button class="hero_btn hidden-hero-btn">Xplore</button> -->
         </section>
         <section class="space hidden">
             <div class="space_text hidden">
@@ -95,6 +103,10 @@ <h2 class="mission_h">Our Missions</h2>
                     class="hidden" src="img/black-hole-home.webp">
             </div>
         </section>
+        <audio id="spaceMusic">
+            <source src="music/after-dark-pandora-cody-chillwithme.mp3" type="audio/mp3">
+            <source src="music/KQEJO-emphasis.mp3" type="audio/mp3">
+        </audio>
     </main>
     <footer>
         <div>
@@ -118,6 +130,7 @@ <h2 class="mission_h">Our Missions</h2>
             <br>Explore, Discover, and Cosmize.
         </p>
     </footer>
+    <div></div>
 </body>
 
 </html>