用途:在 HyperFrames 组合中制作或修改“stat slide”,适用于强调业绩、KPI、统计数值的场合,当数字本身构成信息核心,或在单屏展示 1~3 个指标时使用。
结构:外层为 div#s-N.scene.clip,带 data-start、data-duration、data-track-index 属性;内部含 .eyebrow(类别)、.scene-title(主标题)与 .stats 容器,每个指标用 .stat(如 id=s-N-st1)包含 .num 与 .label。
样式要点:.stats 用 grid 三列,gap 48–64px,margin-top 64px;2 个指标用 repeat(2,1fr),1 个则居中。.stat 用顶部边框与上内边距纵向排列;.num 字号 110–140px、字重 800、行高 1、负字距,可选渐变文字裁切;.label 字号 22–28px、字重 500、暗色、行高 1.4、上边距 18–20px;数字建议用 font-variant-numeric: tabular-nums 提升对齐感。
动画:用 GSAP 时间线在 start 基准上错时入场,eyebrow、scene-title 依次淡入上移,各 stat 用 back.out(1.4) 缩放淡入。需要数字计数时可用 gsap.to({ textContent: targetNumber, snap: { textContent: 1 } }),但需保持确定性;多数情况单纯淡入即可。
可选可视化:可在数字旁加 .bar-track/.bar-fill 横向进度条,或 SVG stroke-dasharray 环形仪表。百分比用 ring,规模/量/速度对比用 bar,单一数值强调可省略可视化。
生成器检测规则:以 $ 开头的行是数值,其下一行是说明,空行分隔指标;可视化提示写作 $ 120만 [bar:85]、$ 40% [ring:40]。
原则与限制:数字应短而有力并含单位,说明保持一行,1~3 个为宜,超过 4 个改用 split 或 title-bullets。资料未提供该技能的具体安装命令、许可与运行环境要求。