@kolkrabbi/kol-component 0.321.0 → 0.322.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.321.0",
+  "version": "0.322.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
+    "@kolkrabbi/kol-growth": "^0.4.0",
     "@kolkrabbi/kol-search": "^0.3.0",
-    "@kolkrabbi/kol-growth": "^0.3.0",
     "@kolkrabbi/kol-markdown": "^0.2.0"
   },
   "peerDependencies": {

package/src/organisms/GrowthLineStage.jsx

@@ -4,104 +4,184 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 
 /* THE GROWING LINE AS A STAGE (GrowthLineStage, kol-atlas 2026-10-30) — kol-fxr's HomeStage sim loop on
  * @kolkrabbi/kol-growth: one closed line grows into `shape`, packing tighter where it is dark. One <canvas> filling its
- * box at dpr ≤ 2; the sim runs in CSS px, so the spacing reads the same on a phone as on a desk. It grows to its cap and
- * then stops drawing (no rAF); a resize starts it again. Ink is the canvas's computed `color` (a `text-*` class), a
- * `data-theme` flip repaints a finished line; the stage clears to transparent, no paper.
+ * box at dpr ≤ 2; the sim runs in CSS px, so the spacing reads the same on a phone as on a desk. Ink is the canvas's
+ * computed `color` (a `text-*` class), a `data-theme` flip repaints a sleeping line; the stage clears to transparent.
  *
- * THE POINTER IS A FORCE — a move pushes the line aside, a press blasts a crater it regrows into (engine `poke`);
- * either wakes a finished line, which settles and sleeps again a second after the pointer stops. A resting pointer is
- * not a force. THE LINE RESTS (engine `settle`, kol-fxr 2026-10-30): the packed interior cools and stops, so only the
- * growing front and what the pointer touches move; it runs 48px past the edges (engine `bleed`), frozen there. Read on
- * the window,
- * so the stage can sit behind a page; a press on a control is the control's.
+ * THE LINE SETTLES (engine `settle`, GrowthLineIntro 2026-10-31, kol-fxr plan 45): every node carries a heat its motion,
+ * a split, the pointer or a pressing neighbour raise and that fades by itself; the loop steps while the line grows or
+ * anything is warm — two steps a frame while it grows, one while it settles — and goes still without a hard stop. It runs
+ * 48px past the edges (engine `bleed`), frozen there. THE POINTER IS A FORCE, soft: a move pushes the line aside as hard
+ * as it moves (a resting pointer is no force), a press blasts a crater it regrows into. Read on the window, so the stage
+ * can sit behind a page; a press on a control is the control's.
  *
- * REDUCED MOTION — the finished line is grown off screen and drawn once: no animation, no pointer force.
+ * A RESIZE KEEPS THE LINE — the nodes re-centre by half the size change, the shape is re-sampled at the new aspect, and
+ * a bigger box wakes the line to grow on into it; it never reseeds. A SLOW WAVE (`wave`, default 24 s · 9 px · 640 px
+ * crests) drifts the drawn line every frame, the sim untouched; `wave={false}` lets a settled line sleep (no rAF).
+ *
+ * THE INTRO (`intro`): one line from load to page. It grows on the shape's density (at `fit` 0.5) for 3.8 s, drawn only
+ * through the shape in the emphasis ink; rests 4 s breathing (ink 0.7–1.0 on a 2 s period, growth off after the first
+ * breath); then lets go over 4 s — the density blends shape → orb, `params` take over, every node warms, the stage's ink
+ * fades up as the shape's fades out, and the pointer waits until it ends. `onIntroEnd` fires then.
+ *
+ * REDUCED MOTION — no intro (`onIntroEnd` fires at once), no wave, no pointer force: the finished line is grown off
+ * screen and drawn once.
  *
  * `shape` — 'orb' · an SVG path `d` (centred at `fit` of the box) · `(w, h) => canvas` (dark on light). */
-const ORB_PARAMS = { minGap: 6, maxGap: 24, contrast: 1.4, growth: 8 }
+const ORB_PARAMS = { minGap: 6, maxGap: 24, contrast: 1.4, growth: 2.5 }
+const WAVE = { ms: 24000, a: 9, l: 640 }
+/* the intro, ms from its first frame: the line fills the shape · it breathes · the shape lets go */
+const INTRO_PARAMS = { minGap: 5, maxGap: 18, contrast: 1.2, growth: 5 }
+const MARK_MS = 3800, REST_MS = 4000, BREATH_MS = 2000, RELEASE_MS = 4000
 
-const shapeCanvas = (shape, w, h, fit) => {
+const shapeCanvas = (shape, w, h, fit, W) => {
   if (typeof shape === 'function') return shape(w, h)
-  if (shape === 'orb' || !shape) return orbCanvas(w / h)
-  return pathCanvas(shape, w / h, fit)
+  if (shape === 'orb' || !shape) return orbCanvas(w / h, W)
+  return pathCanvas(shape, w / h, fit, W)
 }
 
-export default function GrowthLineStage({ shape = 'orb', fit = 0.6, params = ORB_PARAMS, cap, pointer = true, seed, className = '' }) {
+export default function GrowthLineStage({ shape = 'orb', fit, params = ORB_PARAMS, cap, pointer = true, seed, wave = WAVE, intro = false, onIntroEnd, className = '' }) {
   const ref = useRef(null)
   const reduced = usePrefersReducedMotion()
   /* the props are read at (re)start; the effect re-runs when one changes by value */
-  const key = JSON.stringify([typeof shape === 'function' ? null : shape, fit, params, cap, pointer, seed, reduced])
+  const key = JSON.stringify([typeof shape === 'function' ? null : shape, fit, params, cap, pointer, seed, wave, intro, reduced])
   const shapeRef = useRef(shape)
   shapeRef.current = shape
+  const endRef = useRef(onIntroEnd)
+  endRef.current = onIntroEnd
 
   useEffect(() => {
     const canvas = ref.current
     if (!canvas) return undefined
-    let sim = null, raf = 0, w = 0, h = 0
-    let ptr = null, sm = null, idle = 0, full = false
+    const k = fit ?? (intro ? 0.5 : 0.6)
+    const drift = wave && !reduced ? wave : null
+    const capOf = () => cap ?? Math.round(w * h / 90)
+    let sim = null, raf = 0, w = 0, h = 0, dpr = 1, it = null, orbed = false
+    let ptr = null, sm = null
     const force = pointer && !reduced
-    const start = () => {
+    const fitCanvas = () => {
       const r = canvas.getBoundingClientRect()
-      w = Math.max(1, r.width); h = Math.max(1, r.height)
-      const src = shapeCanvas(shapeRef.current, w, h, fit)
-      if (!src) return false
-      const dpr = Math.min(2, window.devicePixelRatio || 1)
+      w = Math.max(1, r.width); h = Math.max(1, r.height); dpr = Math.min(2, window.devicePixelRatio || 1)
       canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr)
       canvas.getContext('2d').setTransform(dpr, 0, 0, dpr, 0, 0)
-      sim = new Growth({
-        w, h, density: densityFrom(src),
-        rand: seed == null ? Math.random : mulberry32(seed),
-        cap: cap ?? Math.min(14000, Math.round(w * h / 112)),
-      })
-      /* the line runs past the edges and freezes there instead of piling into them, and rests where it is done; one
-       * step a frame keeps 0.2.0's pace now that only the front grows */
-      sim.setParams({ bleed: 48, settle: 120, ...params })
-      sim.seed()
-      full = false
+    }
+    /* the shape as an alpha mask at the canvas's own resolution (dark → opaque), and the layer the line is drawn on
+     * before the mask cuts it */
+    const masks = () => {
+      const src = shapeCanvas(shapeRef.current, w, h, k, canvas.width)
+      const m = document.createElement('canvas'); m.width = canvas.width; m.height = canvas.height
+      const g = m.getContext('2d', { willReadFrequently: true })
+      if (src) g.drawImage(src, 0, 0, m.width, m.height)
+      const img = g.getImageData(0, 0, m.width, m.height), d = img.data
+      for (let i = 0; i < d.length; i += 4) { d[i + 3] = 255 - (0.2126 * d[i] + 0.7152 * d[i + 1] + 0.0722 * d[i + 2]); d[i] = d[i + 1] = d[i + 2] = 0 }
+      g.putImageData(img, 0, 0)
+      it.mask = m
+      it.layer = document.createElement('canvas'); it.layer.width = canvas.width; it.layer.height = canvas.height
+    }
+    const end = () => { it = null; endRef.current?.() }
+    const start = () => {
+      fitCanvas()
+      const src = shapeCanvas(shapeRef.current, w, h, k)
+      if (!src) return false
+      sim = new Growth({ w, h, density: densityFrom(src), rand: seed == null ? Math.random : mulberry32(seed), cap: capOf() })
+      sim.setParams({ bleed: 48, settle: 60, ...(intro && !reduced ? INTRO_PARAMS : params) })
+      if (intro && !reduced) {
+        sim.seed(0.5, 0.5)
+        const probe = document.createElement('span'); probe.className = 'text-emphasis'; canvas.parentElement.append(probe)
+        it = { t0: 0, ink: 1, out: 0, bright: getComputedStyle(probe).color, mark: sim.density, mix: null }
+        probe.remove(); masks()
+      } else {
+        sim.seed()
+        if (intro) endRef.current?.()
+      }
       return true
     }
-    const paint = () => {
-      const g = canvas.getContext('2d')
+    /* the shape lets go: the page's spacing, every node warm, the density blending from the shape to the orb */
+    const release = () => {
+      orbed = true
+      const orb = densityFrom(orbCanvas(w / h))
+      it.orb = orb; it.mix = { cols: orb.cols, rows: orb.rows, data: new Float32Array(orb.data.length) }
+      sim.density = it.mix
+      sim.setParams(params)
+      sim.full = false; sim.heat.fill(1); sim.hot = sim.x.length
+    }
+    const blend = (u) => {
+      const a = it.mark.data, b = it.orb.data, m = it.mix.data
+      /* the mark was sampled at its own grid; read it by position if the orb's differs */
+      if (a.length === m.length) for (let i = 0; i < m.length; i++) m[i] = a[i] + (b[i] - a[i]) * u
+      else for (let i = 0; i < m.length; i++) m[i] = b[i] * u
+    }
+    const paint = (now) => {
+      const g = canvas.getContext('2d'), ink = getComputedStyle(canvas).color
+      const wv = drift && { a: drift.a, k: (2 * Math.PI) / drift.l, p: (2 * Math.PI * now) / drift.ms }
       g.clearRect(0, 0, w, h)
-      sim.draw(g, w, h, { ink: getComputedStyle(canvas).color, width: 1 })
+      if (!it) { sim.draw(g, w, h, { ink, width: 1, wave: wv }); return }
+      const L = it.layer.getContext('2d')
+      L.globalCompositeOperation = 'source-over'; L.setTransform(1, 0, 0, 1, 0, 0); L.clearRect(0, 0, it.layer.width, it.layer.height)
+      L.setTransform(dpr, 0, 0, dpr, 0, 0); sim.draw(L, w, h, { ink: it.bright, width: 1, wave: wv })
+      /* the whole line in the stage's ink once the shape lets go, fading up; the shape's in the emphasis ink, at the breath */
+      if (it.out > 0) { g.globalAlpha = it.out; sim.draw(g, w, h, { ink, width: 1, wave: wv }); g.globalAlpha = 1 }
+      L.setTransform(1, 0, 0, 1, 0, 0); L.globalCompositeOperation = 'destination-in'; L.drawImage(it.mask, 0, 0)
+      g.save(); g.setTransform(1, 0, 0, 1, 0, 0)
+      g.globalAlpha = it.ink * (1 - it.out); g.drawImage(it.layer, 0, 0)
+      g.restore()
     }
-    /* grows until the cap, then the loop stops — a finished line costs nothing until the pointer touches it */
-    const frame = () => {
-      /* FINISHED ONCE: at the cap, merges drop the count back under it — read live, the whole line kept stepping
-       * forever, which was the jitter */
-      if (sim.x.length >= sim.cap) full = true
-      const growing = !full
-      if (ptr) {
-        /* low-passed like the editor's stage pointer — the raw one twitches */
-        const to = sm ? { x: sm.x + (ptr.x - sm.x) * 0.1, y: sm.y + (ptr.y - sm.y) * 0.1 } : { x: ptr.x, y: ptr.y }
-        /* a RESTING pointer is not a force — poked every frame, the line under it churned forever */
-        if (ptr.down || !sm || Math.hypot(to.x - sm.x, to.y - sm.y) > 0.3) { sim.poke(to.x, to.y, ptr.down); idle = 60 }
+    /* the line steps while it grows or anything is warm; with a wave it is drawn every frame, without one it sleeps */
+    const frame = (now) => {
+      let steps = !sim.full ? 2 : sim.hot > 0 ? 1 : 0
+      if (it) {
+        if (!it.t0) it.t0 = now
+        const t = now - it.t0
+        if (t < MARK_MS) steps = 4
+        else if (t < MARK_MS + REST_MS) {
+          /* it keeps filling the shape's far corners through the first breath, then holds */
+          if (!it.rest && t > MARK_MS + BREATH_MS) { it.rest = true; sim.setParams({ growth: 0 }) }
+          it.ink = 0.7 + 0.3 * Math.cos((2 * Math.PI * (t - MARK_MS)) / BREATH_MS)
+        } else {
+          if (!it.free) { it.free = true; it.ink = 1; release() }
+          const u = Math.min(1, (t - MARK_MS - REST_MS) / RELEASE_MS)
+          blend(u); it.out = u
+          if (u >= 1) { sim.density = it.orb; end() }
+        }
+      }
+      if (ptr && !it) {
+        /* low-passed — the raw one twitches; 0.35 follows without lag */
+        const to = sm ? { x: sm.x + (ptr.x - sm.x) * 0.35, y: sm.y + (ptr.y - sm.y) * 0.35 } : { x: ptr.x, y: ptr.y }
+        /* the push is the pointer's own speed — a resting pointer is no force, a slow drift a light brush, a sweep a shove */
+        const speed = sm ? Math.hypot(to.x - sm.x, to.y - sm.y) : 0
+        if (ptr.down || speed > 0.3) { sim.poke(to.x, to.y, ptr.down, ptr.down ? 1 : Math.min(1, speed / 6)); steps = Math.max(steps, 1) }
         sm = to
       } else sm = null
-      /* settled stretches rest, so a step moves only the growing front and the pointer's wake */
-      if (growing || idle > 0) sim.step()
-      if (idle > 0) idle--
-      paint()
-      raf = growing || idle > 0 ? requestAnimationFrame(frame) : 0
-    }
-    const wake = () => { if (!raf && sim) raf = requestAnimationFrame(frame) }
-    const restart = () => {
-      cancelAnimationFrame(raf); raf = 0
-      if (!start()) return
-      /* reduced motion grows 4× the splits a step: nothing is watched growing, so it reaches the cap sooner */
-      if (reduced) sim.setParams({ growth: sim.growth * 4 })
-      raf = requestAnimationFrame(reduced ? settle : frame)
+      for (let i = 0; i < steps; i++) sim.step()
+      paint(now)
+      raf = drift || it || ptr || !sim.full || sim.hot > 0 ? requestAnimationFrame(frame) : 0
     }
+    const wake = () => { if (!raf && sim && !reduced) raf = requestAnimationFrame(frame) }
     /* reduced motion: grown to the end off screen, ~12ms of steps a frame so the page never blocks, then drawn once */
-    const settle = () => {
+    const grow = () => {
       const t = performance.now()
-      while (sim.x.length < sim.cap && performance.now() - t < 12) sim.step()
-      if (sim.x.length < sim.cap) { raf = requestAnimationFrame(settle); return }
+      while ((!sim.full || sim.hot > 0) && performance.now() - t < 12) sim.step()
+      if (!sim.full || sim.hot > 0) { raf = requestAnimationFrame(grow); return }
       raf = 0
-      paint()
+      paint(0)
+    }
+    /* A RESIZE KEEPS THE LINE: re-centred by half the size change, the frame and the shape re-sampled, never reseeded */
+    const resize = () => {
+      const r = canvas.getBoundingClientRect()
+      if (!sim || (Math.round(r.width) === Math.round(w) && Math.round(r.height) === Math.round(h))) return
+      const ow = w, oh = h
+      fitCanvas()
+      const dx = (w - ow) / 2, dy = (h - oh) / 2
+      for (let i = 0; i < sim.x.length; i++) { sim.x[i] += dx; sim.y[i] += dy }
+      sim.w = w; sim.h = h
+      sim.setParams({ cap: capOf() })
+      if (it) masks()
+      /* released from the intro, the line's shape is the orb */
+      else { const src = orbed ? orbCanvas(w / h) : shapeCanvas(shapeRef.current, w, h, k); if (src) sim.density = densityFrom(src) }
+      if (w > ow || h > oh) { sim.full = false; sim.heat.fill(0.5); sim.hot = sim.x.length }
+      if (reduced) { cancelAnimationFrame(raf); raf = requestAnimationFrame(grow) } else wake()
     }
-    restart()
-    const ro = new ResizeObserver(restart)
+    if (start()) raf = requestAnimationFrame(reduced ? grow : frame)
+    const ro = new ResizeObserver(resize)
     ro.observe(canvas)
     const at = (e) => {
       const r = canvas.getBoundingClientRect()
@@ -118,8 +198,8 @@ export default function GrowthLineStage({ shape = 'orb', fit = 0.6, params = ORB
       window.addEventListener('pointerup', onUp)
       document.addEventListener('pointerleave', onLeave)
     }
-    /* the ink follows a theme flip on a finished line too */
-    const mo = new MutationObserver(() => { if (!raf && sim) paint() })
+    /* the ink follows a theme flip on a sleeping line too */
+    const mo = new MutationObserver(() => { if (!raf && sim) paint(performance.now()) })
     mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
     return () => {
       cancelAnimationFrame(raf); ro.disconnect(); mo.disconnect()