jkamkk/dsh-liquid-glass-input

dsh-liquid-glass-input

Awesome DSH Plugin
dsh plugin
npm
npm downloads
dsh
platform
License: Apache-2.0
i18n

dsh.so risk
dsh.so install

[!WARNING]
仅支持 Chromium 内核浏览器（Chrome / Edge 等）/ Chromium-based browsers only

折射效果依赖 SVG 位移滤镜：Firefox、Safari 下看不到折射与放大，其余功能不受影响。
Refraction relies on SVG displacement filters: in Firefox and Safari the glass renders without refraction or magnification — everything else works.

效果预览 / Preview

输入卡演示

动图为录屏压缩版，实际效果以实机为准。动图中的动态壁纸并非本插件效果，本插件只改变输入卡样式。
The clip is a compressed recording; the live effect looks better. The animated wallpaper in the clip is not part of this plugin — it only restyles the input card.

设置页演示

| 浅色模式效果 | 暗色模式效果 |
| --- | --- |
| 浅色效果浅色 Light | 暗色效果暗色 Dark |

设置页可分组调节各层强度与点击动画，滑杆本身也是玻璃质感。
The settings panel groups per-layer strength and press-animation controls; the sliders themselves use the same glass look.

给 DSH Web GUI 输入卡加 kube.io「Magnifying Glass」液态玻璃折射效果：
Adds a kube.io "Magnifying Glass" liquid-glass refraction effect to the input card of the DSH Web GUI:

- 官方位移图/高光图/放大图，端头等比缩放贴合四角，中段平铺补线；Canvas 预合成，滤镜内约 11 原语
- Official displacement / specular / magnifying maps, corners scaled to fit, edges tiled; maps are pre-composited on canvas, about eleven filter primitives in total
- 按压动画：原版 9 弹簧系统逐参数复刻（rAF 积分，transform/阴影/滤镜缩放全耦合）
- Press animation faithfully rebuilt from the original nine-spring system (rAF-integrated, with transform, shadow and filter scale all coupled)
- 点击像素增艳：按住时指针附近的背景会变浓、变亮（有范围，不是盖一层白；设置里可关），动画速度可调
- Click pixel boost: while pressing, the backdrop near the pointer grows richer and brighter (a bounded area, not a white overlay; switchable in settings), with an animation-speed slider
- 仅 Chromium 系浏览器可见折射
- 折射仅在基于 Chromium 的浏览器中可见

玻璃的层次 / 玻璃的层次

常见的「液态玻璃」皮肤只是把背景糊掉一层：透过卡片什么都看不真切，边缘也没有任何变化。这里把玻璃拆成了五个层次，各有各的观感：
许多所谓的「液态玻璃」皮肤只是把卡片背后的东西模糊一层：背后的一切都变成一团糊，边缘也没有任何光学效果。这里把玻璃拆成了五个层次，每一层都有自己的观感：

| 层 层 | 观感 你看到的效果 |
| --- | --- |
| 放大 放大 | 贴近边缘的背景被微微放大，像隔着玻璃加厚的棱边看东西紧贴边缘内侧的背景会被微微放大，就像透过真实玻璃加厚的边缘看东西一样 |
| 折射 折射 | 直线走到卡片边缘会弯一下、收一下，如同光线穿过有厚度的玻璃改了方向直线到达卡片边缘时会弯曲并向内收拢，就像光线穿过厚玻璃时改变方向一样 |
| 高光 高光 | 棱线上有一道随按压流动的亮边边缘上有一道明亮的亮边，会在你按压时流动变化 |
| 磨砂 磨砂 | 底下垫着一层雾面，托住上面三层，浓淡可调下方有一层磨砂薄雾，承载着其他几层；其强度可调 |
| 色散 色散 | 折射时红、绿、蓝三个颜色通道的偏移量略有差别，棱边上留下一线细细的彩虹边（色差）三个颜色通道的折射量略有不同，在边缘留下一道细细的彩虹边（色差） |

普通磨砂是把背景「糊掉」，这里是想让背景「穿过」一块有厚度的玻璃。各层都能在设置里单独开关、调强弱。
普通的磨砂只是把背景「抹糊」；这里则试图让它穿过一块有实际厚度的玻璃。每一层都可以在设置中单独开关和调节。

两种动画 / 两种动画

按压 Press——按下卡片时它向外微微鼓起、阴影随之收拢，松手沿弹簧曲线荡两下回到原位；指针附近透过玻璃看到的景色会变浓、变亮，不想要可以在设置里关掉。
按压 Press——按下时卡片会向外微微鼓起，阴影随之收拢；松开后它会带着弹簧般的摆动回到原位。透过玻璃看到的指针附近景象会变得更浓郁、更明亮，这可以在设置中关闭。

按住拖动 Drag-stretch——按住不放再移动，玻璃会先跟着手走一小段，像被拽着的软胶体；同时顺着移动方向被拉长、垂直方向被压扁，速度越快形变越明显。松手后位移和形状一起弹回原状。「跟着手走」的距离和「拉伸」的幅度各有滑杆可调。
按住拖动 Drag-stretch——按住并移动：玻璃会像被拉动的软胶一样跟着指针走一小段，同时沿运动方向拉伸、侧向压扁；移动越快，形变越明显。松开后，位置和形状会一起弹回原位。跟随距离和拉伸幅度各有自己的滑杆。

性能与开销 / 性能

这套效果很吃性能，电脑弱一点就会卡。觉得卡，先关磨砂，再关放大和折射。
这个效果很吃性能。在较弱的机器上会卡顿。如果卡顿，先关掉磨砂，再关掉放大和折射。

所以只做输入卡，不做整套主题——侧栏、消息列表那些大地方一铺，只会更卡。
所以这里只做输入卡片，而不是整套主题：把同样的玻璃铺到侧栏或消息列表上，只会更卡。

安装 / 安装

dsh plugin --profile web add dsh-liquid-glass-input

GitHub：

dsh plugin --profile web add github:jkamkk/dsh-liquid-glass-input

本地开发调试可从目录安装：
本地开发时也可以从目录安装：

dsh plugin --profile web add

安装后重启 DSH Web GUI 生效。设置界面按浏览器语言自动切换中文/英文；所有设置保存在 DSH 主机目录（~/.dsh）下，换浏览器无需重调。
安装后重启 DSH Web GUI 即可生效。设置界面会根据浏览器语言自动切换中文/英文；所有设置都保存在 DSH 主机目录（~/.dsh）下，更换浏览器后无需重新调整。
之后重启 DSH Web GUI。设置面板会根据浏览器语言在中英文之间自动切换；设置存储在 DSH 主机上（~/.dsh），因此切换浏览器后依然保留。

1.32.9

布局不再依赖 DSH 的 CSS Module 哈希。滚动层/底板/镜像使用官方 data-* 属性；加号、发送、工具行等在挂载时打上 data-liq-part。

1.32.8

README 顶部加上 shields.io 与 awesome 徽标。

1.32.7

README 加上 dsh.so 的风险 / 安装徽标。

1.32.6

npm 包纳入 assets/，预览图在 npm 页面能显示。

1.32.5

新安装的默认观感对齐作者当前这套：高度 70 固定、上下渐变 36px、下移偏置 0、左右限位 36、工具行下移 8、点击范围 200%、细腻度 100。性能监视默认仍关。

1.32.4

矮卡不再切掉输入文字。权限/模型那一行浮在卡片上，加号和发送仍在两侧中线。长文伸进工具行时上下渐变淡出（范围可调），换行时当前行钉在卡片中线（固定和自适应都是）。工具行可上下微调；侧边按钮那一组的滑杆关掉开关也能拖。

位移图来源：https://kube.io/blog/liquid-glass-css-svg ，版权仍归原作者，不在本插件的 Apache-2.0 范围内。详见 NOTICE。