@creativoma/ 液晶
一个现代的React组件库,以使用TailwindCSS和SVG滤波器的液霜玻璃效应为特色. 创建有高级视觉效果的优雅玻璃形态界面.
特征
- 液体被冰冻的玻璃效应,可定制的迁移图
- SSR 准备: 在 Next.js (App Routers and page routers), Remix 和任何服务器给定的应用程序中工作出框
- 包含全面类型定义的完整类型脚本支持
- 用于无缝型式的 TailwindCSS 集成
- 多态组件 API( 以 HTML 元素形式提交)
- 兼容Safari/iOS倒置支持的交叉浏览器
- 尊重
prefers-reduced-motion自动使用更轻的过滤器 disabled完全绕过低功率设备或长列表效果的道具- 可自定义的模糊、有色和动荡参数
- 0 依赖性( 仅此等依赖性)
- 无害环境管理和CJS格式以达到最大程度的兼容性
安装
npm install @creativoma/liquid-glass
yarn add @creativoma/liquid-glass
pnpm add @creativoma/liquid-glass
快速启动
import { LiquidGlass } from '@creativoma/liquid-glass'
function App() {
return (
<LiquidGlass backdropBlur={3} tintColor="rgba(255, 255, 255, 0.25)">
<div className="p-8">
<h1>Your content here</h1>
<p>The frosted glass effect is applied to this container</p>
</div>
</LiquidGlass>
)
}
API 参考
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
children | React.ReactNode | - 说吧 | 在容器内显示的内容 |
className | string | '' | 额外的 TailwindCSS CSS 类 |
contentClassName | string | - 说吧 | 内部内容包装的类( 铺放到这里) |
backdropBlur | number | 2 | 背景过滤器的模糊级别( px) |
tintColor | string | 'rgba(255, 255, 255, .2)' | 丁色覆盖颜色( rgba) |
displacementScale | number | 150 | 迁移图尺度(液体效应强度) |
turbulenceBaseFrequency | string | '0.008 0.008' | 起伏基准频率(控制噪音大小) |
turbulenceSeed | number | 1.5 | 起伏种子(用于不同噪音模式) |
as | ElementType | 'div' | 要渲染的 HTML 组件( div, 按钮, 区域等) |
style | CSSProperties | - 说吧 | 其他内线样式 |
disabled | boolean | false | 完全绕过玻璃效果,使平凡的孩子 |
安全部门改革/下一个.js
其组成部分是安全安保部门安全以及船舶与 "use client" 指令被烤入每个捆绑,所以它在Next.js中有效,没有任何包装:
// app/page.tsx — App Router, works directly in a Server Component tree
import { LiquidGlass } from '@creativoma/liquid-glass'
export default function Page() {
return (
<LiquidGlass backdropBlur={4} className="rounded-2xl p-8">
<h1>Server-rendered glass</h1>
</LiquidGlass>
)
}
- 没有
window, (中文(简体) ),document,或渲染过程中的布局效果——renderToString在平地节点(被回归测试所覆盖)工作. - 浏览器能力检测(Safari/iOS倒置,
prefers-reduced-motion)在挂载后运行,所以服务器和客户端标记总是匹配,没有水合警告. - 两者
import(ESM)和require(CJS)的出入口被发布,因此它也与页面路由器和更古老的工具链合作.
样式
转来转去 className (或 style内部背景和
锡层使用 border-radius: inherit因此,无论你设定的半径:
<LiquidGlass backdropBlur={8} className="rounded-3xl p-6">
<p className="text-white">The blur is clipped to the same radius</p>
</LiquidGlass>
布局类( 弹性/ 网格) 继续 contentClassName 相反: 儿童在
内部包装器(它使其在模糊和有色地层上方),所以 display: flex 打开
className {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}而你却不满足
<LiquidGlass
as="nav"
className="rounded-full px-6 py-3"
contentClassName="flex items-center gap-6"
>
<span>Logo</span>
<a href="#docs">Docs</a>
</LiquidGlass>
无障碍
LiquidGlass 自动检测 OS 级别 prefers-reduced-motion 设置(通过) useBrowserDetection),并在设定后倒回更轻的Safari/iOS滤波器,因为全流+放行管是GPU最密集的路径. 如果需要完全选择退出——为减速模式,低功率装置,或一长串玻璃卡片——通过 disabled 使没有过滤器或背景的普通儿童模糊:
<LiquidGlass disabled={isLowPowerMode}>
<div className="p-8">Falls back to plain content</div>
</LiquidGlass>
用法实例
有玻璃效果的纸牌
<LiquidGlass
backdropBlur={5}
tintColor="rgba(255, 255, 255, 0.3)"
className="max-w-md rounded-xl p-6"
>
<h2 className="mb-4 text-2xl font-bold text-white">Card Title</h2>
<p className="text-white/90">
Card content with elegant frosted glass effect.
</p>
</LiquidGlass>
有液体玻璃效果的按钮
<LiquidGlass
as="button"
backdropBlur={3}
tintColor="rgba(0, 0, 0, 0.2)"
className="rounded-full px-8 py-4 font-semibold text-white transition-transform hover:scale-110"
>
Click Me!
</LiquidGlass>
有玻璃形态的 Modal
<div className="fixed inset-0 flex items-center justify-center bg-black/50">
<LiquidGlass
backdropBlur={10}
tintColor="rgba(255, 255, 255, 0.15)"
className="max-w-lg rounded-2xl p-8 shadow-2xl"
>
<h3 className="mb-4 text-xl font-semibold text-white">
Modal with Liquid Glass
</h3>
<p className="mb-6 text-white/90">
This is an example of a modal with glassmorphism effect
</p>
<button className="rounded-lg bg-blue-500 px-4 py-2 text-white">
Close
</button>
</LiquidGlass>
</div>
带有玻璃效果的导航栏
<LiquidGlass
backdropBlur={4}
tintColor="rgba(255, 255, 255, 0.1)"
className="fixed top-0 right-0 left-0 z-50 border-b border-white/20"
>
<nav className="container mx-auto flex items-center justify-between px-6 py-4">
<div className="text-xl font-bold text-white">My App</div>
<div className="flex gap-6 text-white">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</nav>
</LiquidGlass>
高级液体效应定制
<LiquidGlass
backdropBlur={3}
tintColor="rgba(100, 200, 255, 0.2)"
displacementScale={200}
turbulenceBaseFrequency="0.01 0.01"
turbulenceSeed={5}
className="rounded-3xl p-12"
>
<p className="text-white">Custom liquid effect</p>
</LiquidGlass>
发展
# Clone the repository
git clone https://github.com/creativoma/liquid-glass.git
cd liquid-glass
# Install dependencies
pnpm install
# Development mode
pnpm run dev
# Linting and formatting
pnpm run lint
pnpm run format
# Build library
pnpm run build:lib
# Build demo
pnpm run build:demo
# Preview
pnpm run preview
# Publish (requires permissions)
npm publish
项目结构
liquid-glass/
├── src/
│ ├── components/
│ │ ├── LiquidGlass.tsx
│ │ └── types.ts
│ ├── hooks/
│ │ └── useBrowserDetection.ts
│ ├── demo/ # Demo/landing application
│ ├── main.tsx # Demo entry point
│ ├── index.ts # Library entry point
│ └── index.css
├── dist/ # Compiled library
├── dist-demo/ # Compiled demo site
├── public/ # Demo assets
├── README.md
├── package.json
├── tsconfig.json
├── vite.config.ts # Demo build config
├── vite.config.lib.ts # Library build config
└── tailwind.config.js
所需资源
- 反应 QQ 18.0.0
- 反应 DOM QQ 18.0.0
- TailwindCSS( 组件使用 Tailwind 类)
CI在每个推力上验证与回放18和回放19的相容性(参见: .github/workflows/ci.yml) (中文(简体) ).
技术
- 反应 - 构成部分图书馆
- 类型脚本 - 静态打字
- 维特 - 建立工具和捆绑器
- 尾风 CSS - 玻璃形态效应CSS框架
- SVG 过滤器 - 有弹性和异地安置的高级视觉效果
软件包格式
此软件包包含多种格式, 用于最大兼容性 :
- 无害环境管理 (单位:千美元)
dist/index.js- 用于现代应用 - 司法理事会 (单位:千美元)
dist/index.cjs- 为require()消费者(Next.js页路由器、杰斯特、平地节点) - 类型脚本 (单位:千美元)
dist/index.d.ts编号 :dist/index.d.cts- 两个入境点的定义类型
所有捆绑都与 "use client" react 服务器组件兼容性指令 .
捐款
欢迎捐款! 请:
- 叉子项目
- 为您的特性创建分支( N)
git checkout -b feature/amazing-feature(中文(简体) ) - 提交更改( E)
git commit -m 'Add amazing feature'(中文(简体) ) - 推向分行(
git push origin feature/amazing-feature(中文(简体) ) - 打开拉请求
许可证
麻省理工学院 马里亚诺·阿尔瓦雷斯
更改日志
见 变动情况 详细更改清单.