Skip to content
FunCoding

stacked-data-cards

生成「叠放式数据论点卡」自动播放动画的单文件 HTML：白色论点卡从底部依次弹入居中，旧卡向左叠成牌堆，卡内数据组件（折线描边、数字滚动、环形仪表、对比条、数据表格、图标卡组）按毫秒级时间线级联入场，整段时长对齐口播/旁白秒数，录屏即成片。适合视频中的数据论证、研究结论展示、观点陈列、反直觉点揭示等场景。

Star
1,505
Category
Docs & office
License
MIT
Last commit
Oct 5, 2026

skills/stacked-data-cards/SKILL.md

View on GitHub

Stacked Data Cards Skill

你是什么

你是一个专门生成叠放式数据论点卡自动播放动画的专家。每次被激活，你会根据用户给出的论点/数据材料，生成一个完整的单文件 HTML：一个深色舞台中央，白色数据卡一张张从底部弹入；每当新卡弹入，旧卡向左侧叠放成逐渐缩小、倾斜的牌堆；每张卡内部是一组数据可视化组件，按毫秒级时间线依次入场。

核心视觉特征：

  • 深色舞台 — #0b0f19 背景 + 主题色径向光晕，衬托白色大卡
  • 三态卡片 — upcoming（底部屏外待命）→ active（弹入居中）→ stacked（左叠成牌堆，缩小 + 旋转 + 降透明）
  • 序号徽章 — 卡面左上角超大半透明数字（01 / 02 / 03）
  • 时间线自动播放 — 每张卡有固定驻留时长，对齐口播秒数，无需任何交互
  • 数据组件级联入场 — 折线描边、数字滚动、环形仪表、对比条、表格行、图标卡按 stagger 延迟依次出现

与其他 Skill 的区别：

  • ppt-animation → 手动翻页的 PPT，无时间线、无牌堆层叠
  • card-theater → 手动交互的 3D 卡片轮播 + 侧边栏解说，重探索而非自动叙事
  • video-shot-demos → 整辑分镜 + 播放器底盘的重量级方案；本 Skill 是其中一个"数据论证镜头"的轻量独立形态
  • stacked-data-cards → 单场景、自动播放、时长精确对齐口播，卡片即论点，数据即证据

支持的卡片内容类型

组件说明适用论点
折线对比图SVG 双线（趋势线 vs 水平线），trim-paths 描边入场 + 数据点弹性弹出 + 末端标注"A 飙升但 B 停滞"类趋势论证
大数字 + 环形仪表超大渐变数字 count-up 滚动 + SVG 环形进度条震撼比例数字（如 45%）
对比条双条横向填充对比（AI vs 人类 / 方案 A vs B）两方差距论证
数据表格行依次淡入 + 单元格内迷你条形图 + 数值滚动多维数据明细
图标卡组3 栏图标卡弹入，配标题 + 描述 + 细节列表并列的 N 个要点/陷阱
金句横幅底部通栏色块弹入，承载一句结论每卡收尾的观点句
角色小场景头像 + 气泡 + 流程箭头 + 逻辑链，微型叙事因果链、行为对比
角注右下角 mono 字体数据来源标注增强可信度

核心工作流

Step 1 — 确认参数

从用户输入中识别：主题、论点数量、时间预算。如不明确，询问：

  • "这组内容有几个论点/卡片？（推荐 2~5 张，3 张最佳）"
  • "整段对应口播多少秒？每张卡大约驻留几秒？"
  • "主题色偏好？（默认橙红警示色 #ff5f3c，可选蓝 #3b82f6 / 绿 #10b981 / 紫 #8b5cf6）"
  • "结尾需要整副牌堆滑出退场吗？（用于衔接下一镜头）"

如果信息充足，直接生成。 用户给了口播稿时，按口播句读自动分配每卡时长。

Step 2 — 规划卡片与时间线

为每张卡规划内容结构：

卡片:
  序号: "01"
  标题: "一句话论点（不超过 18 字）"
  副标题: "补充说明（可选）"
  主组件: "折线对比图 / 大数字+仪表 / 图标卡组 ..."
  辅助组件: "数据表格 / 对比条 / 金句横幅 ..."
  角注: "来源 · 样本量"
  驻留时长: 7000ms

时间线规划铁律：

  • 卡片在 T=0 弹入，卡内组件在 T+300ms 起开始级联入场
  • 卡内最后一个动画必须在驻留时长内完成，至少预留 1.5s 静止阅读时间
  • 卡间切换间隔 = 当前卡驻留时长；建议 6~15s/卡
  • 可选结尾：整副牌堆 translateX(-120vw) 滑出 + 淡出（1s）

Step 3 — 生成标准

视觉规范：

  • 舞台：#0b0f19 深色底 + radial-gradient 主题色光晕（透明度 ≤0.12）
  • 卡片：rgba(255,255,255,0.97) 白底、圆角 clamp(18px, 2.5vw, 28px)、大投影、宽 min(92vw, 900~980px)
  • 字体：系统字体栈（-apple-system, 'PingFang SC', 'Microsoft YaHei'），数字/角注用 'SF Mono', 'JetBrains Mono', Consolas
  • 色彩全部走 :root CSS 变量：--accent（主色）、--accent-light、--green（对照组/正面）、--muted、--text
  • 缓动：--ease-out: cubic-bezier(0.16, 1, 0.3, 1)（入场）、--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1)（弹性弹出）

三态切换（必须精确实现）：

.card          { transform: translate(-50%, 60vh) scale(0.82); opacity: 0; }   /* upcoming */
.card.active   { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 10; }
.card.stacked  { /* 第 i 张叠放卡： */
  transform:
    translate(calc(-110% - var(--stack-i, 0) * 22%), -50%)
    scale(calc(0.76 - var(--stack-i, 0) * 0.07))
    rotate(calc(-4deg - var(--stack-i, 0) * 5deg));
  opacity: 0.72;
}
  • 切换通过 JS activate(index) 统一改写 class 与 --stack-i / z-index
  • transition：transform 0.8s var(--ease-out), opacity 0.55s ease

卡内动画规范（必须包含至少 3 种）：

  • 数字滚动 count-up：ease-out cubic，支持 data-target / data-prefix / data-suffix / data-decimals / data-delay / data-duration
  • 折线描边：getTotalLength() 初始化 stroke-dasharray/offset，卡片激活后过渡到 0（1.2~1.6s）；先强制重绘防止初帧闪完整线
  • 条形填充：CSS 变量 --target-width 驱动，transition: width 1s，配合 .delay-1/2/3 级联
  • 表格行 / 图标卡：nth-child transition-delay 级联淡入（间隔 100~200ms）
  • 弹性元素（徽章、气泡、数据点）：scale(0)→scale(1) + var(--ease-elastic)

音效（可选）：

  • WebAudio 合成低音 thud（sine 80Hz→40Hz，0.35s 衰减），用于关键揭示时刻
  • 必须 try/catch 静默失败（浏览器自动播放策略）
  • 零音频文件

代码规范：

  • 单文件 HTML，内联 CSS/JS，零外部依赖（无 CDN、无外部图片，除非用户明确提供）
  • 代码量 400~900 行
  • 时间线常量集中在 TIMING 对象，单位毫秒，注释标注对应口播时间点
  • 响应式断点：760px（网格降单列、叠卡位移收紧）、520px（字号/间距收紧）
  • 图标全部内联 SVG

Step 4 — 检查点

生成完成后逐项自检并向用户报告：

  1. 每张卡最后一个动画的结束时刻 < 该卡切换时刻 - 1.5s（留足阅读时间）
  2. 叠放卡的 --stack-i 从 0 开始递增（越新的叠卡越靠前）
  3. 所有 count-up 元素初始文本为目标格式下的 0 值（防闪烁）
  4. 时间线总时长 = 各卡驻留时长之和（+ 可选退场 1s），与口播对齐
  5. 输出：文件路径、卡片数、时间线总时长、主题色

参考示例

  • 起步骨架：assets/template.html（3 卡标准骨架：折线卡 + 大数字卡 + 图标卡）
  • 成片实例 A：assets/examples/scene-scaling-law-orange.html（橙红主题 · 表格/仪表/图标组 · CSS 级联驱动）
  • 成片实例 B：assets/examples/scene-ai-code-security-blue.html（蓝紫主题 · 角色小场景/逻辑链 · JS reveal 驱动 · 含 thud 音效与整副退场）
  • Prompt 参考：references/prompts.md
  • 组件规格：references/components.md

Similar Skills

Featured

pdf

Read and edit PDFs: extract text and tables, merge, split, rotate, and fill forms.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

canvas-design

Create posters and visual art as PNG or PDF, guided by a design philosophy.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

docx

Create and edit Word docs with TOC, page numbers, headers and more.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

doc-coauthoring

Co-write specs, proposals and decision docs through a structured, iterative workflow.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

xlsx

Read and edit spreadsheets: add columns, compute formulas, format, and clean messy data.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

pptx

Create and edit slide decks, generate slides from templates, and extract text.

ANanthropics/skills181k1,119 new stars in the last 7 days