Add Smoke sketch + mobile touch handling

- New SmokeSketch component: ~26K-cell density grid, semi-Lagrangian
  advection on curl-noise velocity field. No pressure projection needed
  because curl(ψ) is divergence-free by construction. Continuous pointer
  stroke interpolation between frames so fast drags paint without gaps.
- New /sketches/smoke/ page, tint-plum.
- Home feed: add Smoke entry.
- touch-action: none on sketch canvases so mobile users stir the sketch
  instead of scrolling away from it; 45vh → 45svh on mobile stage to
  stop Safari URL-bar shifts from reflowing the hero.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: RuitingMa

src/components/ParticleSketch.astro

@@ -226,5 +226,8 @@
     width: 100%;
     height: 100%;
     background: var(--bg);
+    /* On touch devices, claim the gesture for sketch interaction.
+       Users scroll via the text column below. */
+    touch-action: none;
   }
 </style>

src/components/SmokeSketch.astro

@@ -0,0 +1,350 @@
+---
+---
+
+<canvas id="smoke"></canvas>
+
+<script>
+  // Semi-Lagrangian smoke driven by curl-noise velocity.
+  //
+  // Why this architecture (vs particles):
+  //   A density grid advected along the same velocity field used by
+  //   CurlNoiseSketch. Each frame, for every cell, we trace the trajectory
+  //   one step backward in time and bilinearly sample the upstream density
+  //   (Stam, "Stable Fluids", 1999). This produces continuous smoke with
+  //   real carry-through of patterns, not just a cloud of dots.
+  //
+  // Why NO pressure projection (the usual fluid-sim bottleneck):
+  //   The velocity field is curl(ψ) for a scalar ψ, which is divergence-
+  //   free by construction. Projection exists to enforce div u = 0 for an
+  //   arbitrary u; we get that property for free, so the Poisson solve
+  //   drops out entirely.
+  //
+  // Lifecycle mirrors ParticleSketch / CurlNoiseSketch — module-scope
+  // currentCleanup, idempotent init(), astro:before-swap teardown.
+  let currentCleanup: (() => void) | null = null;
+
+  function init() {
+    if (currentCleanup) return;
+    const canvas = document.getElementById('smoke') as HTMLCanvasElement | null;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d')!;
+    const dpr = window.devicePixelRatio || 1;
+    let w = 0, h = 0;
+
+    // Grid resolution, preserving canvas aspect ratio. Recomputed on
+    // resize. The offscreen buffer is reallocated to match.
+    const TARGET_CELLS = 26000;
+    let GW = 0, GH = 0;
+    let cellW = 0, cellH = 0;
+
+    let density: Float32Array, densityNext: Float32Array;
+    let vxGrid: Float32Array, vyGrid: Float32Array;
+    let off: HTMLCanvasElement, offCtx: CanvasRenderingContext2D, smokeImage: ImageData;
+
+    function resize() {
+      const rect = canvas!.getBoundingClientRect();
+      w = rect.width;
+      h = rect.height;
+      canvas!.width = w * dpr;
+      canvas!.height = h * dpr;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.fillStyle = '#0f0f10';
+      ctx.fillRect(0, 0, w, h);
+
+      const aspect = w / h;
+      GW = Math.max(16, Math.round(Math.sqrt(TARGET_CELLS * aspect)));
+      GH = Math.max(16, Math.round(TARGET_CELLS / GW));
+      cellW = w / GW;
+      cellH = h / GH;
+
+      const N = GW * GH;
+      density = new Float32Array(N);
+      densityNext = new Float32Array(N);
+      vxGrid = new Float32Array(N);
+      vyGrid = new Float32Array(N);
+
+      off = document.createElement('canvas');
+      off.width = GW;
+      off.height = GH;
+      offCtx = off.getContext('2d')!;
+      smokeImage = offCtx.createImageData(GW, GH);
+
+      // Seed a baseline of density so the canvas isn't blank at t=0.
+      // Mild, spatially modulated so it doesn't look flat.
+      for (let j = 0; j < GH; j++) {
+        for (let i = 0; i < GW; i++) {
+          const nx = (i / GW - 0.4);
+          const ny = (j / GH - 0.5);
+          const r2 = nx * nx + ny * ny;
+          density[j * GW + i] = 0.35 * Math.exp(-r2 * 3.0) + 0.08 * Math.random();
+        }
+      }
+    }
+    resize();
+
+    const hash = (x: number, y: number) => {
+      const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
+      return s - Math.floor(s);
+    };
+    const smoothstep = (t: number) => t * t * (3 - 2 * t);
+    const noise = (x: number, y: number) => {
+      const xi = Math.floor(x), yi = Math.floor(y);
+      const xf = x - xi, yf = y - yi;
+      const u = smoothstep(xf), v = smoothstep(yf);
+      const a = hash(xi, yi);
+      const b = hash(xi + 1, yi);
+      const c = hash(xi, yi + 1);
+      const d = hash(xi + 1, yi + 1);
+      return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;
+    };
+    const fbm = (x: number, y: number) =>
+      noise(x, y) + 0.5 * noise(x * 2.0, y * 2.0);
+
+    // Same curl-noise parameters as CurlNoiseSketch so the two pieces
+    // share the same "weather".
+    const SCALE = 0.0042;
+    const EPS   = 0.05;
+    const SPEED = 2.2;  // higher than particle version — density carries
+                        // visual mass so it can move faster without
+                        // leaving the trails-only look behind.
+
+    // Accent color — this is the smoke's hue. Pure white reads as neon
+    // against the dark bg; a muted accent reads as vapor.
+    const BASE_RGB = [220, 214, 198];
+    let SMOKE_RGB = [...BASE_RGB];
+    const tinted = document.querySelector('[class*="tint-"]');
+    if (tinted) {
+      const raw = getComputedStyle(tinted).getPropertyValue('--accent').trim();
+      const m = raw.match(/^#([0-9a-f]{6})$/i);
+      if (m) {
+        // 65/35 blend of paper-warm with the accent — the smoke looks
+        // tinted without losing the "white smoke" read.
+        const acc = [
+          parseInt(m[1].slice(0, 2), 16),
+          parseInt(m[1].slice(2, 4), 16),
+          parseInt(m[1].slice(4, 6), 16),
+        ];
+        SMOKE_RGB = [
+          Math.round(BASE_RGB[0] * 0.65 + acc[0] * 0.35),
+          Math.round(BASE_RGB[1] * 0.65 + acc[1] * 0.35),
+          Math.round(BASE_RGB[2] * 0.65 + acc[2] * 0.35),
+        ];
+      }
+    }
+
+    let mx = -9999, my = -9999;
+    let mxPrev = -9999, myPrev = -9999;
+    const onPointerMove = (e: PointerEvent) => {
+      const rect = canvas!.getBoundingClientRect();
+      mxPrev = mx; myPrev = my;
+      mx = e.clientX - rect.left;
+      my = e.clientY - rect.top;
+    };
+    const onPointerLeave = () => {
+      mx = -9999; my = -9999; mxPrev = -9999; myPrev = -9999;
+    };
+    canvas.addEventListener('pointermove', onPointerMove);
+    canvas.addEventListener('pointerleave', onPointerLeave);
+
+    let paused = false;
+    const onPause = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { paused: boolean };
+      paused = !!detail?.paused;
+    };
+    window.addEventListener('stage:pause', onPause);
+    window.addEventListener('resize', resize);
+
+    // Persistent Gaussian emitters — positioned as fractions of the
+    // canvas so they follow resizes. They sit well left of the text
+    // column so the smoke has space to develop before reaching the
+    // center line.
+    const EMITTERS = [
+      { fx: 0.26, fy: 0.24, fr: 0.13, s: 0.012 },
+      { fx: 0.14, fy: 0.55, fr: 0.11, s: 0.010 },
+      { fx: 0.32, fy: 0.82, fr: 0.12, s: 0.010 },
+    ];
+
+    const DISSIPATION = 0.9955;
+
+    let t = 0;
+    let rafId = 0;
+    let aborted = false;
+    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    function frame() {
+      if (aborted) return;
+      if (!reduced) rafId = requestAnimationFrame(frame);
+      if (paused) return;
+
+      t += 0.0013;
+
+      // --- 1. Velocity field (curl of fbm scalar) on the grid ---
+      // Same pattern as CurlNoiseSketch but per cell instead of per
+      // particle. Time drifts both axes, so eddies slowly reshape.
+      for (let j = 0; j < GH; j++) {
+        for (let i = 0; i < GW; i++) {
+          const xs = (i + 0.5) * cellW * SCALE;
+          const ys = (j + 0.5) * cellH * SCALE;
+          const n_xp = fbm(xs + EPS + t, ys - t);
+          const n_xn = fbm(xs - EPS + t, ys - t);
+          const n_yp = fbm(xs + t, ys + EPS - t);
+          const n_yn = fbm(xs + t, ys - EPS - t);
+          const dpdx = (n_xp - n_xn) / (2 * EPS);
+          const dpdy = (n_yp - n_yn) / (2 * EPS);
+          const idx = j * GW + i;
+          // Velocity in cells-per-frame. Factor cellW/cellH converts
+          // "pixels per frame" (the scale SPEED targets) into cell units.
+          vxGrid[idx] =  dpdy * SPEED / cellW;
+          vyGrid[idx] = -dpdx * SPEED / cellH;
+        }
+      }
+
+      // --- 2. Semi-Lagrangian advection ---
+      // For each cell, trace a trajectory one step back, bilinearly
+      // sample the density there, store into densityNext. This is
+      // unconditionally stable regardless of velocity magnitude —
+      // the trade is numerical diffusion (fine details blur out).
+      for (let j = 0; j < GH; j++) {
+        for (let i = 0; i < GW; i++) {
+          const idx = j * GW + i;
+          let x = i - vxGrid[idx];
+          let y = j - vyGrid[idx];
+          if (x < 0) x = 0; else if (x > GW - 1.001) x = GW - 1.001;
+          if (y < 0) y = 0; else if (y > GH - 1.001) y = GH - 1.001;
+          const i0 = x | 0, j0 = y | 0;
+          const fx = x - i0, fy = y - j0;
+          const i1 = i0 + 1, j1 = j0 + 1;
+          const d00 = density[j0 * GW + i0];
+          const d10 = density[j0 * GW + i1];
+          const d01 = density[j1 * GW + i0];
+          const d11 = density[j1 * GW + i1];
+          const d0 = d00 * (1 - fx) + d10 * fx;
+          const d1 = d01 * (1 - fx) + d11 * fx;
+          densityNext[idx] = (d0 * (1 - fy) + d1 * fy) * DISSIPATION;
+        }
+      }
+
+      // --- 3. Sources: emitters + pointer drag ---
+      for (const e of EMITTERS) {
+        const cx = e.fx * GW;
+        const cy = e.fy * GH;
+        const r = e.fr * GW;
+        const r2 = r * r;
+        const i0 = Math.max(0, Math.floor(cx - r));
+        const i1 = Math.min(GW - 1, Math.ceil(cx + r));
+        const j0 = Math.max(0, Math.floor(cy - r));
+        const j1 = Math.min(GH - 1, Math.ceil(cy + r));
+        for (let j = j0; j <= j1; j++) {
+          for (let i = i0; i <= i1; i++) {
+            const dx = i - cx, dy = j - cy;
+            const d2 = dx * dx + dy * dy;
+            if (d2 < r2) {
+              // Quadratic falloff — smooth edge, peak at center.
+              const falloff = 1 - d2 / r2;
+              densityNext[j * GW + i] += e.s * falloff * falloff;
+            }
+          }
+        }
+      }
+
+      // Pointer injection — interpolate between previous and current
+      // pointer positions so a fast drag paints a continuous stroke
+      // instead of a dotted line of puffs. Step size ≈ half the brush
+      // radius so consecutive stamps overlap.
+      if (mx >= 0 && mx <= w && my >= 0 && my <= h) {
+        const r = Math.max(3, GW * 0.04);
+        const r2 = r * r;
+        const POINTER_S = 0.09;
+
+        const haveSegment = mxPrev >= 0 && mxPrev <= w && myPrev >= 0 && myPrev <= h;
+        const sx = haveSegment ? mxPrev : mx;
+        const sy = haveSegment ? myPrev : my;
+        const dx = mx - sx, dy = my - sy;
+        const segLen = Math.hypot(dx, dy);
+        const stepPx = Math.max(1, (r * 0.5) * cellW);
+        const stamps = Math.max(1, Math.ceil(segLen / stepPx));
+
+        for (let k = 0; k < stamps; k++) {
+          const t = stamps === 1 ? 1 : k / (stamps - 1);
+          const px = sx + dx * t;
+          const py = sy + dy * t;
+          const ci = px / cellW;
+          const cj = py / cellH;
+          const i0 = Math.max(0, Math.floor(ci - r));
+          const i1 = Math.min(GW - 1, Math.ceil(ci + r));
+          const j0 = Math.max(0, Math.floor(cj - r));
+          const j1 = Math.min(GH - 1, Math.ceil(cj + r));
+          for (let j = j0; j <= j1; j++) {
+            for (let i = i0; i <= i1; i++) {
+              const ddx = i - ci, ddy = j - cj;
+              const d2 = ddx * ddx + ddy * ddy;
+              if (d2 < r2) {
+                const falloff = 1 - d2 / r2;
+                densityNext[j * GW + i] += POINTER_S * falloff * falloff;
+              }
+            }
+          }
+        }
+        // After consuming the stroke, collapse prev to current so the
+        // next frame's segment starts from where we are, not where we
+        // were two frames ago.
+        mxPrev = mx; myPrev = my;
+      }
+
+      // --- 4. Swap density buffers ---
+      const tmp = density; density = densityNext; densityNext = tmp;
+
+      // --- 5. Render: density grid → small ImageData → upscale blit ---
+      const data = smokeImage.data;
+      const SR = SMOKE_RGB[0], SG = SMOKE_RGB[1], SB = SMOKE_RGB[2];
+      for (let k = 0; k < density.length; k++) {
+        let d = density[k];
+        if (d > 1) d = 1; else if (d < 0) d = 0;
+        const pi = k * 4;
+        data[pi] = SR;
+        data[pi + 1] = SG;
+        data[pi + 2] = SB;
+        data[pi + 3] = (d * 255) | 0;
+      }
+      offCtx.putImageData(smokeImage, 0, 0);
+      ctx.clearRect(0, 0, w, h);
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = 'high';
+      ctx.drawImage(off, 0, 0, GW, GH, 0, 0, w, h);
+    }
+
+    if (reduced) {
+      canvas.removeEventListener('pointermove', onPointerMove);
+      canvas.removeEventListener('pointerleave', onPointerLeave);
+      for (let i = 0; i < 120; i++) frame();
+      aborted = true;
+    } else {
+      frame();
+    }
+
+    currentCleanup = () => {
+      aborted = true;
+      cancelAnimationFrame(rafId);
+      window.removeEventListener('stage:pause', onPause);
+      window.removeEventListener('resize', resize);
+      currentCleanup = null;
+    };
+    document.addEventListener('astro:before-swap', () => currentCleanup?.(), { once: true });
+  }
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>
+
+<style>
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: var(--bg);
+    /* On touch devices, claim the gesture for sketch interaction.
+       Users scroll via the text column below. */
+    touch-action: none;
+  }
+</style>

src/layouts/BaseLayout.astro

@@ -227,7 +227,9 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
         }
         .stage {
           position: relative;
-          height: 45vh;
+          /* svh = small viewport height, ignores dynamic URL bar on mobile.
+             Without it, 45vh shifts when Safari collapses its chrome.   */
+          height: 45svh;
           border-right: none;
           border-bottom: 1px solid var(--rule);
         }

src/pages/index.astro

@@ -3,6 +3,13 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import LobbySketch from '../components/LobbySketch.astro';
 
 const sketches = [
+  {
+    slug: 'smoke',
+    title: 'Smoke',
+    date: '2026-04-19',
+    kind: 'GENERATIVE',
+    summary: '密度场 + 半拉格朗日平流——真正的烟。',
+  },
   {
     slug: 'hello-world',
     title: 'Flow Field',