import { assembleBrowser, writeArtifact } from './browser-build.mjs'; const root = new URL('../', import.meta.url); const source = (await assembleBrowser('preview/preview-client.js')).replace(/<\/script/gi, '<\\/script'); const html = `文字鲸鱼 · 彩色字格与 ASCII

彩色字格与 ASCII 鲸鱼

字格底色与字符来源可以自由搭配。下面四张使用同一只蓝鲸、同一鲸体大小和浓度,仅切换渲染选项;拖动下方的“鲸鱼大小”滑杆,四张会一起变大变小。

纯字符 · 自定义文字

保留原来的轻盈观感,只绘制你填写的字符。

彩色字格 · 自定义文字

文字仍是原文,格子底色显示背部、侧身和鳍尾的深浅。

纯字符 · ASCII

按明暗选择疏密不同的符号,使用等宽字体。

彩色字格 · ASCII

先绘深浅底格,再叠加 ASCII 字符,接近参考截图的构成。

巡游与内容框毛玻璃预览

在「文字边缘效果」中选择关闭、微光、柔和模糊或毛玻璃。微光让鲸鱼隐去,模糊与毛玻璃保留文字背后的连续鲸影,关闭内容框毛玻璃也能使用。开启「内容框毛玻璃」后,消息卡片、输入框和右侧栏显示模糊鲸影,右侧栏的鲸影更淡。可在右侧输入备注、点击按钮检查交互。数量、大小和速度会更新同一群鲸鱼。「鱼群避让输入框」让鲸鱼绕开输入框,与内容框毛玻璃互斥。「海上落雨」与雨量控制细雨到密雨,雨向随海面风纹偏转;雨落海后的涟漪独立于游动尾流。「海面方格」给整片海面铺上与鲸体同源的浅色格线,浓度随背景浓度变化。实际插件保存设置后生效。

鲸鱼从文字旁经过

这段正文没有卡片背景。切换文字边缘效果,可以比较微光的隐去效果,以及模糊、毛玻璃保留的连续鲸影。关闭内容框毛玻璃也能比较。

五种鲸类

蓝鲸、座头鲸、抹香鲸、长须鲸、弓头鲸各有自己的头型、胸鳍与尾叶;拖动数量与大小可以对比它们在同一片海里的比例。

鱼群避让输入框

另一选项:鲸鱼把输入框当成障碍绕开,不再从框内穿过。与内容框毛玻璃二选一。

给鲸鱼发一条消息,按 Enter 发送预览用假输入框:座位 [data-composer-seat] 与卡片 [data-composer-card] 的结构和实际 DSH 一致

使用插件的正式渲染器:控件变化只调用 update(),不重建画布;暂停冻结最后一帧,恢复后从原地继续。系统减少动态效果时显示静态姿态,页面在后台时暂停。

鲸鱼大小只改体长:0.55 约半身,1.00 默认,1.55 最大。内容框毛玻璃与鱼群避让二选一:开一个会自动关掉另一个。独立预览不替代实际 DSH 窗口的最终观感。

原版字格研究见 ASCII-RENDER-NOTES.md,鲸类图片依据见 WHALE-REFERENCES.md。

`; const check = process.argv.includes('--check'); await writeArtifact(new URL('preview/whale-preview.html', root), html, { check }); console.log(check ? 'Preview artifact matches its sources.' : 'Built four-style comparison and a live preview that updates one whale layer.');