Liquid Glass UI

分享

主要功能

Liquid Glass UI是一个受Apple visionOS设计系统启发的React组件库,提供以下核心功能:

  • 液态玻璃效果组件:包括卡片、按钮、导航、输入框、模态框等多种UI组件,具有半透明材质和动态背景模糊效果
  • 实时渲染:使用GPU加速的背景滤镜和动态颜色采样,创建能够实时适应周围内容的真实玻璃效果
  • 镜面高光:交互式光线反射响应用户交互,创建像真实玻璃折射光线一样移动的动态高光
  • 流体运动系统:每个动画都使用Apple特有的缓动曲线和基于物理的运动,创建自然、有生命力的交互

技术特点

  • 性能优化:所有效果都在GPU上运行,实现60fps动画和电池效率
  • 零JavaScript运行时:所有效果通过CSS实现,无JS运行时开销
  • 完全响应式:移动优先的设计方法,确保在所有屏幕尺寸和设备上完美显示
  • 可访问性优先:支持屏幕阅读器、键盘导航和减少动画偏好,符合WCAG 2.1 AA标准
  • TypeScript支持:完整的TypeScript定义和React 18+兼容性

安装使用

bash

通过npm安装

npm install liquid-glass-ui

或复制组件

git clone liquid-glass-ui

使用示例: jsx import from 'liquid-glass-ui'

Your content

浏览器支持

支持现代浏览器:Chrome 76+、Firefox 72+、Safari 14+、iOS Safari 14+、Chrome for Android 76+。在旧浏览器上优雅降级。

定制选项

提供广泛的定制选项,包括CSS自定义属性、组件props和修饰符类。可调整模糊强度、透明度级别、动画时间和配色方案。

目标用户

  • React/Next.js开发者
  • UI/UX设计师
  • 追求Apple风格设计的前端开发团队
  • 需要高性能玻璃态效果的项目

核心优势

  • 内置玻璃效果,无需手动CSS
  • GPU加速的实时渲染
  • 受Apple设计系统启发的高质量组件
  • 最小的CSS包体积
  • 完整的TypeScript支持

  • 访问量 : <5K
  • 收录时间:2025-09-16
  • 计价模式: Free

#设计助手 #开发者工具 Free Website Open Source

评论

登录 登录后可进行评论

相似AI工具推荐

GPT Calculator

访问量 10.23K 计价模式

Razzle

访问量 0 计价模式

Cursor

访问量 302.66K 计价模式 Freemium