{
 "schema": 1,
 "site": "https://assets.ouuut.com",
 "repo": "nakamotosai/sai-assets",
 "updated": "2026-11-04",
 "counts": {
  "packs": 29,
  "surfaces": 39
 },
 "categories": [
  {
   "id": "themes",
   "title": "主题 · 配色与字体",
   "chip": "主题",
   "count": 14
  },
  {
   "id": "fonts",
   "title": "排版配方",
   "chip": "排版",
   "count": 2
  },
  {
   "id": "web-fx",
   "title": "网页动效",
   "chip": "动效",
   "count": 4
  },
  {
   "id": "web-ui",
   "title": "UI 组件",
   "chip": "组件",
   "count": 6
  },
  {
   "id": "fx-engines",
   "title": "动效引擎 / 底座",
   "chip": "引擎",
   "count": 1
  },
  {
   "id": "references",
   "title": "外部参考观测",
   "chip": "参考",
   "count": 1
  },
  {
   "id": "video-motion",
   "title": "视频动效(索引)",
   "chip": "视频",
   "count": 1
  }
 ],
 "items": [
  {
   "id": "abyss-lab-record",
   "title": "Abyss Lab Record 暗黑实验记录",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "dark",
    "theme",
    "paper",
    "mono",
    "grid",
    "record"
   ],
   "when": "近黑底 + 工程网格 + 等宽 HUD + 单关键词橙，深色主叙事、纸面只做独立反转章节；面板全透明虚线检测框;适用:近黑非纯黑底 + 单层工程网格（body 一层，透明度 <=0.14，不压文字）;标题无衬线 800-900，中文降一档；等宽管数据 HUD + tabular-nums；手写只做英文短句点缀;橙色只染单关键词/危险数值/选中态/光源，单屏 <=10%;面板全透明 + 1px 白线/虚线边框，检测框分静态虚线与描边流动两种;纸面只做独立 data-theme=light 反转章节（表单卡 + 墨字 + 单枚橙章）;动效只动 transform/opacity 150-300ms，描边流动是唯一的描边动画且降级静止;mono 栈永不落回系统中文字体，裸 monospace/Menlo/Consolas 禁入生产栈",
   "not_for": "禁用:衬线标题/正文（Georgia/Noto Serif/SimSun/宋体禁入）;面板实底色 + 投影（纸面表单卡除外）;整词橙色大标题（23/24 类必须降为关键词橙 + 描边混排）;描边空心字常驻正文（只许 display 大字，须验对比度）;低透明 mono 小字（须提到 14px 或提亮到 4.5:1）;为状态新增强调色（用下划线/字重/底色微变）",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/abyss-lab-record/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/abyss-lab-record/",
   "zip": "downloads/abyss-lab-record.zip",
   "files": 12,
   "kb": 549,
   "swatches": [
    "#0B0B0E",
    "#14141B",
    "#14161A",
    "#F5F2EA",
    "#B8B4AC",
    "#FF5A1F",
    "#FF7A33",
    "#FF3B1F"
   ]
  },
  {
   "id": "bg-fx",
   "title": "bg-fx · 十款 WebGL2 动态背景(共享引擎)",
   "category": "web-fx",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "webgl2",
    "postfx",
    "glsl",
    "shader",
    "background",
    "bloom",
    "hero",
    "dark",
    "light"
   ],
   "when": "需要一块有机制、经得起近看的动态背景:首屏 hero、section 底、deck 封面、展厅墙。取用面 = 一份 engine.js(bloom → 径向色差 → 亮度门控颗粒 → smoothstep 暗角 → ACES → 三角抖动)+ 一个 concept(该效果的机制);参数只有 6 个通用旋钮(speed/bloom/exposure/grain/ca/vig)。性能口径:DPR 封顶(弱设备 1.25、桌面 1.75),场景按半分辨率、泛光按 1/4 分辨率,页隐藏(document.hidden)与离屏(IntersectionObserver)整帧跳过,回到前台按 delta clamp 续播。无障碍口径:prefers-reduced-motion 只渲染一帧静态画面(t=6.0),不做自动播放的循环动画。",
   "not_for": "禁用:① 前景内容密集的页面(背景有景深与高光,会跟正文抢注意力,长文页只用 textZone 压暗后的低配 speed);② 需要首帧 LCP 极致的落地页(首帧要建 4 张离屏 target,移动端明显更重——改用 CSS 渐变);③ 无 WebGL2 的老设备(createEngine 会返回 {ok:false},必须自己给静态兜底,别让画布全黑);④ 把 10 个效果同屏铺开(10 个 WebGL 上下文会被浏览器回收,一页只开一个);⑤ 当图标/装饰贴纸用(这是环境光,不是插画)。",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/bg-fx/preview/index.html",
   "heavy": true,
   "demos": [
    {
     "slug": "effects-aurora-veil",
     "label": "Aurora Veil · 极光幕帘 · bg-fx",
     "page": "p/bg-fx/demo/effects-aurora-veil/"
    },
    {
     "slug": "effects-chrome-ripple",
     "label": "Chrome Ripple · 铬面涟漪 · bg-fx",
     "page": "p/bg-fx/demo/effects-chrome-ripple/"
    },
    {
     "slug": "effects-ember-field",
     "label": "Ember Field · 余烬之野 · bg-fx",
     "page": "p/bg-fx/demo/effects-ember-field/"
    },
    {
     "slug": "effects-gilded-topography",
     "label": "Gilded Topography · 鎏金地形 · bg-fx",
     "page": "p/bg-fx/demo/effects-gilded-topography/"
    },
    {
     "slug": "effects-lumen-river",
     "label": "Lumen River · 流光之河 · bg-fx",
     "page": "p/bg-fx/demo/effects-lumen-river/"
    },
    {
     "slug": "effects-magnetic-filings",
     "label": "Magnetic Filings · 铁屑磁力线 · bg-fx",
     "page": "p/bg-fx/demo/effects-magnetic-filings/"
    },
    {
     "slug": "effects-prism-beam",
     "label": "Prism Beam · 棱镜光束 · bg-fx",
     "page": "p/bg-fx/demo/effects-prism-beam/"
    },
    {
     "slug": "effects-silk-interference",
     "label": "Silk Interference · 丝缎干涉 · bg-fx",
     "page": "p/bg-fx/demo/effects-silk-interference/"
    },
    {
     "slug": "effects-solar-drift",
     "label": "Solar Drift · 暖阳漂移 · bg-fx",
     "page": "p/bg-fx/demo/effects-solar-drift/"
    },
    {
     "slug": "effects-tidal-caustics",
     "label": "Tidal Caustics · 潮汐焦散 · bg-fx",
     "page": "p/bg-fx/demo/effects-tidal-caustics/"
    }
   ],
   "page": "p/bg-fx/",
   "zip": "downloads/bg-fx.zip",
   "files": 39,
   "kb": 109,
   "swatches": []
  },
  {
   "id": "cjk-thin-type-system",
   "title": "CJK Thin Type System · 中文细体排版语言",
   "category": "fonts",
   "version": "1.0.0",
   "license": "MIT(本包 JSON / 文档 / 断言为自产)",
   "tags": [
    "cjk",
    "typography",
    "thin",
    "type-scale",
    "dark",
    "letter-spacing",
    "line-height",
    "text-shadow"
   ],
   "when": "中文 / 日文暗色单页站、作品集、个人站要求「细、干净、一套语言」时;或已有站点出现「字体乱」(同一字号挂多字重、各组件一套行高 / 字距 / 阴影)需要先普查再收敛时",
   "not_for": "明亮纸媒长文(走 cjk-typography 的正文档 + 衬线 article 栈)、数据密集工具面板(走系统栈)、需要粗体力量感的营销落地页",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/cjk-thin-type-system/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/cjk-thin-type-system/",
   "zip": "downloads/cjk-thin-type-system.zip",
   "files": 13,
   "kb": 43,
   "swatches": []
  },
  {
   "id": "cjk-typography",
   "title": "CJK Typography · 中文排版四件套(回退栈 / 字号总表 / 系统栈 / 免费细体)",
   "category": "fonts",
   "version": "1.0.0",
   "license": "MIT(本包 JSON / 文档 / 断言为自产;所列字体各自沿用自己的许可,见 tokens/free-thin-cjk.json)",
   "tags": [
    "cjk",
    "font-stack",
    "type-scale",
    "monospace",
    "free-fonts",
    "license",
    "subsetting"
   ],
   "when": "新中文项目定字族与字号时:先对三场景字号总表,再定回退栈,还要选一款免费细体中文(含许可与下载来源)时",
   "not_for": "档位 / 行高 / 字距 / 文字影的收敛(走 cjk-thin-type-system)、配色(走 themes 包)、需要 700 粗体力量感的品牌页",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/cjk-typography/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/cjk-typography/",
   "zip": "downloads/cjk-typography.zip",
   "files": 12,
   "kb": 44,
   "swatches": []
  },
  {
   "id": "dual-theme-toggle",
   "title": "Dual Theme Toggle · 两态主题切换器(一个按钮)",
   "category": "web-ui",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "theme-toggle",
    "dark-mode",
    "light-dark",
    "design-tokens",
    "localstorage",
    "view-transition",
    "smooth-scroll",
    "accessibility"
   ],
   "when": "任何需要深浅两态的站点:内容型 / 工具型 / 文档站都行;要求无 JS 跟随系统、刷新不闪、切换有可见回执",
   "not_for": "需要三套以上主题、或主题要换的不只是颜色(字体/密度/语言一起切)的产品;那类该用主题目录 + 属性分发,不是一个按钮",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/dual-theme-toggle/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/dual-theme-toggle/",
   "zip": "downloads/dual-theme-toggle.zip",
   "files": 8,
   "kb": 51,
   "swatches": []
  },
  {
   "id": "fm-void",
   "title": "FM Void · 全黑 void + 半透明等宽字",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "dark",
    "theme",
    "mono",
    "void"
   ],
   "when": "全黑 void + 半透明等宽字；戏在 canvas 背景;适用:UI 字小、letter-spacing 宽;背景用 canvas 表演;静音用 GainNode 思路",
   "not_for": "禁用:整屏 CSS 抖;第二层粒子堆叠;彩色 UI chrome",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/fm-void/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/fm-void/",
   "zip": "downloads/fm-void.zip",
   "files": 12,
   "kb": 67,
   "swatches": [
    "#000000",
    "#f5f5f5",
    "#ffffff",
    "#ff4d6d",
    "#7dffa3",
    "#7dd3ff",
    "#d4a5ff",
    "#0a0a0a"
   ]
  },
  {
   "id": "fx-engines",
   "title": "fx-engines · 粒子引擎 + 悬浮调参板(底座)",
   "category": "fx-engines",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "particles",
    "engine",
    "param-panel",
    "schema",
    "versioned",
    "canvas",
    "webgl"
   ],
   "when": "需要持续仿真的粒子效果(径向波前/吸引子/Curl 流场/活字尘/银河盘/喷泉环)、或需要一块 schema 驱动的悬浮调参板;项目里已有多份 param-panel 副本在漂移时换成本包唯一副本",
   "not_for": "只要静态背景或满屏 bloom/ACES 后处理链(用 bg-fx)、页面与文字过场(用 page-transition)、React/框架组件化封装",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/fx-engines/preview/index.html",
   "heavy": true,
   "demos": [],
   "page": "p/fx-engines/",
   "zip": "downloads/fx-engines.zip",
   "files": 16,
   "kb": 108,
   "swatches": []
  },
  {
   "id": "gruvbox-dark",
   "title": "Gruvbox · 暖灰底 + 米黄字(经典 / Material / Baby 十变体)",
   "category": "themes",
   "version": "2.0.0",
   "license": "MIT",
   "tags": [
    "gruvbox",
    "retro",
    "warm-dark",
    "terminal",
    "multi-variant",
    "dashboard"
   ],
   "when": "工具型暗色面板、终端风 UI、需要暖灰底 + 米黄字 + 橙强调,或需要 hard/medium/soft 与 material/baby 变体",
   "not_for": "纸媒社论风、明亮内容站(改用 ouuut-editorial)",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/gruvbox-dark/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/gruvbox-dark/",
   "zip": "downloads/gruvbox-dark.zip",
   "files": 33,
   "kb": 157,
   "swatches": [
    "#1d2021",
    "#282828",
    "#32302f",
    "#3c3836",
    "#504945",
    "#665c54",
    "#7c6f64",
    "#928374"
   ]
  },
  {
   "id": "libraries-dev-fx",
   "title": "Libraries.dev 全家桶试吃台 · 五个 CDN 特效组件",
   "category": "web-ui",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "reveal",
    "effects",
    "react",
    "cdn",
    "esm-sh",
    "tasting-bench",
    "border-beam",
    "thinking-orbs",
    "liquid-gooey",
    "metal-fx",
    "img-fx"
   ],
   "when": "想在一页里横向对比 border-beam / thinking-orbs / liquid-gooey / metal-fx / img-fx 五个特效真身(React 原包,非仿写),或需要一个『每格独立加载 + 局部失败红字』的展示骨架,且不许装 npm、要求本地直开(双击预览页)",
   "not_for": "生产运行时依赖、离线或内网演示、需要固定版本可复现的工程、SSR 或打包进 bundle 的场景",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/libraries-dev-fx/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/libraries-dev-fx/",
   "zip": "downloads/libraries-dev-fx.zip",
   "files": 8,
   "kb": 42,
   "swatches": []
  },
  {
   "id": "minimalist-essential",
   "title": "Minimalist Essential 极简 essentials",
   "category": "themes",
   "version": "1.0.1",
   "license": "MIT",
   "tags": [
    "light",
    "theme",
    "grid",
    "minimal"
   ],
   "when": "删到不能再删：中性底 + 单强调色 + 8pt 网格 + 单列信息流；一屏一任务;适用:中性色做 90% 面积 + 1 个强调色只占 ≤10%，强调色只给主 CTA 与关键高亮;单无衬线家族 + ≤3 字重 + 等比字阶（12/14/16/20/24/32/48），Display 可用 clamp 流体;8pt 间距只用 4/8/16/24/32/48/64/96/128；section 上下只用 64/96/128（mobile 48/56/64）;单列信息流 + 大负空间 + 少而大的图 + 零装饰；正文单列 max-width 600-720px;首屏只答 1 个问题 + 只给 1 个主 CTA（落地页唯一可双 CTA 例外）;顶导 ≤5 项、深度 ≤3 层；超限进 mega / 着陆页 / 搜索 / 页脚;动效只动 transform/opacity：按压 100-150ms、切换 150-200ms、转场 200-300ms;内容多时靠折叠 + 搜索 + 本地导航 + 面包屑做密度极简，不靠留白最大化;留白占比 40-60% 是甜点，>75% 按空洞页返工",
   "not_for": "禁用:为白而白的空洞页：无层级的空 = 荒，不是极简;低对比浅灰字：正文 <4.5:1、大字 <3:1 直接返工;桌面端也藏导航（汉堡）：可找性 > 完整性;把粗野当极简：粗野是叛逆版，不是删到本质;一屏多 CTA 轰炸 / 自动轮播 / 弹窗;装饰三件套叠加：分割线 / 阴影 / 圆角只用最低值三选一;字族 >2、字重 >3 档；全站裸色值 / 裸 px（必须走 token）",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/minimalist-essential/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/minimalist-essential/",
   "zip": "downloads/minimalist-essential.zip",
   "files": 12,
   "kb": 39,
   "swatches": [
    "#0F62FE",
    "#0043CE",
    "#FAFAF8",
    "#F1F0EC",
    "#E8E6E1",
    "#141414",
    "#1E7E34",
    "#111111"
   ]
  },
  {
   "id": "mohe-mono-blue",
   "title": "墨河 · 深色单色蓝（群青）",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "dark",
    "theme",
    "ink",
    "blue",
    "serif",
    "cool",
    "monochrome",
    "card"
   ],
   "when": "近黑冷蓝底 + 单一色相 218–223° 明度梯；唯一有彩光是强调色 #6891d9；卡片半透明浮在 WebGL 墨河背景上；竖排书脊刊头（汉字竖排做书脊）；衬线标题 + 冷瓷白正文;适用:整套 UI 只用一个色相（背景的 218–223° 蓝），深度靠明度梯而非新色相;强调色取背景中光带同 hue 同饱和（h218 s52）再抬明度，别用高饱和电蓝;卡片半透明（rgba(12,22,44,.20)）浮在背景上，让背景墨河透出来;分类色只用同色相的明度/微彩差（亮蓝/中蓝灰/近中性冷灰蓝/蓝），靠文字标签辨义;竖排书脊刊头：writing-mode:vertical-rl + text-orientation:upright，衬线 900 字重;深色底衬线标题可用，正文一律无衬线（衬线细体在深底会糊）",
   "not_for": "禁用:4 个饱和分类色相（与蓝场打架，是「五颜六色」的根因）;高饱和电蓝强调色（h218 s86 = 读作另一个蓝）;在注释/代码里保留被 grep 的字符串（会让产物断言假红）;深色底用细体衬线正文（锯齿糊）",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/mohe-mono-blue/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/mohe-mono-blue/",
   "zip": "downloads/mohe-mono-blue.zip",
   "files": 12,
   "kb": 71,
   "swatches": [
    "#04070F",
    "#101B33",
    "#EAF0FA",
    "#9EB0CC",
    "#6B7E9C",
    "#6891d9",
    "#9fbdf0",
    "#00000F"
   ]
  },
  {
   "id": "nav-rail-marquee",
   "title": "Nav Rail Marquee · 左竖排跑马灯 + 顶导航 + 右段轨",
   "category": "web-ui",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "navigation",
    "marquee",
    "vertical",
    "section-rail",
    "progress-line",
    "a11y",
    "keyboard",
    "monospace",
    "dark"
   ],
   "when": "单页作品集 / 工作室首页 / 长页叙事需要一层压在画面四角、不抢内容的导航 chrome:左竖排跑马灯 + 顶部居中小写导航 + 右侧段轨 + 底部进度线,并要求「当前段」在两处导航与进度线上同步、无障碍硬项齐备",
   "not_for": "多级菜单 / 下拉与面包屑、后台表单密集面板、需要 0-100% 连续滚动进度的场景、浅色纸质长文阅读页",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/nav-rail-marquee/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/nav-rail-marquee/",
   "zip": "downloads/nav-rail-marquee.zip",
   "files": 8,
   "kb": 48,
   "swatches": []
  },
  {
   "id": "ouuut-editorial",
   "title": "ouuut Editorial · 和色六景(纸白 / 炭黑)",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "editorial",
    "japanese-colors",
    "light",
    "dark",
    "dual-theme",
    "minimal",
    "serif"
   ],
   "when": "内容型 / 杂志型站点:纸白与炭黑双模、六色章节体系、零结构线(层级靠留白与字号)、需要 AA 安全的小字强调色",
   "not_for": "霓虹 / 赛博、密集数据工具面板、依赖强渐变与厚阴影的营销页",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/ouuut-editorial/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/ouuut-editorial/",
   "zip": "downloads/ouuut-editorial.zip",
   "files": 14,
   "kb": 38,
   "swatches": [
    "#F5F3ED",
    "#1A1A16",
    "#5B5A53",
    "#0E0E0C",
    "#EDEBE4",
    "#A3A199",
    "#0C8B7A",
    "#A77109"
   ]
  },
  {
   "id": "page-transition",
   "title": "page-transition · 过场三档(原生 API / DOM 整块 / Three 粒子字)",
   "category": "web-fx",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "view-transitions",
    "page-transition",
    "cross-document",
    "three",
    "particle-text",
    "css-only",
    "reduced-motion"
   ],
   "when": "静态站/长页需要过场:多页站翻页过渡与页内进出场(原生 View Transitions)、不想依赖新 API 的整块 DOM 位移过场、或字标要变成粒子飞入/炸散/流线汇入",
   "not_for": "单元素淡入上浮(一条 CSS transition 就够)、满屏 WebGL 背景(bg-fx)、生产级粒子池(fx-engines 的 fx.js)、React/Vue 路由过渡封装",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/page-transition/preview/index.html",
   "heavy": true,
   "demos": [],
   "page": "p/page-transition/",
   "zip": "downloads/page-transition.zip",
   "files": 26,
   "kb": 1434,
   "swatches": []
  },
  {
   "id": "paper-editorial",
   "title": "Paper Editorial · 纸感编辑：米白画布",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "light",
    "theme",
    "paper",
    "ink",
    "red",
    "editorial"
   ],
   "when": "纸感编辑：米白画布、墨色正文、刊头朱红;适用:浅色 only;大标题衬线加粗;红只作强调不铺大底",
   "not_for": "禁用:深色底;细字重大标题;文字贴边",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/paper-editorial/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/paper-editorial/",
   "zip": "downloads/paper-editorial.zip",
   "files": 12,
   "kb": 66,
   "swatches": [
    "#F7F3EB",
    "#EFE9DF",
    "#FFFCF7",
    "#D4CDC2",
    "#1A1714",
    "#6B6560",
    "#8A847C",
    "#C41E3A"
   ]
  },
  {
   "id": "particle-fx",
   "title": "particle-fx · 粒子效果六档",
   "category": "web-fx",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "particles",
    "canvas",
    "webgl",
    "audio-reactive",
    "starfield",
    "galaxy",
    "morph",
    "zero-dependency"
   ],
   "when": "页面需要一层轻量粒子:字标粒子组字、星野背景、银河盘视觉、云絮流场、散开↔组字 morph,或音频驱动的黑洞盘;要求零构建、无框架依赖",
   "not_for": "生产级高密度 three.js 粒子池(用 fx-engines 的 src/fx.js)、满屏背景 + bloom/ACES 后处理(用 bg-fx)、页面与文字过场(用 page-transition)",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/particle-fx/preview/index.html",
   "heavy": true,
   "demos": [],
   "page": "p/particle-fx/",
   "zip": "downloads/particle-fx.zip",
   "files": 33,
   "kb": 1437,
   "swatches": []
  },
  {
   "id": "popart-neubrutal",
   "title": "Pop Art · Neo Brutal · 奶油底 + 厚黑描边 + 硬偏移阴影 + 贴纸撞色",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "light",
    "theme",
    "paper",
    "shadow",
    "cream"
   ],
   "when": "奶油底 + 厚黑描边 + 硬偏移阴影 + 贴纸撞色;适用:4px 黑边;硬阴影无模糊;按下阴影收 2px",
   "not_for": "禁用:柔光模糊阴影;细灰边框当主结构;渐变背景",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/popart-neubrutal/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/popart-neubrutal/",
   "zip": "downloads/popart-neubrutal.zip",
   "files": 12,
   "kb": 66,
   "swatches": [
    "#FFFDF5",
    "#FFF6D8",
    "#FFFFFF",
    "#FFF0F0",
    "#000000",
    "#333333",
    "#666666",
    "#FF6B6B"
   ]
  },
  {
   "id": "references",
   "title": "References · 外部站点观测(40 条)",
   "category": "references",
   "version": "1.0.0",
   "license": "CC0-1.0",
   "tags": [
    "references",
    "observation",
    "web",
    "print",
    "three",
    "news",
    "swiss"
   ],
   "when": "选版式 / 定字号 / 定网格前先读的 40 条外部站点观测:网页 6 · 纸媒 7 · 三维 7 · 新闻 15 · 瑞士 5,给结构骨架、字阶与出处许可状态定依据",
   "not_for": "当色板用(要 hex 去 themes 包)、当代码或素材用、或据此复刻某个原站",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": null,
   "heavy": false,
   "demos": [],
   "page": "p/references/",
   "zip": "downloads/references.zip",
   "files": 46,
   "kb": 58,
   "swatches": []
  },
  {
   "id": "saaaai-mono",
   "title": "saaaai Mono · 近黑 void + 银灰 ink",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "dark",
    "theme",
    "void"
   ],
   "when": "近黑 void + 银灰 ink + 等高线轮廓当 accent;适用:单色强调;留大负空间;contour 与 accent 可分离",
   "not_for": "禁用:彩虹装饰默认开;浅色 token 混进 t1",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/saaaai-mono/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/saaaai-mono/",
   "zip": "downloads/saaaai-mono.zip",
   "files": 12,
   "kb": 66,
   "swatches": [
    "#06070A",
    "#040508",
    "#0E0F14",
    "#161820",
    "#F4F4F5",
    "#A8A8A8",
    "#8B8D94",
    "#E8E8EC"
   ]
  },
  {
   "id": "saaaai-paper",
   "title": "saaaai Paper · 暖纸浅底 + 陶土 accent",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "light",
    "theme",
    "paper",
    "warm"
   ],
   "when": "暖纸浅底 + 陶土 accent，主页 t6;适用:陶土作唯一 accent;浅底卡片白抬升",
   "not_for": "禁用:和 Claude 色板完全照抄不改名;高饱和多色",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/saaaai-paper/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/saaaai-paper/",
   "zip": "downloads/saaaai-paper.zip",
   "files": 12,
   "kb": 66,
   "swatches": [
    "#F5F2EC",
    "#EBE6DC",
    "#FFFFFF",
    "#F8F5F0",
    "#4A4A4A",
    "#6A6A6A",
    "#8A8A8A",
    "#CC7D5E"
   ]
  },
  {
   "id": "slide-master-senior",
   "title": "Slide Master Senior · 中老年大字号母版(封面 + 时间线)",
   "category": "web-ui",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "slide-deck",
    "presentation",
    "print-to-pdf",
    "large-type",
    "accessibility",
    "timeline",
    "1920x1080"
   ],
   "when": "做 1920×1080 演示母版 / 讲义 / 可打印 PDF:封面页与行程时间线页、中老年与低视力受众的大字号正文、键盘与滚轮翻页并同步页码",
   "not_for": "密集数据图表页、需要转场动画与视频的营销 Demo、手机竖屏流式长页",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/slide-master-senior/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/slide-master-senior/",
   "zip": "downloads/slide-master-senior.zip",
   "files": 8,
   "kb": 38,
   "swatches": []
  },
  {
   "id": "slow-ride-cream",
   "title": "Slow Ride Cream 慢骑奶油",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "light",
    "theme",
    "paper",
    "green",
    "warm",
    "editorial",
    "cream"
   ],
   "when": "暖奶油纸面 + 鼠尾草绿 + 番茄围巾，慢日子编辑风；拱形画框 + 双语微标签 + 一句文案;适用:纸面底色 + 深棕墨字，英文微标签全大写宽字距（如 MOTION STUDY — 001）;标题中文大字 + 一句短文案 + 一句慢生活 caption（风很轻/慢慢向前）;画框用拱形大圆角（rx 220 级）或通栏横幅，场景内画天空/沙丘/海带;插画扁平矢量 + 全图统一深色描边（约 3px），渐变只给天空和皮毛;太阳必带光晕圈，云 2-3 椭圆拼，点缀小花/石子/海鸥 m 形/帆船;番茄色围巾是唯一的动态强调色，随风飘;动效要慢：1.6-2s 循环，脚踏 IK + 辐条转 + 背景无缝滚动，必带暂停钮，尊重 prefers-reduced-motion;编号感：STUDY 001 / CLUB / ROUTE 之类的 catalog 标签",
   "not_for": "禁用:高饱和原色、大面积渐变、紫粉 AI 风;描边粗细不一、有的部件有描边有的没有;科技蓝、深色底、发光阴影;快节奏动效（<1s 循环显得赶）;无暂停钮的自动播放;中文标题加粗黑体顶格（要用衬线感/圆体感大字 + 字距）",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/slow-ride-cream/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/slow-ride-cream/",
   "zip": "downloads/slow-ride-cream.zip",
   "files": 12,
   "kb": 74,
   "swatches": [
    "#f6f1e7",
    "#efe7d3",
    "#fffdf6",
    "#f1e9d4",
    "#e3d7bd",
    "#493e31",
    "#93846c",
    "#a89a7f"
   ]
  },
  {
   "id": "spectral-glass-prism",
   "title": "Spectral Glass Prism · WebGPU 真玻璃光谱色散",
   "category": "web-ui",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "webgpu",
    "glass",
    "dispersion",
    "refraction",
    "raymarching",
    "sdf",
    "spectral",
    "cie-1931",
    "diamond",
    "vendored"
   ],
   "when": "落地页 / 作品集要一块能拖能转、有真火彩的实时玻璃舞台;或需要一个 WebGPU 画布引擎与宿主页面的契约样板(能力探测 → 节点自检 → 动态加载 → 兜底)",
   "not_for": "必须兼容无 WebGPU 浏览器或低端机的商业页面;要改引擎内部算法(应 fork 上游重新构建);首屏以文本与 SEO 为主的页面",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/spectral-glass-prism/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/spectral-glass-prism/",
   "zip": "downloads/spectral-glass-prism.zip",
   "files": 11,
   "kb": 384,
   "swatches": []
  },
  {
   "id": "swiss-classic",
   "title": "Swiss Classic（瑞士国际主义）",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "light",
    "theme",
    "paper",
    "red",
    "warm",
    "swiss"
   ],
   "when": "暖米白纸底 + 暖黑 + 单一结构红；平涂无投影，靠明度差与发丝线造层次;适用:暖色纸白（#EDEBE6）与暖黑（#111111），绝不用纯 #000 / 冷灰;强调红只做线/编号/单块几何形，覆盖率 ≤3%，落在预留空白里;一屏只有一个饱和色相，红不填正文;层次靠 1px 发丝线 + 明度差（bgDeep 托 surface），不用投影/渐变;大面积留白（≥35–45%），成块成区;不对称构图：一侧文字、一侧几何形",
   "not_for": "禁用:两种强调色同屏;红铺大底 / 红填正文;box-shadow / 渐变 / 纹理 / 噪点 / 玻璃拟态;纯黑 #000、纯白 #FFF、冷灰;圆角 > 6px（唯一例外是底部居中字幕 chip）;对称居中构图",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/swiss-classic/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/swiss-classic/",
   "zip": "downloads/swiss-classic.zip",
   "files": 12,
   "kb": 45,
   "swatches": [
    "#EDEBE6",
    "#DCDAD1",
    "#F7F5F0",
    "#E4E1D9",
    "#111111",
    "#9A9995",
    "#6B6862",
    "#4A4A4A"
   ]
  },
  {
   "id": "swiss-inverted",
   "title": "Swiss Inverted（瑞士反色 / 暗色）",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "dark",
    "theme",
    "paper",
    "ink",
    "red",
    "warm",
    "swiss"
   ],
   "when": "暖黑纸底 + 暖白墨 + 同一个结构红；纸↔墨互换，红保持不变 —— 同字体两种墨极性;适用:深色底用暖黑 #121212，绝不用纯 #000;纸暖白 #EDEBE6 当墨色（不是纯白 #FFF）;层级仍靠明度差（surface 比 bg 亮一档）+ 发丝线，不用投影;红保持 #D8232A（反色时略提亮到 #E5544B 做小字链接以满足对比）;深色底禁细体衬线（锯齿糊）",
   "not_for": "禁用:纯黑 #000 底、纯白 #FFF 字、冷灰;深色底上用 300 细字重;给深底加发光/霓虹/玻璃拟态;换第二个强调色",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/swiss-inverted/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/swiss-inverted/",
   "zip": "downloads/swiss-inverted.zip",
   "files": 12,
   "kb": 44,
   "swatches": [
    "#121212",
    "#0E0E0E",
    "#1A1A1A",
    "#222222",
    "#EDEBE6",
    "#5A5651",
    "#9A958D",
    "#6B6862"
   ]
  },
  {
   "id": "swiss-style",
   "title": "Swiss Style · 国际主义平面设计风格(版式与构件)",
   "category": "web-ui",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "swiss",
    "international-typographic-style",
    "grid",
    "12-column",
    "baseline",
    "layout",
    "ui",
    "isotype",
    "minimal"
   ],
   "when": "瑞士 / 国际主义风格的版式与构件:可推导的模块网格(12 栏 + 8pt 基线 + 复合网格)、直角平涂控件、五套版式骨架(海报/deck/跨页/报告封面/落地 hero)、Isotype 与 small multiples 图元;配色由主题包 swiss-classic / swiss-inverted 提供,本包只给版式与构件",
   "not_for": "配色包(配色请用主题包 swiss-classic / swiss-inverted);需要渐变 / 阴影 / 玻璃拟态、圆角胶囊、居中大标题、一屏多个强调色的营销落地页;攀比装饰插画填满空间的版式",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/swiss-style/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/swiss-style/",
   "zip": "downloads/swiss-style.zip",
   "files": 11,
   "kb": 82,
   "swatches": []
  },
  {
   "id": "three-fx",
   "title": "three-fx · 三维特效两件(体波测地线盘 / 粒子黑洞)",
   "category": "web-fx",
   "version": "1.0.0",
   "license": "MIT(本包自产代码)+ MIT(upstream/three.module.js,Three.js Authors)",
   "tags": [
    "webgl2",
    "threejs",
    "canvas2d",
    "particles",
    "raymarch",
    "3d",
    "dark",
    "hero"
   ],
   "when": "需要一块**三维**、有物理感的空间效果:体波测地线盘(three.js 实时渲染体积薄盘,可拖转环视、面板 19 个参数)或粒子黑洞(Canvas2D 纯粒子吸积盘 + 引力吸入,零 WebGL 依赖,8 组盘样式预设)。适合展厅墙、deck 封面、科幻/暗色主题的首屏,以及需要「可被人拖着看」的三维玩具。取用面:体波 = src/blackhole-waves.js + upstream/three.module.js(1.3MB);粒子 = src/blackhole-particles.js(零依赖,两个文件各自独立,互不 import)。性能口径:体波 renderer.setPixelRatio 封顶 1.75、按「画质」参数降到 1.2;粒子 DPR 封顶 2;两者都是 rAF 循环,页隐藏时由浏览器自动停帧,帧间隔 dt 封顶 0.05s 防回前台跳帧;粒子密度/测地线步数(steps)是主要开销旋钮。无障碍口径:两个效果**都没有**内置 prefers-reduced-motion 分支(见 docs/usage.md §无障碍 的补丁片段),动效强烈,必须在页面层自己加停帧开关。",
   "not_for": "禁用:① 移动端首屏且首帧 LCP 敏感(体波要下载 1.3MB 的 three.js 并编译着色器,粒子要预建数万粒子);② 需要 reduced-motion 自动静态帧的场景(本包不内置,必须自己打补丁,见 usage.md);③ 长文阅读页的背景(体波是强光焦点,会和正文抢视线);④ 无 WebGL2 又要用体波(粒子版是 Canvas2D 兜底首选,但两者不共享 API);⑤ 把 three.module.js 再拷第二份进项目(要么整包引用本包 upstream/,要么用你们自己的 three.js 版本,别在仓里出现第二份 1.3MB 副本)。",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/three-fx/preview/index.html",
   "heavy": true,
   "demos": [
    {
     "slug": "effects-blackhole-particles",
     "label": "Blackhole Particles · 粒子黑洞 · three-fx",
     "page": "p/three-fx/demo/effects-blackhole-particles/"
    },
    {
     "slug": "effects-blackhole-waves",
     "label": "Blackhole Waves · 体波测地线盘 · three-fx",
     "page": "p/three-fx/demo/effects-blackhole-waves/"
    }
   ],
   "page": "p/three-fx/",
   "zip": "downloads/three-fx.zip",
   "files": 16,
   "kb": 1381,
   "swatches": []
  },
  {
   "id": "tokyo-crime-dark",
   "title": "Tokyo Crime Dark 暖黑数据图",
   "category": "themes",
   "version": "1.0.0",
   "license": "MIT",
   "tags": [
    "dark",
    "theme",
    "warm",
    "map",
    "dataviz"
   ],
   "when": "暖黑底 #16130e 配暖色顺序带：深色底上把 ColorBrewer YlOrRd 整体提亮 15% 修对比（断点不动），深棕分隔线代替白描边；数据密集型地图/图表的深色方案。;适用:暖黑（#16130e 系）而非中性纯黑——配暖色带（YlOrRd/暖橙红）不发蓝、不发脏;顺序色带在深色底整体提亮 ~15%（逐通道 c+(255-c)*0.15），只深色生效；断点/档位/数据一字不改，保证跨主题同色=同危险度;深色底的地图分隔线用深棕 #3a3128，别用纯白——白线在暖黑上像网格噪点;无数据/无人口档单独给灰（#4a4238 / #55504a），别混进色带;顶栏按钮选中态反白改「强调色底 + 深字」（onAccent=bg），焦点环换成亮蓝 #7cc4ff 保证可见;localStorage 记住选择 + 默认浅色；切换不重建数据/不改断点，只重设色;深色独立调色，不把浅色 token 直接反相",
   "not_for": "禁用:别用中性纯黑 #000/#111 配暖色带（冷暖打架，浅黄档发灰）;别为深色重算分档断点（会破坏跨主题/跨时间可比性）;别把地图描边留在纯白（暖黑底上白线过曝刺眼）;别在深色下沿用浅色的无数据浅灰 #eeeeee（会变成高亮块）",
   "one_liner": "",
   "external": false,
   "canonical_home": null,
   "preview": "packs/tokyo-crime-dark/preview/index.html",
   "heavy": false,
   "demos": [],
   "page": "p/tokyo-crime-dark/",
   "zip": "downloads/tokyo-crime-dark.zip",
   "files": 12,
   "kb": 73,
   "swatches": [
    "#16130e",
    "#0f0d09",
    "#211c14",
    "#2c2417",
    "#3a3128",
    "#f5efe2",
    "#b8ab93",
    "#8a7f6b"
   ]
  },
  {
   "id": "video-motion",
   "title": "Video Motion · mv-studio(外部包 · 只索引)",
   "category": "video-motion",
   "version": "1.0.0",
   "license": "本仓只有索引条目、不含内容;内容许可随本家(外部工程为私有 / UNLICENSED,渲染框架另有其上游条款)",
   "tags": [
    "video-motion",
    "remotion",
    "index-only",
    "external",
    "music-video",
    "archetypes",
    "riso"
   ],
   "when": "要把一首歌排成一支「印刷质感」的 MV / 歌词影像时:该工程的 16 个 archetype 覆盖开场标题板、最响的标题行、单张照片推镜、剪贴簿拼贴、动态歌词排版、单据清单、印章、表盘、纸片倾泻、静态诗行(含竖排)、注解图、对白气泡、真实音频频谱、圆形遮罩过场、结尾署名板与兜底占位;riso 风格包给整套四色孔版印刷外观(四色专色 + 暖色纸 + 半调网点 + 故意套印错位 + 点阵字);beat / motion 库把节拍网格与摄影机关键帧接到镜头上。要网页动效或 CSS 片段时不要来这里。",
   "not_for": "当网页动效用(走 web-fx 类包)、当 CSS / JS 片段抄进网页(渲染模型不同:React + Remotion CLI,帧驱动而非 DOM)、或期望在本仓直接读到源码 —— 本仓只有索引条目,内容在外部工程里",
   "one_liner": "",
   "external": true,
   "canonical_home": null,
   "preview": null,
   "heavy": false,
   "demos": [],
   "page": "p/video-motion/",
   "zip": null,
   "files": 3,
   "kb": 8,
   "swatches": []
  }
 ]
}