sprite-animation

Sprite Animation Skill

制作一帧教育解说动画——适合录制成竖屏视频的那种。像素风吉祥物、醒目的年份展示、循环 CSS 动画、动感日语／英语展示字体。

Workflow

1. 阅读当前的 DESIGN.md（已在上方注入）。为年份选择最醒目的衬线字体令牌，为标题选择结实的无衬线字体，为时间线／索引标签选择等宽字体令牌。
2. 从简介中选择主题（例如“Nintendo · 1889 — 花札”）。必须包含：年份、一行标题、一个动画主体（像素精灵——角色、物件或图标）以及一段简短说明。
3. 布景 — 使用全幅奶油色／米白色背景（#f5efe2），并添加微妙的纸张纹理。留出宽裕的边距；这是视频中的一个节拍。
4. 顶部栏 — 一行小号等宽字体内容：
   • 左侧：标题代号（“名次の/番組”或“EP. 01 / NINTENDO”）
   • 右侧：进度圆点（“01 / 12”）和“REC”印章
5. 主体动画 — 页面上至少要有三个独立循环的动画：
   • 大号年份：醒目的年份标题（例如“1889年”）占据左下区域，使用衬线展示字重。添加微妙的垂直故障／扫描线动画（clip-path 关键帧），并在每个循环中加入一帧“弹出”效果。
   • 像素精灵卡片：一张 96×128 像素的像素风卡片或角色（使用带有 shape-rendering: crispEdges 的内联 SVG 矩形，或 box-shadow 像素网格）。添加轻微的上下浮动动画（±4px，1.6s）。
   • 动态假名：1–2 个与上下浮动同步淡入并滑入的日语／汉字字符（例如“花”——hana——花）。
   • 刻度带：布景底部放置带有年份刻度的带子／缎带（1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017），以缓慢、恒定的速度向左滑动。
6. 说明区块 — 使用小号等宽字体，简述趣闻： “Nintendo 于 1889 年在 Kyoto 起家，制作花札扑克牌。 Mario 又过了九十六年才出现。”
7. 编写一个 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 内联，不使用外部 JS。
   • 所有动画均使用 @keyframes 和 animation: ... infinite。
   • 布景采用固定画布比例（例如 16:9 黑边格式），让循环效果像视频中的单帧画面。
   • 在布景、年份、精灵、说明和刻度带上添加 data-od-id。
8. 自查：
   • 页面是一个连贯的场景，而非拼贴画。视线先落在年份上，再落在精灵上，最后落在说明上。
   • 至少能看到 3 个独立循环的动画。
   • 配色克制（奶油色 + 一种强调红色 + 墨色）。
   • 不使用外部资源——所有精灵均使用内联 SVG 或 CSS 制作。

输出约定

在 <artifact> 标签之间输出：

<artifact identifier="sprite-anim-slug" type="text/html" title="Sprite animation — Title">
<!doctype html>
<html>...</html>
</artifact>

在 artifact 前写一个句子，之后不写任何内容。