技能概述
Sprite Animation 技能生成一幀教育性解釋動畫畫面 — 像素風吉祥物、巨大年份顯示、循環 CSS 動畫、動態日文/英文 display type。讀起來像教育運動視頻嘅單一幀，可以直接 screen-record 成垂直視頻。
整個畫面係一個凝聚場景（唔係拼貼），視覺層級清晰：第一眼係年份，第二眼係 sprite，第三眼係 caption。所有動畫用 @keyframes + animation: ... infinite，零 JavaScript。
觸發關鍵字
- sprite animation、pixel art animation、8-bit explainer
- retro animation、kinetic typography、history explainer
- nintendo style、精靈圖、像素動畫、復古動畫
什麼時候用
- 要做一個歷史/冷知識/品牌故事嘅像素風格動畫介紹
- 需要一個可以錄屏成短視頻嘅動畫單幀
- 用戶要求「Nintendo 風格」或「8-bit」視覺呈現
- 教育性內容嘅視覺解釋器
使用方法
工作流程
-
讀 DESIGN.md — 選擇最響亮嘅 serif token 做年份、sturdy sans 做 headline、mono token 做 timeline/index 標籤
-
選主題 — 需要：年份、一行 headline、動畫主角（pixel sprite）、一行 caption
-
搭建舞台（Stage） — 全屏 cream / off-white 背景（
#f5efe2），可選 subtle paper grain。邊距寬敞，比例 16:9 letterboxed -
頂欄 — 小 mono 行：左邊標題 slug（「名次の/番組」或 "EP. 01 / NINTENDO"），右邊進度點（"01 / 12"）同 "REC" 印章
-
主體動畫 — 至少 3 個獨立循環動畫：
| 元素 | 描述 | 動畫效果 |
|------|------|----------|
| Big year | 左下巨大年份（如 "1889年"），serif display weight | subtle vertical glitch / scanline（clip-path keyframes），每次 loop 嘅 1-frame "pop" |
| Pixel sprite card | 96×128 像素藝術卡或角色（inline SVG shape-rendering: crispEdges 或 box-shadow pixel grid） | subtle bobbing（±4px, 1.6s） |
| Kinetic kana | 1-2 個日文/漢字（如 "花"） | fade-and-slide 同步 bob 動畫 |
| Tick ribbon | 底部磁帶/ribbon，年份刻度（1889 · 1907 · 1949 …） | 以慢速 constant speed 向左滑動 |
-
Caption block — 小 mono caption 解釋 trivia：
"Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889. Mario didn't show up for another ninety-six years."
-
寫單一 HTML 文檔 — 全部 CSS inline，無外部 JS，所有動畫用
@keyframes，data-od-id標記 stage、year、sprite、caption、tick ribbon
自檢清單
- [ ] 畫面係一個凝聚場景，唔係拼貼
- [ ] 視覺層級：年份 → sprite → caption
- [ ] 至少 3 個獨立循環動畫
- [ ] 色板克制（cream + 單一 accent red + ink）
- [ ] 無外部資源 — 所有 sprite 用 inline SVG 或 CSS
輸出格式
<artifact identifier="sprite-anim-slug" type="text/html" title="Sprite animation — Title">
<!doctype html>
<html>...</html>
</artifact>
Artifact 前一句描述，之後無內容。
設計要點
- 配色： cream + 單一 accent red + ink，三色足夠
- 字體： 年份用最粗 serif，caption 用 mono，保持字級差異明顯
- Sprite： 用
shape-rendering: crispEdges或box-shadowpixel grid，保持像素感 - 動畫： 至少 3 個不同速度嘅
@keyframes，避免所有動畫同步