glyphdust 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to **glyphdust** are documented here.
 The format follows [Keep a Changelog](https://keepachangelog.com/), and the
 project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.3.0] — 2026-06-28
+
+Non-breaking feature release. Defaults reproduce 0.2.1 exactly.
+
+### Added
+
+- **Mixed fonts in one glyph (`segments`)** — a `TextKeyframe` can now carry a
+  `segments: { text, font? }[]` array. Each run is stamped with its own font and
+  flows inline (a `\n` inside any run breaks the line; the next run continues on the
+  new line), so a single particle glyph can blend, e.g., a bold serif word with a
+  light sans one. `text` stays the accessible/`resolveToDom` string; per-run `font`
+  falls back to the keyframe `font`. Works on the normal and `dense` sampling paths;
+  ignored under `domSelector` (the DOM provides layout). Defaults unchanged —
+  omitting `segments` reproduces prior behavior exactly.
+  _Why: particles only ride "ink", so the stamp was never font-bound — the limit was
+  the API exposing one font. (提案者: 凜さん)_
+
 ## [0.2.1] — 2026-06-26
 
 Flexibility & polish release. Glyphdust is no longer scroll-and-hero only — it now

package/README.md

@@ -155,13 +155,35 @@ type Keyframe = TextKeyframe | ScatterKeyframe;
 | field | type | description |
 |---|---|---|
 | `text` | `string` | Text to render. Use `\n` for line breaks. |
+| `segments` | `{ text, font? }[]?` | Mix fonts in one glyph (see below). Particles are stamped from the runs; `text` stays the accessible / `resolveToDom` string. |
 | `domSelector` | `string?` | Selector of a real element; particles align pixel-perfect to its rect & font. |
 | `resolveToDom` | `boolean?` | At the finale, cross-fade particles → real DOM text (usually the last keyframe). |
 | `dense` | `boolean?` | High-density, uniform sampling (best for solid wordmarks). |
-| `font` | `string?` | Canvas2D `font` string. Defaults to a density-appropriate value. |
+| `font` | `string?` | Canvas2D `font` string. Defaults to a density-appropriate value. Also the default for `segments` runs. |
 | `worldW` | `number?` | Visible world width to fit the glyph into. |
 | `offsetX` / `offsetY` | `number?` | World-space offset (right / up are positive). |
 
+#### Mix fonts in one glyph (`segments`)
+
+Particles just ride wherever there's "ink", so a single glyph isn't bound to one
+typeface. Split a keyframe into `segments` and each run gets its own `font`,
+flowing inline (a `\n` inside a run starts a new line; the next run continues there):
+
+```tsx
+{
+  type: "text",
+  text: "Mix fonts",                 // accessible / resolve string
+  segments: [
+    { text: "Mix ",  font: "900 200px Georgia, serif" },        // bold serif
+    { text: "fonts", font: "300 150px 'Helvetica Neue', sans-serif" }, // light sans
+  ],
+}
+```
+
+Runs without a `font` fall back to the keyframe `font`. `segments` is ignored when
+`domSelector` is set (the DOM provides the layout there). Particle **color** is still
+governed globally by `colors` (ink/accent ratio), not per segment.
+
 **`ScatterKeyframe`** (`type: "scatter"`) — scatters particles into a random cloud:
 
 | field | type | description |

package/dist/index.cjs

@@ -54,6 +54,38 @@ function fillScatterCluster(out, count, offsetX, offsetY, random) {
     out[i * 3 + 2] = (random() - 0.5) * 0.2;
   }
 }
+function segmentsToRunLines(segments, defaultFont) {
+  const lines = [[]];
+  for (const seg of segments) {
+    const font = seg.font ?? defaultFont;
+    const parts = seg.text.split("\n");
+    parts.forEach((part, i) => {
+      if (i > 0) lines.push([]);
+      if (part.length > 0) lines[lines.length - 1].push({ text: part, font });
+    });
+  }
+  return lines;
+}
+function drawSegmentedLines(ctx, runLines, cw, ch, lineHeight, align, leftPad) {
+  ctx.fillStyle = "#000";
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "left";
+  const blockH = lineHeight * (runLines.length - 1);
+  runLines.forEach((runs, i) => {
+    const y = ch / 2 - blockH / 2 + i * lineHeight;
+    let total = 0;
+    for (const r of runs) {
+      ctx.font = r.font;
+      total += ctx.measureText(r.text).width;
+    }
+    let x = align === "left" ? leftPad : cw / 2 - total / 2;
+    for (const r of runs) {
+      ctx.font = r.font;
+      ctx.fillText(r.text, x, y);
+      x += ctx.measureText(r.text).width;
+    }
+  });
+}
 function buildTextTargets(count, lines, opts) {
   const out = new Float32Array(count * 3);
   const random = opts.random ?? Math.random;
@@ -62,17 +94,22 @@ function buildTextTargets(count, lines, opts) {
   const ctx = createSamplingContext(cw, ch);
   if (!ctx) return out;
   const align = opts.align ?? "center";
-  ctx.clearRect(0, 0, cw, ch);
-  ctx.fillStyle = "#000";
-  ctx.textAlign = align === "left" ? "left" : "center";
-  ctx.textBaseline = "middle";
-  ctx.font = opts.font;
-  const drawX = align === "left" ? cw * 0.04 : cw / 2;
   const lh = opts.lineHeight;
-  const blockH = lh * (lines.length - 1);
-  lines.forEach((line, i) => {
-    ctx.fillText(line, drawX, ch / 2 - blockH / 2 + i * lh);
-  });
+  ctx.clearRect(0, 0, cw, ch);
+  if (opts.segments && opts.segments.length > 0) {
+    const runLines = segmentsToRunLines(opts.segments, opts.font);
+    drawSegmentedLines(ctx, runLines, cw, ch, lh, align, cw * 0.04);
+  } else {
+    ctx.fillStyle = "#000";
+    ctx.textAlign = align === "left" ? "left" : "center";
+    ctx.textBaseline = "middle";
+    ctx.font = opts.font;
+    const drawX = align === "left" ? cw * 0.04 : cw / 2;
+    const blockH = lh * (lines.length - 1);
+    lines.forEach((line, i) => {
+      ctx.fillText(line, drawX, ch / 2 - blockH / 2 + i * lh);
+    });
+  }
   const step = opts.step ?? 2;
   const pts = collectFilledPixels(ctx, cw, ch, step);
   const filled = pts.length / 2;
@@ -106,15 +143,20 @@ function buildDenseTextTargets(count, lines, opts) {
   const ctx = createSamplingContext(cw, ch);
   if (!ctx) return out;
   ctx.clearRect(0, 0, cw, ch);
-  ctx.fillStyle = "#000";
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  ctx.font = opts.font;
   const lh = ch * (opts.lineHeightRatio ?? 0.46);
-  const blockH = lh * (lines.length - 1);
-  lines.forEach((line, i) => {
-    ctx.fillText(line, cw / 2, ch / 2 - blockH / 2 + i * lh);
-  });
+  if (opts.segments && opts.segments.length > 0) {
+    const runLines = segmentsToRunLines(opts.segments, opts.font);
+    drawSegmentedLines(ctx, runLines, cw, ch, lh, "center", cw * 0.04);
+  } else {
+    ctx.fillStyle = "#000";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.font = opts.font;
+    const blockH = lh * (lines.length - 1);
+    lines.forEach((line, i) => {
+      ctx.fillText(line, cw / 2, ch / 2 - blockH / 2 + i * lh);
+    });
+  }
   const step = opts.step ?? 1;
   const pts = collectFilledPixels(ctx, cw, ch, step);
   const filled = pts.length / 2;
@@ -517,6 +559,7 @@ function buildKeyframeTargets(kf, count, ctx) {
   if (kf.dense) {
     return buildDenseTextTargets(count, lines, {
       font: kf.font ?? DEFAULT_DENSE_FONT,
+      segments: kf.segments,
       worldW: kf.worldW ?? ctx.visW * (ctx.mobile ? 0.86 : 0.62),
       offsetX: kf.offsetX ?? 0,
       offsetY: kf.offsetY ?? 0,
@@ -528,6 +571,7 @@ function buildKeyframeTargets(kf, count, ctx) {
   }
   return buildTextTargets(count, lines, {
     font: kf.font ?? DEFAULT_TEXT_FONT,
+    segments: kf.segments,
     worldW: kf.worldW ?? ctx.visW * 0.7,
     lineHeight: 178,
     offsetX: kf.offsetX ?? 0,
@@ -1144,7 +1188,7 @@ function GlyphDust(props) {
 }
 
 // src/index.ts
-var VERSION = "0.2.1";
+var VERSION = "0.3.0";
 
 exports.DEFAULT_TRIGGER_HEIGHT = DEFAULT_TRIGGER_HEIGHT;
 exports.FRAGMENT_SHADER = FRAGMENT_SHADER;