html-explainer/references/style-catalog.json

[
  {
    "id": "frame-bold-poster",
    "name": "Bold Poster",
    "zh_name": "大胆海报帧",
    "emoji": "🟥",
    "category": "presentation",
    "subcategory": "statement-title",
    "engine": "hyperframes",
    "description": "A 1970s European editorial poster, in motion. A red rule draws across under a mono kicker, a giant Shrikhand figure rotates and drops in, a three-line headline rises line-by-line each on its own tilt, an italic serif standfirst fades up, and an ink footer rule draws in. Loud, confident, unmistakably print. Distilled from the frontend-slides \"Bold Poster\" template.",
    "zh_description": "大胆海报帧:1970s 欧洲社论海报风 + 番红强调色 + 巨型倾斜 Shrikhand 大字 + 三行标题逐行升起 + 衬线斜体副题, 印刷质感强。",
    "dmin": "4",
    "dmax": "6",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "6",
    "best_for": [
      "Brand manifesto / vision statement",
      "Editorial or cultural pitch opener",
      "A few words that should feel like a magazine cover"
    ],
    "kf": 9,
    "colors": "#1C1410 #D8000F #F5F2EF",
    "multi": false,
    "license": "Apache-2.0",
    "via": "frontend-slides",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 暖白纸底 `#F5F2EF`。",
      "fonts": "display + 数字 `Shrikhand` (海报级斜体大字); body `Libre Baskerville` (衬线, 斜体副题); mono 标签 / chrome `Space Grotesk`。",
      "timeline": "- **0.35s** 纸底淡入 (印刷感的\"落纸\"而非\"打光\")。 - **0.5s 起** 顶部 kicker: 左 mono 标签淡入 → 番红 rule 从左 scaleX 划过 → 右 mono 日期淡入。 - **0.7s** 右上巨型番红 figure (`Shrikhand` 320px) 带旋转 (-14° → -6°) 从上落入。 - **1.15s 起** 三行标题逐行升起, 每行各自 tilt: 行1 墨黑 -2°、行2 番红 -4°、行3 墨黑 +2°。 - **1.95s** 衬线斜体副题 (`Libre Baskerville` italic) fadeUp。 - **2.15s** footer 墨黑 rule 划入 + mono metadata 淡入。",
      "palette": "纸白 `#F5F2EF` / 墨黑 `#1C1410` / **唯一强调色番红 `#D8000F`**。红色只用在: 一条 kicker rule、巨型 figure、标题中间行、footer 右侧 metadata。其余皆墨黑。全片**只此一个**强调色。",
      "content": "- headline 最多 3 行, 第 2 行自动番红; 必须真实标题, 严禁 lorem ipsum。 - 版式为\"少量大字陈述\", 不适合塞段落 — 信息密度高的内容请换模板。 - CJK 文本: letter-spacing 归 0、放松行高、不要对 CJK 做 uppercase。 - 动效用 `@keyframes`, `prefers-reduced-motion` 下全部停在终态。 - 单文件 HTML, 字体走 Google Fonts。"
    }
  },
  {
    "id": "frame-bold-signal",
    "name": "Bold Signal",
    "zh_name": "大胆信号卡帧",
    "emoji": "🔶",
    "category": "presentation",
    "subcategory": "section-title",
    "engine": "hyperframes",
    "description": "Bold colored card on a dark gradient — a big section number rolls in, a nav breadcrumb fades, a vibrant orange card slides in from the right and the title rises. Confident, high-impact, modern. Distilled from the frontend-slides \"Bold Signal\" preset.",
    "zh_description": "大胆信号卡帧:暗渐变底 + 大编号 + 导航面包屑 + 橙色卡片滑入 + 标题升起, 高冲击力",
    "dmin": "3",
    "dmax": "6",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "6",
    "best_for": [
      "Section / chapter divider",
      "Bold launch statement",
      "High-impact title card"
    ],
    "kf": 6,
    "colors": "#1a1a1a #2d2d2d #FF5722",
    "multi": false,
    "license": "Apache-2.0",
    "via": "frontend-slides",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 暗底 `#1a1a1a` + 135° 渐变 (`#1a1a1a → #2d2d2d → #1a1a1a`)。",
      "fonts": "display `Archivo Black` (900); body `Space Grotesk` 400/500/700。",
      "timeline": "- **0.2s** 左上巨大 section number (`Archivo Black` 96px, 如 `01/04`, 斜杠后半 opacity 0.3) 从上方 rollIn。 - **0.4s 起** 右上 nav breadcrumb 错峰淡入: active 项 `#FF5722` 橙 opacity 1, 其余白 opacity 0.35。 - **0.6s** 橙色焦点卡 (`#FF5722`, 圆角 36px 仅左侧, 占右 ~1180px) 从 translateX(110%) 滑入, 带橙色柔影。 - **1.15s** 卡内 label (uppercase, letter-spacing 4px) fadeUp。 - **1.3s** 卡内大标题 (`Archivo Black` 130px, 深色 `#1a1a1a` on 橙) fadeUp。 - **1.6s** 左下 footer (橙色 tick 短条 + system 标签) 淡入。",
      "palette": "暗底灰阶 + 唯一强调色 `#FF5722` 橙 (焦点卡 / active nav / footer tick)。可换成 coral/vibrant accent 但**全片只用一个**强调色。卡上文字用深色保证对比。",
      "content": "- title 1-2 行, 必须用真实标题, 严禁 lorem ipsum。 - nav 面包屑反映真实章节结构, 第一项 active。 - 动效用 `@keyframes`, `prefers-reduced-motion` 下全部停在终态。 - 单文件 HTML。"
    }
  },
  {
    "id": "frame-build-minimal",
    "name": "Build Minimal",
    "zh_name": "奢华极简留白帧",
    "emoji": "◇",
    "category": "presentation",
    "subcategory": "hero",
    "engine": "hyperframes",
    "description": "Luxury-minimal whitespace hero — a single word reveals letter by letter in ultra-thin Inter, a warm-gold hairline extends, thin indicators rise and breathe. Calm, premium, 70%+ whitespace. Distilled from the huashu-design \"Build Studio\" philosophy.",
    "zh_description": "奢华极简留白帧:单词逐字浮现 + 暖金细线 + 呼吸感细线指示器, 70%+ 留白",
    "dmin": "4",
    "dmax": "7",
    "aspects": "16:9 · 1:1",
    "recommended": "7",
    "best_for": [
      "Premium product / brand hero",
      "Calm single-word statement",
      "Elegant title card"
    ],
    "kf": 9,
    "colors": "#FAFAF8 #1A1A18 #CBC7C0 #B0ACA4 #D4A574",
    "multi": false,
    "license": "Apache-2.0",
    "via": "huashu-design",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 暖白底 `#FAFAF8`; 左上叠暖金径向 wash (`rgba(212,165,116,0.07)`)。**70%+ 留白是这套风格的灵魂**, 不要填满。",
      "fonts": "西文 `Inter` weight 200/300 (超细); 中文 `Noto Sans SC` Light。字距收紧 (-4 ~ -7px)。",
      "timeline": "- **0.2s** 四角 corner marks (暖金 0.5px 描边 L 形) + 暖金 wash 淡入。 - **0.5s** eyebrow (uppercase, letter-spacing 9px, `#B0ACA4`) fadeUp。 - **0.6s 起** hero 单词逐字符浮现 (每字 .ch span, 错峰 80ms, translateY 30→0, expo-out)。font-size ~220px, weight 200。 - **1.9s** 暖金细线 (`#D4A574`, 高 1px) 从宽 0 → 88px 居中生长。 - **2.2s** 两行 desc (weight 300, `#A8A4A0`, line-height 2) fadeUp。 - **1.8s** 侧边竖排小标签 (左右各一, rotate ±90°) 淡入。 - **2.4s 起** 底部 7 条细竖线 (1.5px, 部分暖金) 错峰升起, 随后进入 4s 慢呼吸循环 (opacity 1↔0.45)。",
      "palette": "仅用 暖白 `#FAFAF8` / 近黑 `#1A1A18` / 暖金 `#D4A574` / 暖灰 `#A8A4A0`/`#B0ACA4`。**禁止**鲜艳色。暖金是唯一强调, 极克制 (细线 / 角标 / 个别指示器)。",
      "content": "- hero 是一个词 (≤16 字符), 必须用用户真实品牌词/主题词。 - desc 两行短句, 严禁 lorem ipsum。 - 动效用 `@keyframes`, `prefers-reduced-motion` 下全部停在终态。 - 单文件 HTML。"
    }
  },
  {
    "id": "frame-creative-voltage",
    "name": "Creative Voltage",
    "zh_name": "创意电压分屏帧",
    "emoji": "⚡",
    "category": "presentation",
    "subcategory": "title-card",
    "engine": "hyperframes",
    "description": "Electric-blue / dark offset split with a hand-drawn script accent — panels slide in offset, a display title rises with one electric outlined word, and a handwritten script strokes itself in over a swept underline. Energetic, retro-modern, playful. Distilled from the frontend-slides \"Creative Voltage\" preset.",
    "zh_description": "创意电压分屏帧:电光蓝/暗错位分屏滑入 + 描边电光词 + 手写 script 自描, 复古现代有活力",
    "dmin": "3",
    "dmax": "6",
    "aspects": "16:9 · 1:1",
    "recommended": "6",
    "best_for": [
      "Energetic brand / campaign title",
      "Creative reveal with a human, hand-drawn accent",
      "Retro-modern hero"
    ],
    "kf": 7,
    "colors": "#0d0d14 #2f4bff #6f86ff",
    "multi": false,
    "license": "Apache-2.0",
    "via": "frontend-slides",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 左电光蓝屏 (`#2f4bff`, 47%) + 右暗屏 (`#0d0d14`, 53%), 错位分割。",
      "fonts": "display `Syne` 800; mono `Space Mono`; 手写 `Caveat`。",
      "timeline": "- **0.1s** 左蓝屏从 translateX(-100%) 滑入; **0.25s** 右暗屏从 translateX(100%) 滑入 (错峰, expo-out)。 - **0.9s** 蓝屏左上电光高光 wash 淡入。 - **1.0s** 蓝屏左上 mono meta 行 (`// CREATIVE_MODE · ON`) 淡入。 - **1.0s 起** 右屏 display 标题逐行升起 (每行 .ln, 错峰 180ms); 一行用 `.volt` 描边电光词 (`-webkit-text-stroke` + 蓝色填充)。font-size 132px, 右对齐。 - **1.4s** 蓝屏手写 script (`Caveat`, rotate -7°) 弹入。 - **1.9s** script 下方手绘 underline (SVG path, stroke-dashoffset 描出)。 - **2.2s** 右下 mono caption 淡入。",
      "palette": "电光蓝 `#2f4bff`/`#6f86ff` / 暗 `#0d0d14` / 白。蓝是能量主色, 描边词与 script 制造\"电压\"对比。**禁止**杂色。",
      "content": "- display 拆 2-4 行, 选一个词做 `.volt` 描边强调。 - script 是短手写词组 (≤24 字符), 给画面人味。 - 必须用真实标题, 严禁 lorem ipsum。 - 动效用 `@keyframes` + SVG stroke, `prefers-reduced-motion` 下全部停在终态。 - 单文件 HTML。"
    }
  },
  {
    "id": "frame-data-chart-nyt",
    "name": "NYT Data Chart",
    "zh_name": "NYT 风数据图表帧",
    "emoji": "📈",
    "category": "data-viz",
    "subcategory": "bar-chart",
    "engine": "hyperframes",
    "description": "New York Times-style animated data chart with counter animation and editorial typography.",
    "zh_description": "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)",
    "dmin": "5",
    "dmax": "20",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "",
    "best_for": [
      "Editorial data viz",
      "Annual report",
      "Comparison reveal"
    ],
    "kf": 2,
    "colors": "#f7f5ee #1a1a1a #a91d1d",
    "multi": false,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。"
    }
  },
  {
    "id": "frame-data-rollup",
    "name": "Data Rollup",
    "zh_name": "数据滚动帧",
    "emoji": "📊",
    "category": "data-viz",
    "subcategory": "bar-chart",
    "engine": "remotion",
    "description": "A native Remotion data-animation frame: bars grow from zero by real data via spring physics while the figures roll up from 0 to their target in sync. The first template that uses Remotion's frame clock directly (useCurrentFrame + interpolate + spring) rather than the HTML bridge — this is what makes numbers visibly come alive, which a static HTML chart can't. Meant to be dropped onto a single data frame inside an otherwise hyperframes video, as a user-chosen motion enhancement.",
    "zh_description": "数据滚动帧:原生 Remotion 数据动画 — 柱子按真实数据用 spring 从 0 长上去、数字同步从 0 滚到目标值。静态 HTML 图表做不出的'数字活起来'效果。",
    "dmin": "3",
    "dmax": "8",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "5",
    "best_for": [
      "A data frame where the numbers should animate, not sit static",
      "Weekly metrics / growth bars driven by real values",
      "Enhancing one data segment of an otherwise hyperframes video"
    ],
    "kf": 0,
    "colors": "",
    "multi": false,
    "license": "Apache-2.0",
    "via": "none",
    "has_src": false,
    "has_skill_md": true,
    "style": {
      "canvas": "默认 1920×1080,布局全部基于真实画布尺寸 (`useVideoConfig`) 计算,9:16 / 1:1 也不会压扁。",
      "content": "- 喂真实数据,别用占位数字。 - `value` 必须是数;非数会被当 0(`enhanceFrameNative` 应在绑定前归一/校验)。 - 柱子数控制在 7 根内。"
    }
  },
  {
    "id": "frame-decision-tree",
    "name": "Decision Tree",
    "zh_name": "",
    "emoji": "",
    "category": "explainer",
    "subcategory": "flowchart",
    "engine": "hyperframes",
    "description": "Animated flowchart with branching paths",
    "zh_description": "",
    "dmin": "3",
    "dmax": "30",
    "aspects": "16:9",
    "recommended": "",
    "best_for": [
      "How-to flow",
      "Decision branching",
      "Process diagram"
    ],
    "kf": 0,
    "colors": "",
    "multi": true,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "frame-electric-studio",
    "name": "Electric Studio",
    "zh_name": "电光工作室分屏帧",
    "emoji": "🔷",
    "category": "presentation",
    "subcategory": "quote-card",
    "engine": "hyperframes",
    "description": "Two-panel vertical split with a quote as the hero — white top and electric-blue bottom panels open from the center, a black accent bar grows on the seam, and the quote reveals line by line across the divide. Clean, professional, high contrast. Distilled from the frontend-slides \"Electric Studio\" preset.",
    "zh_description": "电光工作室分屏帧:白/蓝双屏从中心开合 + 强调条生长 + 引言逐行浮现, 高对比专业感",
    "dmin": "3",
    "dmax": "6",
    "aspects": "16:9 · 1:1",
    "recommended": "6",
    "best_for": [
      "Pull-quote / testimonial reveal",
      "Mission statement card",
      "Clean high-contrast title"
    ],
    "kf": 7,
    "colors": "#0a0a0a #4361ee",
    "multi": false,
    "license": "Apache-2.0",
    "via": "frontend-slides",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 白色上屏 (540px) + 电光蓝下屏 (`#4361ee`, 540px), 中线分割。",
      "fonts": "display + body 都用 `Manrope` 800/700/500/400。",
      "timeline": "- **0.1s** 上屏从 translateY(-100%) 下落、下屏从 translateY(100%) 上升, 同时从中心\"开合\"到位 (expo-out)。 - **0.9s** 接缝处黑色 accent 条 (高 8px) 从宽 0 → 320px 生长。 - **1.0s 起** 引言逐行浮现 (每行 .ln, 错峰 150ms, translateY 26→0); 跨入蓝屏的行用白色 (`.on-blue`)。font-size 96px, weight 800。 - **2.2s** 下屏 attribution (name 28px 700 + role uppercase 0.7 opacity, 白色) 淡入。 - **2.5s** 右上品牌 mark (深色) + 右下品牌 mark (白 0.6) 淡入。",
      "palette": "白 / 电光蓝 `#4361ee` / 近黑 `#0a0a0a` 三色。accent 条与品牌词用黑/白, 蓝是大色块。**禁止**第四个主色。",
      "content": "- quote 拆成 2-4 行, 让 1-2 行落在蓝屏 (改 `.on-blue` class) 形成跨屏对比。 - 必须用真实引言/陈述, 严禁 lorem ipsum。 - 动效用 `@keyframes`, `prefers-reduced-motion` 下全部停在终态。 - 单文件 HTML。"
    }
  },
  {
    "id": "frame-glitch-title",
    "name": "Glitch Title",
    "zh_name": "故障艺术标题帧",
    "emoji": "⚡",
    "category": "presentation",
    "subcategory": "text-card",
    "engine": "hyperframes",
    "description": "Cyberpunk-style glitch title with RGB shift, scanline, and chromatic aberration effects.",
    "zh_description": "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero",
    "dmin": "3",
    "dmax": "8",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "6",
    "best_for": [
      "Tech product reveal",
      "Cyberpunk aesthetic",
      "Hacker vibe"
    ],
    "kf": 1,
    "colors": "#0d0e10 #f5f5f7 #00f0ff #ff2bd6 #ffb547",
    "multi": false,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 背景 `#070708` 近黑或 CRT 暗灰 `#0d0e10`; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。"
    }
  },
  {
    "id": "frame-kinetic-type",
    "name": "Kinetic Type",
    "zh_name": "",
    "emoji": "",
    "category": "presentation",
    "subcategory": "text-card",
    "engine": "hyperframes",
    "description": "Bold kinetic typography promo",
    "zh_description": "",
    "dmin": "3",
    "dmax": "30",
    "aspects": "16:9",
    "recommended": "",
    "best_for": [
      "Promo headline",
      "Bold statement",
      "Punchy intro"
    ],
    "kf": 0,
    "colors": "#0a0a0f",
    "multi": true,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "frame-light-leak-cinema",
    "name": "Light Leak Cinema",
    "zh_name": "胶片漏光电影帧",
    "emoji": "🎞️",
    "category": "ambient",
    "subcategory": "cinematic",
    "engine": "hyperframes",
    "description": "Cinematic light leak frame — film grain, lens flare, and editorial 35mm warmth over a hero shot.",
    "zh_description": "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡",
    "dmin": "4",
    "dmax": "10",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "",
    "best_for": [
      "Cinematic intro",
      "Documentary cold open",
      "Mood / b-roll"
    ],
    "kf": 0,
    "colors": "#1a0d08 #ffb547 #ff7e3f #d97757 #2a1410",
    "multi": false,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "- **2.39:1 letterbox** (推荐): 1920×800, 上下黑边各 140px (`#000`)。 - 或 16:9: 1920×1080, 无 letterbox。"
    }
  },
  {
    "id": "frame-liquid-bg-hero",
    "name": "Liquid Background Hero",
    "zh_name": "流体背景 Hero 帧",
    "emoji": "🌊",
    "category": "marketing",
    "subcategory": "hero",
    "engine": "hyperframes",
    "description": "Hero card over a flowing liquid mesh-gradient background — magazine-style cover with editorial typography.",
    "zh_description": "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报",
    "dmin": "4",
    "dmax": "12",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "",
    "best_for": [
      "Product launch hero",
      "SaaS landing video",
      "Editorial cover"
    ],
    "kf": 3,
    "colors": "#1e1b4b #fafaf8 #a78bfa #7c5cff #ec4899",
    "multi": false,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。"
    }
  },
  {
    "id": "frame-logo-outro",
    "name": "Logo Outro Frame",
    "zh_name": "品牌 Logo 收尾帧",
    "emoji": "🎬",
    "category": "intro-outro",
    "subcategory": "outro",
    "engine": "hyperframes",
    "description": "Segmented logo assembly + glow bloom + tagline reveal — perfect for video outros and brand closing frames.",
    "zh_description": "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕",
    "dmin": "3",
    "dmax": "10",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "8",
    "best_for": [
      "Video closing card",
      "Brand outro",
      "Channel sign-off"
    ],
    "kf": 4,
    "colors": "#1a1535 #08090c #f5f5f7 #7c5cff",
    "multi": false,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 黑色 `#08090c` 或品牌深色背景; 加微妙 vignette `radial-gradient(...)` 让中心更亮。"
    }
  },
  {
    "id": "frame-nyt-graph",
    "name": "NYT Graph",
    "zh_name": "",
    "emoji": "",
    "category": "data-viz",
    "subcategory": "editorial",
    "engine": "hyperframes",
    "description": "Animated data chart in print editorial style",
    "zh_description": "",
    "dmin": "3",
    "dmax": "30",
    "aspects": "16:9",
    "recommended": "",
    "best_for": [
      "News-style stat reveal",
      "Line chart over time",
      "Editorial data point"
    ],
    "kf": 0,
    "colors": "#faf9f6",
    "multi": true,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "frame-pentagram-stat",
    "name": "Pentagram Stat",
    "zh_name": "瑞士网格数据帧",
    "emoji": "📊",
    "category": "data-viz",
    "subcategory": "stat-card",
    "engine": "hyperframes",
    "description": "Swiss-grid statistic anchor — a giant number bleeds off the edge while grid rules sweep in, a bar chart grows, and a black data bar slides up. Rational, editorial, high-contrast. Distilled from the huashu-design \"Pentagram\" design philosophy.",
    "zh_description": "瑞士网格数据帧:巨大数字锚点 + 红色强调 + 生长条形图 + 黑色数据底栏, 理性克制的编辑风",
    "dmin": "3",
    "dmax": "6",
    "aspects": "16:9 · 1:1",
    "recommended": "8",
    "best_for": [
      "Single hero metric / benchmark reveal",
      "Editorial data slide",
      "Rational, high-contrast brand moment"
    ],
    "kf": 8,
    "colors": "#E63946",
    "multi": false,
    "license": "Apache-2.0",
    "via": "huashu-design",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 纯白底 `#ffffff`; 叠瑞士网格 — 水平/垂直细线 (黑, opacity 0.04-0.06), 开场 0.7s 内 scaleX/scaleY 从 0 扫入。",
      "fonts": "西文 `Archivo` (900/700/500) 或 `Helvetica Neue`; 中文 `Noto Sans SC` Bold。理性、紧凑、负字距。",
      "timeline": "- **0.0-0.7s** 网格线扫入 (scaleX/scaleY 0→1, cubic-bezier(0.16,1,0.3,1))。 - **0.5-1.6s** 右侧巨大数字锚点 (font-size ~1020px, weight 900, 黑, opacity 0.07) 从下方 8% 升入并淡现, bleed off 右边缘。 - **0.7s** 红色 eyebrow label (uppercase, letter-spacing 6px, `#E63946`) fadeUp。 - **0.85s** 主数字 headline (~200px, weight 900) fadeUp; 句点/单位用 `#E63946` 红强调。 - **1.15s** 副标 (24px, `#999`) fadeUp。 - **1.3s** 红色 center rule (高 5px) 从宽 0 → 400px 生长。 - **1.35-1.7s** 5 根条形图错峰从底部 scaleY 0→1 生长; 中间一根 `#E63946` 红 + opacity 0.85, 其余黑 opacity 0.12。 - **1.5s** 黑色数据底栏 (高 80px) 从 translateY(100%) 滑入; 内含 3 组 stat (红色大数字 + 灰白小标签) + 右侧 system 标签。",
      "palette": "仅用 黑 / 白 / `#E63946` 红 / 中性灰 `#999`。**严禁**其他彩色。红色是唯一强调色, 用在 label / 主数字标点 / center rule / 中间条 / 数据底栏数字。",
      "content": "- 必须用用户的真实指标/数字, 严禁 lorem ipsum 或编造 benchmark。 - headline 是一个数字 (≤12 字符); anchor 是它的简写 (≤4 字符) 用作背景巨字。 - 动效用 `@keyframes`, `prefers-reduced-motion` 下全部停在终态 (静态成图)。 - 单文件 HTML。"
    }
  },
  {
    "id": "frame-play-mode",
    "name": "Play Mode",
    "zh_name": "",
    "emoji": "",
    "category": "social-shorts",
    "subcategory": "playful",
    "engine": "hyperframes",
    "description": "Playful elastic animations",
    "zh_description": "",
    "dmin": "3",
    "dmax": "30",
    "aspects": "16:9",
    "recommended": "",
    "best_for": [
      "Playful social ad",
      "Casual intro",
      "Fun product"
    ],
    "kf": 0,
    "colors": "#0057FF",
    "multi": true,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "frame-product-promo",
    "name": "Product Promo",
    "zh_name": "",
    "emoji": "",
    "category": "product-demo",
    "subcategory": "multi-scene",
    "engine": "hyperframes",
    "description": "Multi-scene product showcase with SVG assets",
    "zh_description": "",
    "dmin": "3",
    "dmax": "30",
    "aspects": "16:9",
    "recommended": "",
    "best_for": [
      "Product showcase",
      "Multi-feature reel",
      "Hero promo"
    ],
    "kf": 0,
    "colors": "#0a0a0f",
    "multi": true,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "frame-product-promo-30s",
    "name": "Product Promo · 30s",
    "zh_name": "",
    "emoji": "",
    "category": "product-demo",
    "subcategory": "multi-scene",
    "engine": "hyperframes",
    "description": "Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forked from Nate Herk's hyperframes-student-kit (linear-promo-30s); brand-specific copy + assets replaced with generic placeholders.",
    "zh_description": "",
    "dmin": "25",
    "dmax": "35",
    "aspects": "16:9",
    "recommended": "",
    "best_for": [
      "30-second product promo",
      "B2B SaaS launch",
      "Multi-feature reel with sound"
    ],
    "kf": 0,
    "colors": "",
    "multi": true,
    "license": "MIT",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "frame-swiss-grid",
    "name": "Swiss Grid",
    "zh_name": "",
    "emoji": "",
    "category": "presentation",
    "subcategory": "corporate",
    "engine": "hyperframes",
    "description": "Structured grid layout",
    "zh_description": "",
    "dmin": "3",
    "dmax": "30",
    "aspects": "16:9",
    "recommended": "",
    "best_for": [
      "Corporate slide",
      "Minimal report card",
      "Typography-led title"
    ],
    "kf": 0,
    "colors": "#f2f2f2",
    "multi": true,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "frame-takram-organic",
    "name": "Takram Organic",
    "zh_name": "东方柔和有机帧",
    "emoji": "🌿",
    "category": "explainer",
    "subcategory": "concept-diagram",
    "engine": "hyperframes",
    "description": "Soft-tech radial node graph as art — a frosted rounded card holds the message while curved links draw and eight nodes pop outward around an evolving core, then everything gently floats. Warm, natural, organic. Distilled from the huashu-design \"Takram\" philosophy.",
    "zh_description": "东方柔和有机帧:毛玻璃圆角卡 + 曲线连接描入 + 放射节点弹出 + 柔和漂浮, 米色自然色调",
    "dmin": "4",
    "dmax": "7",
    "aspects": "16:9 · 1:1",
    "recommended": "7",
    "best_for": [
      "System / architecture concept reveal",
      "Warm, human product story",
      "Network or memory-graph explainer"
    ],
    "kf": 6,
    "colors": "#EFEAE0 #3A3A34 #7A9E7F #2E2E28 #C98A5E",
    "multi": false,
    "license": "Apache-2.0",
    "via": "huashu-design",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 米色底 `#EFEAE0`; 右侧叠 sage 绿径向 wash (`rgba(122,158,127,0.10)`)。整体柔和、自然、有呼吸感。",
      "fonts": "西文 `Manrope` 700/600/400; 中文 `Noto Sans SC`。圆润, 不要太硬。",
      "timeline": "- **0.2s** 左侧毛玻璃圆角卡 (`rgba(255,253,248,0.66)` + blur 8px + border-radius 40px + 柔影) 从下方 26px + scale 0.985 升入。 - **0.7s** 绿色 eyebrow (`#7A9E7F`, uppercase, letter-spacing 4px) fadeUp。 - **0.9s** 卡标题 (92px, weight 700) fadeUp; 一个 accent 词用陶土橙 `#C98A5E`。 - **1.2s** caption (22px, `#8A867C`, line-height 1.8) fadeUp。 - **1.3s** 右侧放射图中心节点 (陶土橙, r=40) 弹出 (overshoot)。 - **1.4s 起** 8 条曲线 link (sage `#B8C9BA`, stroke-dasharray draw) 从中心错峰描出。 - **1.9s 起** 8 个外围节点 (sage 绿, r=22) 错峰 pop (scale 0→1, overshoot)。 - **2.0s 起** 整个放射图进入 7s 慢漂浮循环 (translateY 微动)。",
      "palette": "米色 `#EFEAE0` / 暖白卡 / sage 绿 `#7A9E7F`·`#B8C9BA` / 陶土橙 `#C98A5E` / 暖灰文字。**禁止**高饱和科技蓝/紫。绿是结构色, 橙是强调色 (核心节点 + 标题 accent 词)。",
      "content": "- 节点图是\"艺术品\", 节点数 4-8 按内容调 (改 SVG 里 node/link 数量 + 角度)。 - 必须用真实概念/关系, 严禁 lorem ipsum。 - 动效用 `@keyframes` + SVG stroke-dashoffset, `prefers-reduced-motion` 下全部停在终态。 - 单文件 HTML。"
    }
  },
  {
    "id": "frame-vignelli",
    "name": "Vignelli",
    "zh_name": "",
    "emoji": "",
    "category": "social-shorts",
    "subcategory": "portrait-bold",
    "engine": "hyperframes",
    "description": "Bold typography with red accents",
    "zh_description": "",
    "dmin": "3",
    "dmax": "30",
    "aspects": "9:16",
    "recommended": "",
    "best_for": [
      "Portrait social",
      "Bold statement card",
      "Red-accent promo"
    ],
    "kf": 0,
    "colors": "#1a1a1a #cc0000",
    "multi": true,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "frame-warm-grain",
    "name": "Warm Grain",
    "zh_name": "",
    "emoji": "",
    "category": "presentation",
    "subcategory": "hero",
    "engine": "hyperframes",
    "description": "Cream aesthetic with grain texture",
    "zh_description": "",
    "dmin": "3",
    "dmax": "30",
    "aspects": "16:9",
    "recommended": "",
    "best_for": [
      "Product launch",
      "Lifestyle brand",
      "Magazine-style intro"
    ],
    "kf": 1,
    "colors": "#f5f0e0",
    "multi": true,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": false,
    "style": {}
  },
  {
    "id": "vfx-text-cursor",
    "name": "Text + Cursor VFX",
    "zh_name": "VFX 文字光标",
    "emoji": "✨",
    "category": "presentation",
    "subcategory": "text-card",
    "engine": "hyperframes",
    "description": "Typewriter text effect with blinking terminal cursor — perfect for code-style reveals or tech demos.",
    "zh_description": "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句",
    "dmin": "3",
    "dmax": "10",
    "aspects": "16:9 · 9:16 · 1:1",
    "recommended": "7",
    "best_for": [
      "Code demo intro",
      "Tech narrative",
      "Terminal vibe"
    ],
    "kf": 1,
    "colors": "#06070a #f5f5f7 #ff3b6f #00d4ff",
    "multi": false,
    "license": "Apache-2.0",
    "via": "",
    "has_src": true,
    "has_skill_md": true,
    "style": {
      "canvas": "1920×1080, 背景 `#06070a` 暗哑黑 或 `#0a0d12` (有暖偏蓝); 加微妙 vignette。"
    }
  }
]