# stacked-data-cards

> 叠放式数据论点卡 · 自动播放的时间线叙事动画 Skill

## 简介

生成「叠放式数据论点卡」自动播放动画的单文件 HTML：深色舞台中央，白色数据卡一张张从底部弹入；新卡弹入时旧卡向左侧叠放成缩小、倾斜的牌堆。每张卡内部是数据可视化组件——折线描边、数字滚动、环形仪表、对比条、数据表格、图标卡组——按毫秒级时间线级联入场，整段时长精确对齐口播秒数。零依赖、零交互、录屏即成片，适合视频中的数据论证、研究结论展示、观点陈列、反直觉点揭示等场景。

## 核心机制

| 机制 | 说明 |
|------|------|
| 三态卡片 | `upcoming`（屏外待命）→ `active`（弹入居中）→ `stacked`（左叠成牌堆，scale/rotate/透明度递减） |
| 时间线驱动 | `TIMING` 常量表 + `setTimeout`，每卡固定驻留时长，对齐口播 |
| 级联入场 | 卡内组件按 stagger 延迟依次出现，结尾预留 ≥1.5s 静止阅读时间 |
| 可选退场 | 整副牌堆 `translateX(-120vw)` 滑出，衔接下一镜头 |
| WebAudio 音效 | 低音 thud 点缀关键揭示时刻，零音频文件，静默失败 |

## 卡片组件库

| 组件 | 适用论点 |
|------|---------|
| 折线对比图（trim-paths 描边） | "A 飙升但 B 停滞"类趋势论证 |
| 大数字 + 环形仪表 | 震撼比例数字 |
| 对比条 | 两方差距论证 |
| 数据表格（行内迷你条形） | 多维数据明细 |
| 图标卡组 | 并列的 N 个要点 |
| 金句横幅 / 角注 | 结论句 / 数据来源 |
| 角色小场景 + 逻辑链 | 因果链、行为对比 |

## 使用方式

```
用 stacked-data-cards 把这三个论点做成叠放数据卡动画，整段 25 秒
```

```
用 stacked-data-cards 展示「模型越大语法越准、但安全不提升」的数据论证，橙红主题，3 张卡
```

```
以 assets/template.html 为骨架，做 4 张论点卡，每卡驻留 8 秒，结尾整副牌堆滑出
```

```
用 stacked-data-cards 把这段口播稿的数据部分做成卡片动画，按句读分配每卡时长，蓝色主题
```

## 模板预览

| 实例 | 预览 |
|------|------|
| 起步骨架 `template.html` | <!-- TODO: 补充预览图 --> |
| 实例 A：橙红 · Scaling Law | <!-- TODO: 补充预览图 --> |
| 实例 B：蓝紫 · AI 代码安全 | <!-- TODO: 补充预览图 --> |

## 核心特性

- **零交互自动播放** — 时间线精确对齐口播秒数，全屏录屏即成片
- **牌堆空间叙事** — 旧卡不消失而是左叠成堆，论点之间有"累积感"
- **数据组件级联** — 折线描边 / 数字滚动 / 环形仪表 / 条形填充 / 表格行 / 图标卡，全部支持 stagger 延迟
- **主题变量化** — 改 `--accent` 一个变量即可整体换色
- **零依赖单文件** — 无 CDN、无外部图片、无音频文件，双击离线可跑

## 技术栈

- 纯原生 HTML / CSS / JS，零外部依赖
- SVG 内联图表（trim-paths 描边、环形仪表）
- WebAudio 合成音效（可选）

## Prompt 参考

详见 `references/prompts.md`；组件规格详见 `references/components.md`。