design: seamless logo snake

2026-06-21 20:27:08 +02:00
parent 14b30fe2da
commit 3d9d9cb450
1 changed files with 6 additions and 3 deletions
@@ -76,12 +76,15 @@ function renderSnake(p, accent) {
  const start = Math.max(0, i - L + 1);
  const body = PATH.slice(start, i + 1);
  const n = body.length;
+  // over the final stretch, ease the per-cell gradient/opacity/head-grow toward
+  // the flat, uniform static S so the hand-off to renderStatic is seamless.
+  const settle = Math.max(0, Math.min(1, (p - 0.82) / 0.18));
  return body.map((cell, j) => {
    const t = n > 1 ? j / (n - 1) : 1;        // 0 tail → 1 head
-    const fill = lshade(accent, (t - 0.45) * 0.5); // head brighter, tail darker
-    const opacity = 0.42 + 0.58 * t;
+    const fill = lshade(accent, (t - 0.45) * 0.5 * (1 - settle)); // head brighter, tail darker
+    const opacity = (0.42 + 0.58 * t) + (1 - (0.42 + 0.58 * t)) * settle;
    const isHead = j === n - 1;
-    const grow = isHead ? 1.06 : 1;
+    const grow = (isHead ? 1.06 : 1) * (1 - settle) + 1 * settle;
    const s = LSIZE * grow, d = (LSIZE - s) / 2;
    return <Cell key={j} col={cell[0]} row={cell[1]} fill={fill} opacity={opacity} dx={d} dy={d} w={s} h={s} />;
  });