split the project in 2

frontend/Tree/FallingLeaves.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef } from "react";
+import { TRUNK_TOP_CSS } from "./Tree";
+// this is a comment
+interface Leaf {
+  x: number;
+  y: number;
+  size: number;
+  speed: number;
+  drift: number;
+  rotation: number;
+  rotationSpeed: number;
+  opacity: number;
+  sway: number;
+  swaySpeed: number;
+  phase: number;
+}
+
+export default function FallingLeaves({ treeRef }: { treeRef: React.RefObject<HTMLCanvasElement | null> }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext("2d")!;
+    let animId: number;
+    const leaves: Leaf[] = [];
+    const MAX_LEAVES = 50;
+
+    function resize() {
+      const parent = canvas.parentElement;
+      const rect = parent?.getBoundingClientRect();
+      canvas.width = Math.max(1, Math.round(rect?.width || window.innerWidth));
+      canvas.height = Math.max(1, Math.round(rect?.height || window.innerHeight));
+    }
+    resize();
+    window.addEventListener("resize", resize);
+
+    function spawnLeaf(): Leaf {
+      const treeRect = treeRef.current?.getBoundingClientRect();
+      const canvasRect = canvas.getBoundingClientRect();
+      const spawnY = treeRect ? treeRect.top - canvasRect.top + TRUNK_TOP_CSS : canvas.height * 0.4;
+      const spawnX = treeRect
+        ? treeRect.left - canvasRect.left + Math.random() * treeRect.width * 0.8 + treeRect.width * 0.1
+        : Math.random() * canvas.width * 0.6 + canvas.width * 0.2;
+      return {
+        x: spawnX,
+        y: spawnY,
+        size: Math.random() * 4 + 2,
+        speed: Math.random() * 0.3 + 0.15,
+        drift: Math.random() * 0.5 - 0.25,
+        rotation: Math.random() * Math.PI * 2,
+        rotationSpeed: (Math.random() - 0.5) * 0.02,
+        opacity: Math.random() * 0.25 + 0.08,
+        sway: Math.random() * 30 + 15,
+        swaySpeed: Math.random() * 0.008 + 0.003,
+        phase: Math.random() * Math.PI * 2,
+      };
+    }
+
+    let spawnTimer = 0;
+
+    function draw() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      spawnTimer++;
+      if (spawnTimer > 30 && leaves.length < MAX_LEAVES) {
+        leaves.push(spawnLeaf());
+        spawnTimer = 0;
+      }
+
+      for (let i = leaves.length - 1; i >= 0; i--) {
+        const l = leaves[i];
+        l.y += l.speed;
+        l.x += l.drift + Math.sin(l.phase) * l.swaySpeed * l.sway * 0.05;
+        l.phase += l.swaySpeed;
+        l.rotation += l.rotationSpeed;
+
+        ctx.save();
+        ctx.translate(l.x, l.y);
+        ctx.rotate(l.rotation);
+        ctx.globalAlpha = l.opacity;
+        ctx.fillStyle = "#fdb068";
+
+        const s = Math.round(l.size);
+        ctx.fillRect(-s / 2, -s / 2, s, s);
+
+        ctx.restore();
+
+        if (l.y > canvas.height + 10) {
+          leaves.splice(i, 1);
+        }
+      }
+
+      animId = requestAnimationFrame(draw);
+    }
+
+    draw();
+
+    return () => {
+      cancelAnimationFrame(animId);
+      window.removeEventListener("resize", resize);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} className="falling-leaves" />;
+}