Glassmorphism
按物理建模的玻璃:磨砂边缘上的 Snell 折射,一个太阳,以及一个求解器,它测量每块玻璃后面的背景并设定其墨色,所以文字在任何背景上都保持 4.5:1
适用于: 媒体、消费、金融科技,以及所有玻璃 UI 在明亮照片上失效的人
页面
Glass 组件, Web一张实时工作台,改变房间、太阳或磨砂程度,每块玻璃都会重新求解,H1 会报告求解器刚刚测得的结果
Tidewater 仪表盘, Web一扇港口塔台的窗:玻璃框住景色的边缘,黄昏随滑块落下,每块玻璃的墨色都随天空变化,泊位计划重新计算并写出 H1
Sidecut 仪表盘, Web一张在雨窗后的唱片公司办公桌:每次发行都会重新照亮窗外的街道,拖动分成比例,每个人的收入就重新计算
Tintline 落地页, Web阳光下墙面上的一块真实玻璃:滚动就是一天的流转,太阳决定阴影、边缘和色调,H1 就是这栋楼的决定
Verso 落地页, AI一枚玻璃放大镜悬在一封真实的德语信上:边缘会弯折实时文字,镜片下的句子是你的语言,H1 就是你放大镜下正对着的内容
Slackwater 移动应用, 移动端一款漂在开阔水面上的野泳应用:手机是与页面同一片海之上的玻璃,你拖动的潮汐曲线决定太阳、水面和 H1
包含内容
- 6 个页面,每个一个文件,没有 props
- 8 个专为此套件编写的组件
- 4 个引擎,支撑标志性的交互行为
- 字体及其 OFL 许可证:Gl Sans, Gl Serif
- README,含 Next.js 和 Tailwind v4 的安装步骤及许可条款
如何购买
所有套件都包含在 goodui Pro 中:$99 一次付清,终身更新。Team 版 $249,最多 10 位开发者。
结账尚未开放。加入名单,我们会发一次早鸟链接给你。
有许可证密钥的话,在终端里运行:
curl -H "Authorization: Bearer $GOODUI_LICENSE_KEY" -o goodui-glass.zip https://goodui.dev/kits/glass.zip