tegaki 0.2.2 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tegaki",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
   "description": "React component for rendering animated handwriting from any font",
   "keywords": [
@@ -54,7 +54,7 @@
     "typecheck": "tsc --noEmit",
     "build": "tsdown src/index.ts --dts --sourcemap",
     "prepack": "bun run build && bun ../../scripts/prepareForRelease.ts",
-    "generate-fonts": "bun --filter tegaki-generator start generate Caveat --chars '0' --output ../renderer/fonts/caveat && bun --filter tegaki-generator start generate Italianno --chars '0' --output ../renderer/fonts/italianno && bun --filter tegaki-generator start generate Tangerine --chars '0' --output ../renderer/fonts/tangerine && bun --filter tegaki-generator start generate Parisienne --chars '0' --output ../renderer/fonts/parisienne"
+    "generate-fonts": "bun --filter tegaki-generator start generate Caveat --output ../renderer/fonts/caveat && bun --filter tegaki-generator start generate Italianno --output ../renderer/fonts/italianno && bun --filter tegaki-generator start generate Tangerine --output ../renderer/fonts/tangerine && bun --filter tegaki-generator start generate Parisienne --output ../renderer/fonts/parisienne"
   },
   "dependencies": {
     "@chenglou/pretext": "^0.0.4"

package/src/env.d.ts

@@ -2,9 +2,3 @@ declare module '*.ttf' {
   const src: string;
   export default src;
 }
-
-declare module '*.svg' {
-  import type { FC, SVGProps } from 'react';
-  const ReactComponent: FC<SVGProps<SVGSVGElement>>;
-  export default ReactComponent;
-}

package/src/index.ts

@@ -1,6 +1,7 @@
 export { drawGlyph } from './lib/drawGlyph.ts';
 export {
   TegakiRenderer,
+  type TegakiRendererHandle,
   type TegakiRendererProps,
   type TimeControlMode,
   type TimeControlProp,

package/src/lib/TegakiRenderer.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { type ComponentProps, type Ref, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { TegakiBundle, TegakiEffects } from '../types.ts';
 import { drawFallbackGlyph } from './drawFallbackGlyph.ts';
 import { drawGlyph } from './drawGlyph.ts';
@@ -69,7 +69,33 @@ export type TimeControlMode = {
  */
 export type TimeControlProp = null | undefined | number | 'css' | TimeControlMode[keyof TimeControlMode];
 
-export interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string, never>> extends Omit<ComponentProps<'div'>, 'children'> {
+/** Imperative handle exposed via the `ref` prop. */
+export interface TegakiRendererHandle {
+  /** The root DOM element. */
+  getElement(): HTMLDivElement | null;
+  /** Current animation time in seconds. */
+  getCurrentTime(): number;
+  /** Total timeline duration in seconds. */
+  getDuration(): number;
+  /** Whether the animation is currently playing (uncontrolled mode only). */
+  getIsPlaying(): boolean;
+  /** Whether the animation has reached the end. */
+  getIsComplete(): boolean;
+  /** Resume playback (uncontrolled mode only). No-op in controlled/css mode. */
+  play(): void;
+  /** Pause playback (uncontrolled mode only). No-op in controlled/css mode. */
+  pause(): void;
+  /** Jump to a specific time in seconds (uncontrolled mode only). No-op in controlled/css mode. */
+  seek(time: number): void;
+  /** Seek to 0 and play (uncontrolled mode only). No-op in controlled/css mode. */
+  restart(): void;
+}
+
+export interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string, never>>
+  extends Omit<ComponentProps<'div'>, 'children' | 'ref'> {
+  /** Imperative handle ref for playback controls and DOM access. */
+  ref?: Ref<TegakiRendererHandle>;
+
   /** TegakiBundle with font data and animated glyph SVGs. */
   font?: TegakiBundle;
 
@@ -89,10 +115,6 @@ export interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string,
   /** Called once when the animation reaches the end of the timeline. */
   onComplete?: () => void;
 
-  /** Rendering mode. `'canvas'` draws strokes on a `<canvas>` (requires
-   * `font.glyphData`), `'svg'` uses animated SVG elements. Default: `'canvas'` */
-  mode?: 'canvas' | 'svg';
-
   /** Visual effects applied during canvas rendering. */
   effects?: E;
 
@@ -110,12 +132,12 @@ export interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string,
 // --- Component ---
 
 export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string, never>>({
+  ref,
   font,
   text,
   children,
   time: timeProp,
   onComplete,
-  mode = 'canvas',
   effects,
   segmentSize,
   timing,
@@ -143,33 +165,73 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
   const controlledTime = timeControl.mode === 'controlled' ? timeControl.value : undefined;
   const defaultTime = timeControl.mode === 'uncontrolled' ? (timeControl.initialTime ?? 0) : 0;
   const speed = timeControl.mode === 'uncontrolled' ? (timeControl.speed ?? 1) : 1;
-  const playing = timeControl.mode === 'uncontrolled' ? (timeControl.playing ?? true) : false;
+  const propPlaying = timeControl.mode === 'uncontrolled' ? (timeControl.playing ?? true) : false;
   const loop = timeControl.mode === 'uncontrolled' ? (timeControl.loop ?? false) : false;
   const catchUp = timeControl.mode === 'uncontrolled' ? (timeControl.catchUp ?? 0) : 0;
   const onTimeChange = timeControl.mode === 'uncontrolled' ? timeControl.onTimeChange : undefined;
 
+  // Imperative playing override (undefined = follow prop)
+  const [playingOverride, setPlayingOverride] = useState<boolean | undefined>(undefined);
+  const playing = playingOverride ?? propPlaying;
+
+  // Reset override when the prop changes so the prop regains control
+  const prevPropPlaying = useRef(propPlaying);
+  if (prevPropPlaying.current !== propPlaying) {
+    prevPropPlaying.current = propPlaying;
+    setPlayingOverride(undefined);
+  }
+
   // --- Internal time (uncontrolled mode) ---
   const [internalTime, setInternalTime] = useState(defaultTime);
   // --- CSS-driven time ---
   const [cssTime, setCssTime] = useState(0);
   const currentTime = isCss ? cssTime : isControlled ? controlledTime! : internalTime;
 
-  // Stable callback refs to avoid restarting the rAF loop
+  // Stable refs so the imperative handle and rAF loop always see latest values
+  const currentTimeRef = useRef(currentTime);
+  currentTimeRef.current = currentTime;
+  const playingRef = useRef(playing);
+  playingRef.current = playing;
+  const isControlledRef = useRef(isControlled);
+  isControlledRef.current = isControlled;
   const onTimeChangeRef = useRef(onTimeChange);
   onTimeChangeRef.current = onTimeChange;
   const onCompleteRef = useRef(onComplete);
   onCompleteRef.current = onComplete;
 
+  // --- Font loading ---
+  const [fontReady, setFontReady] = useState(() => !!font && document.fonts.check(`16px "${font?.family}"`));
+  useEffect(() => {
+    if (!font) {
+      setFontReady(false);
+      return;
+    }
+    // Check if the font is already loaded
+    if (document.fonts.check(`16px "${font.family}"`)) {
+      setFontReady(true);
+      return;
+    }
+    // New font — mark not ready and start loading
+    setFontReady(false);
+    let cancelled = false;
+    font.registerFontFace().then(() => {
+      if (!cancelled) setFontReady(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [font]);
+
   // --- Font-derived constants ---
   const fontFamily = font?.family;
   const emHeight = font ? (font.ascender - font.descender) / font.unitsPerEm : 0;
-  const baselineOffset = font ? font.descender / font.unitsPerEm : 0;
 
   // --- Container measurement ---
   const rootRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
   const [fontSize, setFontSize] = useState(0);
   const [lineHeight, setLineHeight] = useState(0);
+  const [currentColor, setCurrentColor] = useState('');
 
   // --- Timeline ---
   const timeline = useMemo(
@@ -197,6 +259,34 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
     }
   });
 
+  // --- Imperative handle (stable — reads from refs) ---
+  useImperativeHandle(
+    ref,
+    () => ({
+      getElement: () => rootRef.current,
+      getCurrentTime: () => currentTimeRef.current,
+      getDuration: () => totalDurationRef.current,
+      getIsPlaying: () => playingRef.current,
+      getIsComplete: () => totalDurationRef.current > 0 && currentTimeRef.current >= totalDurationRef.current,
+      play: () => {
+        if (!isControlledRef.current) setPlayingOverride(true);
+      },
+      pause: () => {
+        if (!isControlledRef.current) setPlayingOverride(false);
+      },
+      seek: (time: number) => {
+        if (!isControlledRef.current) setInternalTime(Math.max(0, Math.min(time, totalDurationRef.current)));
+      },
+      restart: () => {
+        if (!isControlledRef.current) {
+          setInternalTime(0);
+          setPlayingOverride(true);
+        }
+      },
+    }),
+    [],
+  );
+
   // --- Uncontrolled: time change notification ---
   useEffect(() => {
     if (!isControlled) {
@@ -206,7 +296,7 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
 
   // --- Uncontrolled: rAF playback loop ---
   useEffect(() => {
-    if (isControlled || !playing || !font) return;
+    if (isControlled || !playing || !font || !fontReady) return;
 
     // Reset smoothed boost when the loop restarts
     smoothedBoostRef.current = 0;
@@ -251,45 +341,7 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
 
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
-  }, [isControlled, playing, speed, loop, catchUp, font]);
-
-  // --- SVG refs (only needed in SVG mode) ---
-  const svgRefs = useRef(new Map<number, SVGSVGElement>());
-  const svgRefCallbacks = useRef(new Map<number, (node: SVGSVGElement | null) => void>());
-
-  const makeSvgRef = useCallback(
-    (charIdx: number) => (node: SVGSVGElement | null) => {
-      if (node) {
-        node.pauseAnimations();
-        svgRefs.current.set(charIdx, node);
-      } else {
-        svgRefs.current.delete(charIdx);
-      }
-    },
-    [],
-  );
-
-  const getSvgRef = useCallback(
-    (charIdx: number) => {
-      let cb = svgRefCallbacks.current.get(charIdx);
-      if (!cb) {
-        cb = makeSvgRef(charIdx);
-        svgRefCallbacks.current.set(charIdx, cb);
-      }
-      return cb;
-    },
-    [makeSvgRef],
-  );
-
-  // Clear stale SVG refs when font or mode changes
-  const prevFontRef = useRef(font);
-  const prevModeRef = useRef(mode);
-  if (prevFontRef.current !== font || prevModeRef.current !== mode) {
-    prevFontRef.current = font;
-    prevModeRef.current = mode;
-    svgRefs.current.clear();
-    svgRefCallbacks.current.clear();
-  }
+  }, [isControlled, playing, speed, loop, catchUp, font, fontReady]);
 
   // --- Container size observation ---
   useEffect(() => {
@@ -301,6 +353,7 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
         const styles = getComputedStyle(el);
         setFontSize(Number.parseFloat(styles.fontSize));
         setLineHeight(Number.parseFloat(styles.lineHeight));
+        setCurrentColor(styles.color);
       }
     });
     ro.observe(el);
@@ -320,6 +373,9 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
         setFontSize(Number.parseFloat(styles.fontSize));
         setLineHeight(Number.parseFloat(styles.lineHeight));
       }
+      if (e.propertyName === 'color') {
+        setCurrentColor(styles.color);
+      }
       if (e.propertyName === CSS_PROGRESS) {
         const rawProgress = Number(styles.getPropertyValue(CSS_PROGRESS));
         setCssTime(rawProgress * totalDurationRef.current);
@@ -331,35 +387,18 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
 
   // --- Text layout ---
   const layout = useMemo(() => {
-    if (!fontFamily || !fontSize || !containerWidth || !resolvedText) return null;
+    if (!fontReady || !fontFamily || !fontSize || !containerWidth || !resolvedText) return null;
     return computeTextLayout(resolvedText, fontFamily, fontSize, lineHeight, containerWidth);
-  }, [resolvedText, fontFamily, fontSize, lineHeight, containerWidth]);
+  }, [fontReady, resolvedText, fontFamily, fontSize, lineHeight, containerWidth]);
 
   // --- Canvas padding ---
   const padH = PADDING_H_EM * fontSize;
   const padV = fontSize ? Math.max(MIN_PADDING_V_EM * fontSize, (MIN_LINE_HEIGHT_EM * fontSize - lineHeight) / 2) : 0;
 
-  // --- Sync SVG glyph times before paint ---
-  // Runs every render so SVGs stay correct even when currentTime hasn't changed
-  // (e.g. after pausing, or when ref callbacks re-fire due to re-renders).
-  useLayoutEffect(() => {
-    if (mode !== 'svg') return;
-    const entries = timeline.entries;
-    for (let i = 0; i < entries.length; i++) {
-      const entry = entries[i]!;
-      if (!entry.hasSvg) continue;
-      const svg = svgRefs.current.get(i);
-      if (!svg) continue;
-      const localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
-      svg.setCurrentTime(localTime);
-    }
-  });
-
   // --- Canvas rendering ---
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useLayoutEffect(() => {
-    if (mode !== 'canvas') return;
     const canvas = canvasRef.current;
     if (!canvas || !font?.glyphData || !layout || !fontSize) return;
 
@@ -384,8 +423,7 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
     ctx.clearRect(0, 0, w, h);
     ctx.translate(padH, padV);
 
-    // Read currentColor from the container
-    const color = getComputedStyle(el).color;
+    const color = currentColor || getComputedStyle(el).color;
 
     const emHeightPx = emHeight * fontSize;
     const halfLeading = (lineHeight - emHeightPx) / 2;
@@ -402,7 +440,7 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
         const kerning = layout.kernings[charIdx] ?? 0;
         const glyph = font.glyphData[char];
 
-        if (glyph && entry.hasSvg) {
+        if (glyph && entry.hasGlyph) {
           const localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
           const glyphY = y + halfLeading;
           drawGlyph(
@@ -423,7 +461,7 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
             seed + charIdx,
             segmentSize,
           );
-        } else if (!entry.hasSvg && currentTime >= entry.offset + entry.duration) {
+        } else if (!entry.hasGlyph && currentTime >= entry.offset + entry.duration) {
           const baseline = y + halfLeading + (font.ascender / font.unitsPerEm) * fontSize;
           drawFallbackGlyph(ctx, char, x, baseline, fontSize, fontFamily!, color, resolvedEffects, seed + charIdx);
         }
@@ -433,7 +471,6 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
       y += lineHeight;
     }
   }, [
-    mode,
     currentTime,
     timeline,
     layout,
@@ -445,69 +482,15 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
     emHeight,
     padH,
     padV,
+    currentColor,
     resolvedEffects,
     seed,
     segmentSize,
   ]);
 
-  // --- SVG rendering (skipped entirely in canvas mode) ---
-  const lineElements = useMemo(() => {
-    if (mode !== 'svg' || !font || !resolvedText) return null;
-
-    const characters = graphemes(resolvedText);
-
-    const renderGlyph = (charIdx: number) => {
-      const char = characters[charIdx]!;
-      const entry = timeline.entries[charIdx]!;
-      const GlyphSvg = font.glyphs[char] as any;
-      const width = layout?.charWidths[charIdx] ?? 1;
-      const kerning = layout?.kernings[charIdx];
-
-      if (char === '\n') return null;
-
-      if (GlyphSvg) {
-        return (
-          <GlyphSvg
-            key={charIdx}
-            ref={getSvgRef(charIdx)}
-            style={{
-              display: 'inline-block',
-              verticalAlign: `${baselineOffset}em`,
-              width: `${width}em`,
-              marginRight: kerning ? `${kerning}em` : undefined,
-              height: `${emHeight}em`,
-              overflow: 'visible',
-            }}
-          />
-        );
-      }
-
-      const isVisible = currentTime >= entry.offset + entry.duration;
-      return (
-        <span style={{ fontFamily, visibility: isVisible ? 'visible' : 'hidden' }} key={charIdx}>
-          {char}
-        </span>
-      );
-    };
-
-    if (layout) {
-      return layout.lines.map((lineIndices, lineIdx) => {
-        const isEmpty = lineIndices.every((i) => characters[i] === '\n');
-        return (
-          <div style={{ whiteSpace: 'nowrap', height: isEmpty ? '1lh' : undefined, lineHeight: `${lineHeight}px` }} key={lineIdx}>
-            {lineIndices.map(renderGlyph)}
-          </div>
-        );
-      });
-    }
-
-    // Fallback before layout is ready: single line
-    return characters.length > 0 ? <div style={{ whiteSpace: 'nowrap' }}>{characters.map((_, i) => renderGlyph(i))}</div> : null;
-  }, [mode, resolvedText, timeline, font, layout, getSvgRef, baselineOffset, emHeight, currentTime, fontFamily, lineHeight]);
-
   // --- Rendering ---
 
-  if (!font || !resolvedText) {
+  if (!font || !resolvedText || !fontReady) {
     return <div ref={rootRef} {...props} />;
   }
 
@@ -528,24 +511,26 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
         },
       }}
     >
-      {/* Sentinel: inherits font-size & line-height; its height changes when either changes */}
-      <span
-        ref={sentinelRef}
-        aria-hidden
-        style={{
-          position: 'absolute',
-          width: 0,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-          fontSize: 'inherit',
-          lineHeight: 'inherit',
-          visibility: 'hidden',
-          transition: isCss ? `font-size 0.001s, line-height 0.001s, ${CSS_PROGRESS} 0.001s` : 'font-size 0.001s, line-height 0.001s',
-        }}
-      >
-        {'\u00A0'}
-      </span>
-      {mode === 'canvas' ? (
+      <div style={{ position: 'relative' }}>
+        {/* Sentinel: inherits font-size & line-height; its height changes when either changes */}
+        <span
+          ref={sentinelRef}
+          aria-hidden
+          style={{
+            position: 'absolute',
+            width: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            fontSize: 'inherit',
+            lineHeight: 'inherit',
+            visibility: 'hidden',
+            transition: isCss
+              ? `font-size 0.001s, line-height 0.001s, color 0.001s, ${CSS_PROGRESS} 0.001s`
+              : 'font-size 0.001s, line-height 0.001s, color 0.001s',
+          }}
+        >
+          {'\u00A0'}
+        </span>
         <canvas
           ref={canvasRef}
           aria-hidden
@@ -557,32 +542,20 @@ export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string,
             pointerEvents: 'none',
           }}
         />
-      ) : (
+
         <div
           style={{
-            position: 'absolute',
-            inset: 0,
-            pointerEvents: 'none',
+            userSelect: 'auto',
+            whiteSpace: 'pre-wrap',
+            overflowWrap: 'break-word',
+            paddingRight: 1,
+            WebkitTextFillColor: showOverlay ? undefined : 'transparent',
             fontFamily,
+            color: showOverlay ? 'rgba(255, 0, 0, 0.4)' : undefined,
           }}
         >
-          {lineElements}
+          {resolvedText}
         </div>
-      )}
-
-      <div
-        style={{
-          userSelect: 'auto',
-          whiteSpace: 'pre-wrap',
-          overflowWrap: 'break-word',
-          paddingRight: 1,
-          WebkitTextFillColor: showOverlay ? undefined : 'transparent',
-          fontFamily,
-          color: showOverlay ? 'rgba(255, 0, 0, 0.4)' : undefined,
-          fontFeatureSettings: "'calt' 0, 'liga' 0",
-        }}
-      >
-        {resolvedText}
       </div>
     </div>
   );

package/src/lib/drawGlyph.ts

@@ -154,24 +154,24 @@ export function drawGlyph(
     return m;
   };
 
-  for (const stroke of glyph.strokes) {
-    if (localTime < stroke.delay) continue;
-    const elapsed = localTime - stroke.delay;
-    const progress = Math.min(elapsed / stroke.animationDuration, 1);
+  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 pts = stroke.points;
+    const pts = stroke.p;
     if (pts.length === 0) continue;
 
-    const avgWidth = pts.reduce((s, p) => s + p.width, 0) / pts.length;
+    const avgWidth = pts.reduce((s, p) => s + p[2], 0) / pts.length;
     const baseLineWidth = Math.max(avgWidth, 0.5) * scale;
 
     // --- Single-point dot ---
     if (pts.length === 1) {
       if (progress <= 0) continue;
       const p = pts[0]!;
-      const dotX = px(wobbleX(p.x, p.y, 0));
-      const dotY = py(wobbleY(p.x, p.y, 0));
-      const perPointDot = Math.max(p.width, 0.5) * scale;
+      const dotX = px(wobbleX(p[0], p[1], 0));
+      const dotY = py(wobbleY(p[0], p[1], 0));
+      const perPointDot = Math.max(p[2], 0.5) * scale;
       let dotWidth = baseLineWidth + (perPointDot - baseLineWidth) * pressureAmount;
       dotWidth *= taperMultiplier(0.5);
 
@@ -208,8 +208,8 @@ export function drawGlyph(
     // --- Compute total path length ---
     let totalLen = 0;
     for (let j = 1; j < pts.length; j++) {
-      const dx = pts[j]!.x - pts[j - 1]!.x;
-      const dy = pts[j]!.y - pts[j - 1]!.y;
+      const dx = pts[j]![0] - pts[j - 1]![0];
+      const dy = pts[j]![1] - pts[j - 1]![1];
       totalLen += Math.sqrt(dx * dx + dy * dy);
     }
 
@@ -231,33 +231,33 @@ export function drawGlyph(
     for (let j = 1; j < pts.length; j++) {
       const prev = pts[j - 1]!;
       const cur = pts[j]!;
-      const dx = cur.x - prev.x;
-      const dy = cur.y - prev.y;
+      const dx = cur[0] - prev[0];
+      const dy = cur[1] - prev[1];
       const segLen = Math.sqrt(dx * dx + dy * dy);
 
       if (accumulated + segLen <= drawLen) {
         segments.push({
-          x0: px(wobbleX(prev.x, prev.y, j - 1)),
-          y0: py(wobbleY(prev.x, prev.y, j - 1)),
-          x1: px(wobbleX(cur.x, cur.y, j)),
-          y1: py(wobbleY(cur.x, cur.y, j)),
-          width0: prev.width,
-          width1: cur.width,
+          x0: px(wobbleX(prev[0], prev[1], j - 1)),
+          y0: py(wobbleY(prev[0], prev[1], j - 1)),
+          x1: px(wobbleX(cur[0], cur[1], j)),
+          y1: py(wobbleY(cur[0], cur[1], j)),
+          width0: prev[2],
+          width1: cur[2],
           segProgress: (accumulated + segLen / 2) / totalLen,
         });
         accumulated += segLen;
       } else {
         const remaining = drawLen - accumulated;
         const frac = segLen > 0 ? remaining / segLen : 0;
-        const ix = prev.x + dx * frac;
-        const iy = prev.y + dy * frac;
-        const iw = prev.width + (cur.width - prev.width) * frac;
+        const ix = prev[0] + dx * frac;
+        const iy = prev[1] + dy * frac;
+        const iw = prev[2] + (cur[2] - prev[2]) * frac;
         segments.push({
-          x0: px(wobbleX(prev.x, prev.y, j - 1)),
-          y0: py(wobbleY(prev.x, prev.y, j - 1)),
+          x0: px(wobbleX(prev[0], prev[1], j - 1)),
+          y0: py(wobbleY(prev[0], prev[1], j - 1)),
           x1: px(wobbleX(ix, iy, j)),
           y1: py(wobbleY(ix, iy, j)),
-          width0: prev.width,
+          width0: prev[2],
           width1: iw,
           segProgress: (accumulated + remaining / 2) / totalLen,
         });

package/src/lib/timeline.ts

@@ -8,7 +8,7 @@ export interface TimelineConfig {
   wordGap?: number;
   /** Pause after a newline / line break (seconds). Default: `0.3` */
   lineGap?: number;
-  /** Duration for characters without glyph SVGs (seconds). Default: `0.2` */
+  /** Duration for characters without glyph data (seconds). Default: `0.2` */
   unknownDuration?: number;
 }
 
@@ -23,7 +23,7 @@ export interface TimelineEntry {
   char: string;
   offset: number;
   duration: number;
-  hasSvg: boolean;
+  hasGlyph: boolean;
 }
 
 export interface Timeline {
@@ -41,9 +41,10 @@ export function computeTimeline(text: string, font: TegakiBundle, config?: Timel
   const entries: TimelineEntry[] = [];
   let offset = 0;
   for (const char of chars) {
-    const hasSvg = char in font.glyphs;
-    const duration = hasSvg ? (font.glyphTimings[char] ?? 1) : unknownDuration;
-    entries.push({ char, offset, duration, hasSvg });
+    const glyph = font.glyphData[char];
+    const hasGlyph = !!glyph;
+    const duration = hasGlyph ? (glyph.t ?? 1) : unknownDuration;
+    entries.push({ char, offset, duration, hasGlyph });
     offset += duration;
 
     // Gap after this character

package/src/types.ts

@@ -59,12 +59,19 @@ export interface PathCommand {
   y2?: number;
 }
 
+/**
+ * Compact glyph data for rendering.
+ * - `w`: advance width
+ * - `t`: total animation duration
+ * - `s`: strokes, each with `p` (points as `[x, y, width]` tuples), `d` (delay), `a` (animation duration)
+ */
 export interface TegakiGlyphData {
-  advanceWidth: number;
-  strokes: {
-    points: { x: number; y: number; t: number; width: number }[];
-    delay: number;
-    animationDuration: number;
+  w: number;
+  t: number;
+  s: {
+    p: [x: number, y: number, width: number][];
+    d: number;
+    a: number;
   }[];
 }
 
@@ -107,8 +114,6 @@ export interface TegakiBundle {
   unitsPerEm: number;
   ascender: number;
   descender: number;
-  glyphs: Record<string, import('react').FC<import('react').SVGProps<SVGSVGElement>>>;
-  glyphData?: Record<string, TegakiGlyphData>;
-  glyphTimings: Record<string, number>;
+  glyphData: Record<string, TegakiGlyphData>;
   registerFontFace: () => Promise<void>;
 }