add DrawTex

Author: bea4dev

docs/docs/lib/animation.md

@@ -86,3 +86,24 @@ const Impact = () => (
   </FillFrame>
 )
 ```
+
+## Effects: DrawText
+
+`<DrawText />` renders text as animated SVG strokes using a supplied font file.
+
+```tsx
+import { DrawText } from "../src/lib/animation/effect/draw-text"
+
+<DrawText text="Hello" fontUrl="assets/Roboto.ttf" fontSize={96} />
+```
+
+## Effects: DrawTex
+
+`<DrawTex />` renders TeX as animated SVG strokes (MathJax SVG output).
+MathJax must be available in the build (this project uses a static import in `draw-text.tsx`).
+
+```tsx
+import { DrawTex } from "../src/lib/animation/effect/draw-text"
+
+<DrawTex tex={"\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}"} fontSize={96} />
+```

docs/i18n/ja/docusaurus-plugin-content-docs/current/lib/animation.md

@@ -86,3 +86,24 @@ const Impact = () => (
   </FillFrame>
 )
 ```
+
+## Effects: DrawText
+
+`<DrawText />` はフォントファイルを使ってテキストを SVG ストロークで描画します。
+
+```tsx
+import { DrawText } from "../src/lib/animation/effect/draw-text"
+
+<DrawText text="Hello" fontUrl="assets/Roboto.ttf" fontSize={96} />
+```
+
+## Effects: DrawTex
+
+`<DrawTex />` は TeX を SVG ストロークとして描画します（MathJax の SVG 出力）。
+MathJax がビルドに含まれている必要があります（このプロジェクトでは `draw-text.tsx` で静的 import しています）。
+
+```tsx
+import { DrawTex } from "../src/lib/animation/effect/draw-text"
+
+<DrawTex tex={"\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}"} fontSize={96} />
+```

package-lock.json

@@ -29,8 +29,9 @@
     "dependencies": {
         "@ffmpeg-installer/ffmpeg": "^1.1.0",
         "@ffprobe-installer/ffprobe": "^2.1.2",
-        "opentype.js": "^1.3.4",
         "@types/opentype.js": "^1.3.4",
+        "mathjax-full": "^3.2.1",
+        "opentype.js": "^1.3.4",
         "puppeteer": "^24.1.1",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",