# 策展 · X (Twitter) 🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：konstantinpaulus (@konstipaulus) · 平台：X (Twitter) · 日期：2026-06-09

> 原始來源：https://x.com/konstipaulus/status/2064011863889788972

## 中文摘要

konstantinpaulus 推出 text-to-lottie 實現自動生成動畫。

**核心功能**
此專案結合了 Skia CanvasKit (Skottie) 渲染引擎與 React、shadcn/ui 及 TypeScript，旨在實現「由 AI 生成並即時預覽」的動畫工作流。當 Agent 寫入 `public/lottie.json` 檔案時，開發伺服器會自動進行熱重載（hot-reload），讓使用者能立即在瀏覽器中檢視動畫效果。根據展示影片，該工具支援複雜的資料視覺化（如 350 根蠟燭圖的 K 線圖動畫）以及精細的屬性控制，例如調整筆畫寬度（stroke width）、透明度（opacity）與漸層座標。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780993000093-kbaxfh27.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780993000598-gu0c0ovEguIx46u6Qjpg.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 這是一段展示開發者使用 Lottie 進行動畫設計與即時調整參數的螢幕錄影。

**安裝與使用**
使用者可透過以下指令將此 skill 整合至支援 Agentic 程式開發的環境（如 Claude Code 或 Codex）：

```bash
npx skills add diffusionstudio/lottie
```

若需手動設定專案，請執行以下步驟：

1. 安裝依賴套件（此步驟會透過 `postinstall` 腳本自動將 CanvasKit wasm 檔案複製至 `public/` 資料夾）：
   ```bash
   npm install
   ```
2. 啟動開發伺服器：
   ```bash
   npm run dev
   ```
3. 開啟終端機顯示的本地 URL 即可開始使用。

**技術細節**
該專案依賴 `canvaskit-wasm` 二進位檔，由於該檔案未納入版本控制，若需手動更新或重新部署，可執行 `node scripts/copy-canvaskit.mjs` 來確保 `public/` 資料夾中的資源正確。更多關於 Prompt 指引與原始碼細節，可參考 [GitHub 專案頁面](https://github.com/diffusionstudio/lottie)。

## 媒體內容

**這是一段展示開發者使用 Lottie 進行動畫設計與即時調整參數的螢幕錄影。**

**影片中的 Prompt 與操作**

操作步驟：

1. （00:00）調整 K 線圖的顏色屬性
2. （00:05）調整 Spotify Logo 的線條寬度與顏色
3. （00:09）調整 "hello" 文字的筆畫粗細與透明度

## 標籤

AIGC, 開源專案, Web, React, 自動化, Lottie, Skia, TypeScript