feat: add stroke and glyph easing functions

Author: gkurt

.changeset/hip-lemons-melt.md

@@ -0,0 +1,5 @@
+---
+"tegaki": patch
+---
+
+feat: add stroke and glyph easing functions

packages/renderer/src/core/engine.ts

@@ -743,7 +743,11 @@ export class TegakiEngine {
         const glyph = font.glyphData[char];
 
         if (glyph && entry.hasGlyph) {
-          const localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
+          let localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
+          const glyphEasing = this._timing?.glyphEasing;
+          if (glyphEasing && entry.duration > 0) {
+            localTime = glyphEasing(localTime / entry.duration) * entry.duration;
+          }
           const glyphY = y + halfLeading;
           drawGlyph(
             ctx,
@@ -762,6 +766,7 @@ export class TegakiEngine {
             this._resolvedEffects,
             this._seed + charIdx,
             this._segmentSize,
+            this._timing?.strokeEasing,
           );
         } else if (!entry.hasGlyph && currentTime >= entry.offset + entry.duration) {
           const baseline = y + halfLeading + (font.ascender / font.unitsPerEm) * fontSize;

packages/renderer/src/lib/drawGlyph.ts

@@ -74,6 +74,11 @@ function noise1d(x: number, seed: number): number {
   return hash(i + seed * 7919) * (1 - t) + hash(i + 1 + seed * 7919) * t;
 }
 
+/** Default stroke easing: ease-out exponential. */
+function defaultStrokeEasing(t: number): number {
+  return 1 - (1 - t) * (1 - t); // Ease out quad
+}
+
 /**
  * Draw a single glyph's strokes onto a canvas context, animated up to `localTime`.
  * `localTime` is seconds relative to this glyph's start (0 = glyph begins).
@@ -88,6 +93,7 @@ export function drawGlyph(
   effects: ResolvedEffect[] = [],
   seed = 0,
   segmentSize?: number,
+  strokeEasing: ((t: number) => number) | undefined = defaultStrokeEasing,
 ) {
   const scale = pos.fontSize / pos.unitsPerEm;
   const ox = pos.x;
@@ -157,7 +163,8 @@ export function drawGlyph(
   for (const stroke of glyph.s) {
     if (localTime < stroke.d) continue;
     const elapsed = localTime - stroke.d;
-    const progress = Math.min(elapsed / stroke.a, 1);
+    const linearProgress = Math.min(elapsed / stroke.a, 1);
+    const progress = strokeEasing ? strokeEasing(linearProgress) : linearProgress;
 
     const pts = stroke.p;
     if (pts.length === 0) continue;

packages/renderer/src/lib/timeline.ts

@@ -10,9 +10,21 @@ export interface TimelineConfig {
   lineGap?: number;
   /** Duration for characters without glyph data (seconds). Default: `0.2` */
   unknownDuration?: number;
+  /**
+   * Easing function for each stroke's animation progress `(0–1) → (0–1)`.
+   * Applied per-stroke to map linear draw progress to eased progress.
+   * Default: ease-out exponential (`1 - 2^(-10t)`).
+   */
+  strokeEasing?: (t: number) => number;
+  /**
+   * Easing function for each glyph's local time progress `(0–1) → (0–1)`.
+   * Applied per-glyph to map linear time within the glyph to eased time.
+   * Default: linear (no easing).
+   */
+  glyphEasing?: (t: number) => number;
 }
 
-const DEFAULTS: Required<TimelineConfig> = {
+const DEFAULTS = {
   glyphGap: 0.1,
   wordGap: 0.15,
   lineGap: 0.3,