From d9a6181ae2fd054aaf6df43bc975c14e50091cbf Mon Sep 17 00:00:00 2001
From: ddidderr <ddidderr@paul.network>
Date: Sun, 21 Jun 2026 20:49:30 +0200
Subject: [PATCH] design: seamless logo snake implemented

---
 .../src/components/LiveLogo.tsx                   | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/crates/lanspread-tauri-deno-ts/src/components/LiveLogo.tsx b/crates/lanspread-tauri-deno-ts/src/components/LiveLogo.tsx
index 7d2ad3e..7301398 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/LiveLogo.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/LiveLogo.tsx
@@ -110,12 +110,15 @@ function renderSnake(p: number, accent: string): ReactElement[] {
     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 t = n > 1 ? j / (n - 1) : 1;                          // 0 tail → 1 head
+        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;
         const 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} />;
@@ -160,7 +163,9 @@ const RENDER: Record<Trick, (p: number, accent: string) => ReactElement[]> = {
     rgb: renderRGB,
 };
 const TRICK_DUR: Record<Trick, number> = { snake: 2600, glitch: 1100, rgb: 1350 };
-const POOL: ReadonlyArray<Trick> = ['snake', 'snake', 'snake', 'rgb', 'glitch']; // snake-weighted
+// snake is the long (~2.6s) headline trick, so it's deliberately rare —
+// half as likely as either of the short glitch/rgb flickers.
+const POOL: ReadonlyArray<Trick> = ['snake', 'rgb', 'rgb', 'glitch', 'glitch'];
 function randomTrick(): Trick {
     return POOL[Math.floor(Math.random() * POOL.length)];
 }