feat: canvas based interactive background

web/bg.js

@@ -0,0 +1,57 @@
+const COLOR_SURFACE1 = "#dce0e8";
+const DOT_RADIUS = 1 * devicePixelRatio;
+
+const canvas = document.getElementById("bg");
+const ctx = canvas.getContext("2d");
+
+let mouseX = 0;
+let mouseY = 0;
+
+function resizeCanvas(width, height) {
+	const devicePixelRatio = window.devicePixelRatio || 1;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+	canvas.width = width * devicePixelRatio;
+	canvas.height = height * devicePixelRatio;
+}
+
+function clearCanvas() {
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+function drawDot(x, y) {
+	const distance = Math.sqrt((x - mouseX) ** 2 + (y - mouseY) ** 2);
+	const effectRadius = 100;
+	const radius =
+		DOT_RADIUS +
+		2 *
+			devicePixelRatio *
+			((effectRadius - Math.min(distance, effectRadius)) / effectRadius);
+	ctx.beginPath();
+	ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+	ctx.fillStyle = COLOR_SURFACE1;
+	ctx.fill();
+}
+
+function drawPattern() {
+	clearCanvas();
+	for (let x = 0; x < canvas.width; x += 10 * devicePixelRatio) {
+		for (let y = 0; y < canvas.height; y += 10 * devicePixelRatio) {
+			drawDot(x, y);
+		}
+	}
+}
+
+window.addEventListener("resize", () => {
+	resizeCanvas(window.innerWidth, window.innerHeight);
+	drawPattern();
+});
+
+window.addEventListener("mousemove", (event) => {
+	mouseX = event.clientX * devicePixelRatio;
+	mouseY = event.clientY * devicePixelRatio;
+	drawPattern();
+});
+
+resizeCanvas(window.innerWidth, window.innerHeight);
+drawPattern();

web/index.html

@@ -13,9 +13,11 @@
 					<button id="play-btn" class="button">play</button>
 				</div>
 			</main>
-			<img class="cat" src="/images/cat-0.png" />
+			<img class="cat" src="/images/cat-0.png"></img>
-			<img class="eeping-cat" src="/images/eeping-cat.png" />
+			<img class="eeping-cat" src="/images/eeping-cat.png"></img>
 		</div>
+		<canvas id="bg"></canvas>
+		<script type="text/javascript" src="/bg.js"></script>
 		<script type="text/javascript" src="/script.js"></script>
 	</body>
 </html>

web/style.css

@@ -26,11 +26,6 @@ body {
   padding: 2rem;
   margin: 0;
   background-color: var(--base);
-  opacity: 1;
-  background-image: radial-gradient(var(--surface1) 1px, var(--base) 1px);
-  background-opacity: 0.8;
-  background-size: 10px 10px;
-  color: var(--text);
 }
 
 h1,
@@ -55,6 +50,15 @@ main {
   }
 }
 
+#bg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -10;
+}
+
 .container {
   position: relative;
   height: 100%;