update page background

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MouseBackground from '@/components/MouseBackground.vue'
+import PageBackground from '@/components/PageBackground.vue'
 import PageFooter from '@/components/PageFooter.vue'
 import PageHeader from '@/components/PageHeader.vue'
 import { useMeta } from 'vue-meta'
@@ -19,11 +19,7 @@ useMeta({
       }}</template>
     </metainfo>
   </header>
-  <div
-    className="fixed inset-0 -z-50 h-full w-screen bg-theme-50 bg-grid-theme-100 dark:bg-theme-900 dark:bg-grid-theme-950"
-  >
-    <MouseBackground />
-  </div>
+  <PageBackground />
   <div
     className="mx-auto flex h-full w-11/12 max-w-screen-md flex-col justify-between text-theme-900 dark:text-theme-100"
   >

src/components/PageBackground.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import noise from '@/assets/noise.png'
+import { useMousePosition } from '@/composables/useMousePosition'
+import { useUpdatingRandom } from '@/composables/useUpdatingRandom'
+
+const { x: mouseX, y: mouseY } = useMousePosition()
+
+const noiseInterval = 100
+const noiseMax = 10
+const noiseMin = -10
+
+const noiseX = useUpdatingRandom(noiseInterval, noiseMin, noiseMax)
+const noiseY = useUpdatingRandom(noiseInterval, noiseMin, noiseMax)
+
+const radius = 512
+</script>
+
+<template>
+  <div
+    className="fixed inset-0 -z-50 h-full w-screen bg-theme-50 bg-grid-theme-100 dark:bg-theme-900 dark:bg-grid-theme-950"
+  >
+    <div
+      class="absolute inset-[-200%] -z-40 h-[400%] w-[400%] opacity-[0.05]"
+      :style="{
+        transform: `translate(${noiseX}%, ${noiseY}%)`,
+        background: `url('${noise}')`
+      }"
+    />
+    <div
+      className="-z-30 absolute left-0 top-0 rounded-full bg-theme-50 dark:bg-theme-900 blur-[128px]"
+      :style="{
+        height: radius + 'px',
+        width: radius + 'px',
+        transform: `translate(calc(-50% + ${mouseX}px), calc(-50% + ${mouseY}px))`
+      }"
+    />
+  </div>
+</template>

src/composables/useUpdatingRandom.ts

@@ -0,0 +1,17 @@
+// a composable to generate an updating random number
+import { ref } from 'vue'
+
+export function useUpdatingRandom(interval = 1000, min = 0, max = 1) {
+  const random = ref(Math.random())
+
+  const getRandomInt = (min: number, max: number) =>
+    Math.floor(Math.random() * (max - min + 1)) + min
+
+  const updateRandom = () => {
+    random.value = getRandomInt(min, max)
+  }
+
+  setInterval(updateRandom, interval)
+
+  return random
+}