dsh-liquid-glass-input

[!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.

浅色模式效果	暗色模式效果
<br>浅色 Light	<br>暗色 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 pixels' saturation/brightness are boosted directly at the pointer via a radial mask inside the SVG filter (no white overlay; switchable in settings with strength and size sliders) plus an animation-speed slider
• 仅 Chromium 系浏览器可见折射
• Refraction is visible only in Chromium-based browsers

玻璃的层次 / Layers of the glass

常见的「液态玻璃」皮肤只是把背景糊掉一层：透过卡片什么都看不真切，边缘也没有任何变化。这里把玻璃拆成了五个层次，各有各的观感： Most so-called "liquid glass" skins simply blur whatever sits behind the card: everything behind turns into mush and the edge does nothing optical. Here the glass is split into five layers, each with its own look:

层 Layer	观感 What you see
放大 Magnify	贴近边缘的背景被微微放大，像隔着玻璃加厚的棱边看东西<br>The background right inside the rim is slightly magnified, as if seen through the thickened edge of real glass
折射 Refract	直线走到卡片边缘会弯一下、收一下，如同光线穿过有厚度的玻璃改了方向<br>Straight lines bend and pinch inward as they reach the card's edge, the way light changes direction passing through thick glass
高光 Specular	棱线上有一道随按压流动的亮边<br>A bright rim along the edges that shifts while you press
磨砂 Frost	底下垫着一层雾面，托住上面三层，浓淡可调<br>A frosted veil underneath that carries the other layers; its strength is adjustable
色散 Dispersion	折射时红、绿、蓝三个颜色通道的偏移量略有差别，棱边上留下一线细细的彩虹边（色差）<br>The three color channels refract by slightly different amounts, leaving a thin rainbow fringe along the edge (chromatic aberration)

普通磨砂是把背景「糊掉」，这里是想让背景「穿过」一块有厚度的玻璃。各层都能在设置里单独开关、调强弱、一键回到默认。 Ordinary frost just smears the background; this tries to let it pass through a piece of glass that has actual thickness. Every layer can be toggled, tuned or reset to default separately in the settings.

两种动画 / Two animations

按压 Press——按下卡片时它向外微微鼓起、阴影随之收拢，松手沿弹簧曲线荡两下回到原位；指针附近透过玻璃看到的景色会变浓、变亮，不想要可以在设置里关掉。 Press — pressing gently bulges the card outward while its shadow pulls in; on release it settles back with a springy wobble. The view through the glass grows richer and brighter around the pointer, which can be switched off in settings.

…