diff --git a/src/App.tsx b/src/App.tsx index 5dfac08..ad21083 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef } from "react"; interface Particle { x: number; @@ -16,7 +16,7 @@ export default function App() { const canvasRef = useRef(null); const mousePositionRef = useRef({ x: 0, y: 0 }); const isTouchingRef = useRef(false); - const [isMobile, setIsMobile] = useState(false); + const isMobileRef = useRef(false); useEffect(() => { const canvas = canvasRef.current; @@ -27,7 +27,7 @@ export default function App() { const updateCanvasSize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; - setIsMobile(window.innerWidth < 768); + isMobileRef.current = window.innerWidth < 768; }; updateCanvasSize(); @@ -50,7 +50,7 @@ export default function App() { const img = new Image(); img.onload = () => { - const scale = isMobile ? 2.0 : 3.0; + const scale = isMobileRef.current ? 2.0 : 3.0; const imgWidth = img.width * scale; const imgHeight = img.height * scale; @@ -130,7 +130,7 @@ export default function App() { if (!ctx || !canvas) return; ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = "black"; + ctx.fillStyle = "#09090b"; ctx.fillRect(0, 0, canvas.width, canvas.height); const { x: mouseX, y: mouseY } = mousePositionRef.current; @@ -195,7 +195,6 @@ export default function App() { const handleMouseMove = (e: MouseEvent) => handleMove(e.clientX, e.clientY); const handleTouchMove = (e: TouchEvent) => { if (e.touches.length > 0) { - e.preventDefault(); handleMove(e.touches[0].clientX, e.touches[0].clientY); } }; @@ -216,10 +215,10 @@ export default function App() { window.addEventListener("resize", handleResize); canvas.addEventListener("mousemove", handleMouseMove); - canvas.addEventListener("touchmove", handleTouchMove, { passive: false }); + canvas.addEventListener("touchmove", handleTouchMove, { passive: true }); canvas.addEventListener("mouseleave", handleMouseLeave); - canvas.addEventListener("touchstart", handleTouchStart); - canvas.addEventListener("touchend", handleTouchEnd); + canvas.addEventListener("touchstart", handleTouchStart, { passive: true }); + canvas.addEventListener("touchend", handleTouchEnd, { passive: true }); return () => { window.removeEventListener("resize", handleResize); @@ -230,20 +229,20 @@ export default function App() { canvas.removeEventListener("touchend", handleTouchEnd); cancelAnimationFrame(animationFrameId); }; - }, [isMobile]); + }, []); return ( -
+
-

+

Welcome to{" "}