✨ Basic Solar Network product page

pages/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <canvas ref="canvasRef" class="fixed top-0 left-0 w-screen h-screen opacity-50"></canvas>
+
   <v-container class="flex flex-col my-2 px-12 gap-[4rem]">
     <section class="content-section flex flex-col items-center justify-center text-center px-4">
       <img
@@ -10,6 +12,7 @@
           enter: {
             y: 0,
             opacity: 1,
+            transition: { duration: 0.8 }
           },
         }"
         :src="Logo"
@@ -74,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import Logo from "../assets/logo-w-shadow.png"
+import Logo from "~/assets/logo-w-shadow.png"
 
 import { getLocale } from "~/utils/locale"
 
@@ -100,6 +103,88 @@ const { data: products } = await useAsyncData("products", () => {
     .limit(5)
     .find()
 })
+
+const canvasRef = ref(null)
+
+onMounted(() => {
+  const canvas: HTMLCanvasElement = canvasRef.value!
+  const ctx = canvas.getContext("2d")!
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = window.innerWidth * dpr;
+  canvas.height = window.innerHeight * dpr;
+
+  let particles: Particle[] = []
+  const numParticles = 100
+
+  class Particle {
+    x: number
+    y: number
+    vx: number
+    vy: number
+    size: number
+
+    constructor() {
+      this.x = Math.random() * canvas.width
+      this.y = Math.random() * canvas.height
+      this.vx = (Math.random() - 0.5) * 1.5
+      this.vy = (Math.random() - 0.5) * 1.5
+      this.size = Math.random() * 3 + 1
+    }
+
+    move() {
+      this.x += this.vx
+      this.y += this.vy
+      if (this.x <= 0 || this.x >= canvas.width) this.vx *= -1
+      if (this.y <= 0 || this.y >= canvas.height) this.vy *= -1
+    }
+
+    draw() {
+      ctx.beginPath();
+      ctx.arc(this.x * dpr, this.y * dpr, this.size * dpr, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+      ctx.fill();
+    }
+  }
+
+  function init() {
+    particles = []
+    for (let i = 0; i < numParticles; i++) {
+      particles.push(new Particle())
+    }
+  }
+
+  function drawLines() {
+    for (let i = 0; i < particles.length; i++) {
+      for (let j = i + 1; j < particles.length; j++) {
+        let dx = particles[i].x - particles[j].x;
+        let dy = particles[i].y - particles[j].y;
+        let distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < 100) {
+          ctx.beginPath();
+          ctx.moveTo(particles[i].x * dpr, particles[i].y * dpr);
+          ctx.lineTo(particles[j].x * dpr, particles[j].y * dpr);
+          ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+          ctx.lineWidth = 0.5 * dpr;
+          ctx.stroke();
+        }
+      }
+    }
+  }
+
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    particles.forEach((p) => {
+      p.move()
+      p.draw()
+    })
+    drawLines()
+    requestAnimationFrame(animate)
+  }
+
+  init()
+  animate()
+})
 </script>
 
 <style scoped>