diff --git a/frontend/src/components/ParticleCanvas.tsx b/frontend/src/components/ParticleCanvas.tsx
index a7065fd..a516cf4 100644
--- a/frontend/src/components/ParticleCanvas.tsx
+++ b/frontend/src/components/ParticleCanvas.tsx
@@ -11,7 +11,14 @@ export default function ParticleCanvas() {
const ctx = canvas.getContext("2d");
if (!ctx) return;
- let animId: number;
+ const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ if (reduced) {
+ canvas.style.display = "none";
+ return;
+ }
+
+ let animId = 0;
+ let running = true;
let particles: {
x: number; y: number; size: number;
speedX: number; speedY: number; opacity: number; hue: number;
@@ -23,20 +30,27 @@ export default function ParticleCanvas() {
};
const create = () => {
- const count = Math.min(Math.floor(window.innerWidth / 12), 120);
+ const count = Math.min(Math.floor(window.innerWidth / 28), 48);
particles = Array.from({ length: count }, () => ({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2 + 0.5,
- speedX: (Math.random() - 0.5) * 0.3,
- speedY: (Math.random() - 0.5) * 0.3,
- opacity: Math.random() * 0.5 + 0.1,
+ speedX: (Math.random() - 0.5) * 0.25,
+ speedY: (Math.random() - 0.5) * 0.25,
+ opacity: Math.random() * 0.4 + 0.1,
hue: [0, 45, 170, 280][Math.floor(Math.random() * 4)],
}));
};
+ const onResize = () => {
+ resize();
+ create();
+ };
+
const draw = () => {
+ if (!running) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
+ const linkDist = window.innerWidth < 768 ? 0 : 90;
particles.forEach((p, i) => {
p.x += p.speedX;
p.y += p.speedY;
@@ -50,28 +64,42 @@ export default function ParticleCanvas() {
ctx.fillStyle = `hsla(${p.hue}, 70%, 60%, ${p.opacity})`;
ctx.fill();
- particles.slice(i + 1).forEach((p2) => {
- const dx = p.x - p2.x;
- const dy = p.y - p2.y;
- const dist = Math.sqrt(dx * dx + dy * dy);
- if (dist < 120) {
- ctx.beginPath();
- ctx.moveTo(p.x, p.y);
- ctx.lineTo(p2.x, p2.y);
- ctx.strokeStyle = `hsla(${p.hue}, 70%, 60%, ${0.08 * (1 - dist / 120)})`;
- ctx.lineWidth = 0.5;
- ctx.stroke();
+ if (linkDist > 0) {
+ for (let j = i + 1; j < particles.length; j++) {
+ const p2 = particles[j];
+ const dx = p.x - p2.x;
+ const dy = p.y - p2.y;
+ const dist = Math.hypot(dx, dy);
+ if (dist < linkDist) {
+ ctx.beginPath();
+ ctx.moveTo(p.x, p.y);
+ ctx.lineTo(p2.x, p2.y);
+ ctx.strokeStyle = `hsla(${p.hue}, 70%, 60%, ${0.06 * (1 - dist / linkDist)})`;
+ ctx.lineWidth = 0.5;
+ ctx.stroke();
+ }
}
- });
+ }
});
animId = requestAnimationFrame(draw);
};
+ const onVis = () => {
+ running = document.visibilityState === "visible";
+ if (running) draw();
+ else cancelAnimationFrame(animId);
+ };
+
resize();
create();
draw();
- window.addEventListener("resize", () => { resize(); create(); });
- return () => { cancelAnimationFrame(animId); };
+ window.addEventListener("resize", onResize);
+ document.addEventListener("visibilitychange", onVis);
+ return () => {
+ cancelAnimationFrame(animId);
+ window.removeEventListener("resize", onResize);
+ document.removeEventListener("visibilitychange", onVis);
+ };
}, []);
return
;
diff --git a/frontend/src/components/WhenVisible.tsx b/frontend/src/components/WhenVisible.tsx
new file mode 100644
index 0000000..b0c97c2
--- /dev/null
+++ b/frontend/src/components/WhenVisible.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+/** Mount children only when near the viewport — defers heavy below-fold chunks. */
+export default function WhenVisible({
+ children,
+ rootMargin = "640px 0px",
+ minHeight = 160,
+}: {
+ children: ReactNode;
+ rootMargin?: string;
+ minHeight?: number;
+}) {
+ const ref = useRef
(null);
+ const [show, setShow] = useState(false);
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el || show) return;
+ if (typeof IntersectionObserver === "undefined") {
+ setShow(true);
+ return;
+ }
+ const io = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setShow(true);
+ io.disconnect();
+ }
+ },
+ { rootMargin, threshold: 0.01 }
+ );
+ io.observe(el);
+ return () => io.disconnect();
+ }, [rootMargin, show]);
+
+ return (
+
+ );
+}