Upload index.html

index.html

@@ -1008,6 +1008,9 @@ function buildScene() {
     const nStalks = 2 + ((Math.random() * 3) | 0); // 2..4 stalks per bundle
     for (let j = 0; j < nStalks; j++) {
       const hue = clusterHue + rand(-15, 15);
+      // v4.2: depth split — ~66% "near" (half blur, slightly thinner) for a layered look,
+      // the rest stay far back with the heavy blur.
+      const near = Math.random() < 0.66;
       const st = {
         x: cx + rand(-20, 20),
         h: rand(H * 0.35, H * 0.65), // much taller than foreground seaweed
@@ -1015,8 +1018,10 @@ function buildScene() {
         phase: rand(0, Math.PI * 2),
         speed: rand(0.7, 1.3), // slower, more gentle sway
         hue,
-        width: rand(3, 6), // thinner than before (was too thick)
-        tipW: rand(1.5, 3),
+        near,
+        blur: near ? 4 : 8,   // baked into sprite at build time (no runtime cost)
+        width: near ? rand(2.5, 5) : rand(3, 6),
+        tipW: near ? rand(1.2, 2.4) : rand(1.5, 3),
         branches: [],
         // organic curve parameters (same as foreground seaweed)
         cA1: rand(8, 15), cF1: rand(0.8, 1.6), cP1: rand(0, Math.PI * 2),
@@ -1444,7 +1449,7 @@ function stalkCurveX(w, f) {
 
 // v4: pre-rendered blurry sprites for background seaweed (no runtime blur cost)
 function buildBackSeaweedSprites() {
-  const BLUR = 8; // blur amount baked into the sprite at build time
+  const BLUR_MAX = 8; // far-back blur; near stalks use half (see st.blur)
   const PAD = 30; // extra space around stalk for blur spill
   
   for (const w of backSeaweeds) {
@@ -1479,7 +1484,8 @@ function buildBackSeaweedSprites() {
     spr.height = bh;
     const sc = spr.getContext("2d");
     
-    // Apply blur filter (baked in at build time)
+    // Apply per-stalk blur filter (baked in at build time — zero runtime cost)
+    const BLUR = w.blur || BLUR_MAX;
     sc.filter = `blur(${BLUR}px)`;
     
     // Draw the stalk as a tapered blade