glyph-studio

字间 · Glyph Studio

DSH 插件版

本项目是文字背景效果的独立编辑器，可调节文字、配色和动画参数。 用于 DeepSeek Harness 的版本见 逍遥游 · Glyph Water 插件。 插件仅在新建会话页显示背景，进入普通对话后自动关闭。 安装包与兼容版本见插件发布页。 需要安装 DSH 插件时，请使用插件仓库；本仓库用于调参与效果开发。

可配置的本地文字背景工具。使用 Canvas 2D，无需安装依赖。

打开

用浏览器直接打开 index.html。 也可在此目录运行 python -m http.server 8765 --bind 127.0.0.1， 然后打开 http://127.0.0.1:8765 。

内容

• 内置《逍遥游》、ASCII、英文、日文四种预设。
• 在“内容”页编辑文字，点击“应用文字”更新背景。
• “排列方式”支持按输入顺序或随机打乱；两种模式均循环铺满网格。
• 随机排列保留字符及重复次数，不逐帧跳字。“重新打乱”生成新排列。
• 排列方式与随机种子随配置保存，刷新和导入后可恢复。
• 支持混合语言和组合字符，空白不占格，标点保留。
• Unicode 字形使用 Intl.Segmenter 分段，不拆分组合附标或 emoji 序列。
• 自定义内容最多 4000 个 UTF-16 代码单元、512 种字形，以限制图集内存。
• 衬线、无衬线、等宽字体使用系统字体；可显示字符取决于系统字体覆盖范围。
• 内容以固定网格逐字循环铺排，不是段落排版。

配色

“配色”页提供雾白、墨夜、青瓷、暮紫、暖砂预设。 每个预设只更改配色，保留内容与动画参数。

• 背景支持三色线性或径向渐变，以 Oklab 插值。
• 颜色可通过原生调色板或 HEX 输入设置。
• 线性渐变可调角度，径向渐变可调中心位置。
• 中间色位置可调，基础字色和点缀色独立设置。
• 点缀不再限制为蓝色，可用于任何深浅主题。
• 字体和字色更改时重建缓存图集；背景渐变变化不重建图集。

面板与配置

面板分为“内容、配色、波纹、背景、点缀、渲染”六页。 滑块与数字框实时同步；问号按钮展开参数说明。 标题栏可拖拽，位置自动保存；“归位”回到右上角。 拖拽手柄支持方向键微调。减号收起，加号展开。 标题、分类和底部操作固定，仅参数区域滚动。 下拉框使用原生 appearance: base-select 定制弹层与选项。 保留浏览器的方向键选择、确认、取消及边缘避让行为。 当前内置 Chromium 已验证；不支持该 CSS 的浏览器会使用自身下拉外观。 鼠标点击只改变边框；键盘导航使用细内描边，高对比度模式保留焦点提示。

完整配置包含文字、字体、配色和动画参数，自动保存在本浏览器。 文件地址与 HTTP 地址使用独立存储空间。 “更多”中可导出或导入 JSON；输入无效时拒绝应用。 “恢复默认”重置全部配置。动效预设只调整动画与渲染参数。

动效

字形坐标固定，明暗遮罩迁移形成游雾感。 点击留白触发波纹；面板中的“试一次波纹”触发单次预览。 “暂停动效”冻结所有动画。页面隐藏时暂停。 系统开启减少动态效果时显示静态背景。

点缀每轮在显现区域选择不规则的邻字簇： 簇数 0～12、每簇字数 1～12，3 字及以上不共线。 背景面积不足时簇数减少，每个生成簇保持设定字数。 点缀停留时间 0.8～4 秒，实际时长受动画速度倍率影响。 点缀强度为 0 关闭染色；较深波前保留基础字色。

实现与验证

• content.js：文字、配色预设，字形分段与渐变生成。
• settings.js：默认配置、参数范围、导入校验。
• app.js：字形图集、固定网格绘制、动画调度。
• ambient.js：游雾透明度场。
• ripple.js：波前与余波衰减。
• tint.js：局部点缀簇。
• panel.js、appearance-panel.js：调参、内容和配色界面。
• panel-position.js：面板拖拽和边界约束。

当前网格为 18×20 CSS px，字号 14px。图集缓存 17 级混合字色。 每字每帧只绘制一次，避免叠画改变透明度。 FPS 是动画回调频率，绘制耗时仅为 JavaScript 提交时间，不含 GPU 完成时间。

运行：

node content.test.cjs
node ripple.test.cjs
node ambient.test.cjs
node tint.test.cjs

测试覆盖 Unicode 分段、文字与配色校验、配置往返、波纹、固定字形位置、 明暗连续变化、点缀数量与消退。浏览器交互另行检查。