Web Liquid Glass

快速开始

<script src="https://webliquidglass.pages.dev/dist-lib/liquid-glass.umd.js"></script>
<div id="card" style="width:200px;height:64px">Hello</div>
<script>
  // 1. 注入样式（一次即可）
  LiquidGlass.injectStyles()

  // 2. 把任意元素变成玻璃，元素内已有内容会保留并显示在玻璃之上
  LiquidGlass.apply(document.querySelector('#card'), {
    shape: () => LiquidGlass.RoundedRectangle(24)
  })
</script>

核心 API：`apply(element, options?)`

返回一个 GlassSurface 实例，可调用 .redraw() / .destroy() / 读取 .size。未传的字段使用下列默认值。

选项	类型	默认值	说明
`backdrop`	`Backdrop`	`RootBackdrop`	是否采样页面背景（`EmptyBackdrop` 为纯色玻璃）
`shape`	`Shape \| () => Shape`	`RoundedRectangle(16)`	玻璃轮廓；传函数可逐帧变化（如随滑块改圆角）
`effects`	`(scope) => void`	vibrancy + 微折射	收集 `backdrop-filter` 参数：`scope.vibrancy()` / `scope.blur(r)` / `scope.lens(h, a, depth, ca)`
`highlight`	`() => Highlight \| null`	`HighlightStyles.Default()`	高光描边
`shadow`	`() => Shadow \| null`	`DefaultShadow`	外阴影
`layerTransform`	`() => LayerTransform`	无	平移 / 缩放 / 旋转 / 透明度（见 PlayGround 手势）
`offset`	`() => {x,y}`	无	在 layerTransform 之外的纯位移
`onDrawSurface`	`(ctx, size) => void`	无	在 overlay 层绘制表面纹理
`innerShadow`	`() => InnerShadow \| null`	无	内阴影
`backdropZoom`	`() => BackdropZoom \| null`	无	背景放大采样
`captureOverlay`	`() => CaptureOverlay \| null`	无	把图片合成进被采样的背景
`interactiveHighlight`	`InteractiveHighlight \| null`	无	按压高光
`contentClass`	`string`	无	附加到内容层的 class（控制内容布局）

附带的工具

类别	导出
动画	`spring()` `tween()` `Animatable` `OffsetAnimatable` `MutatorMutex` `requestRedraw()` `subscribeTick()` `awaitFrame()`
颜色	`argb()` `rgba()` `withAlpha()` `lerpColor()` `toCss()` `Colors` `Palette`
数学	`dp()` `lerp()` `clamp()` `coerceIn()` `coerceAtLeast()` `coerceAtMost()` `sign()` `easeOut()` `easeIn()`
形状	`Capsule` `RoundedRectangle(r)` `Rectangle`
背景 / 效果	`BackdropEffectScope` `HighlightStyles` `DefaultShadow` `shadow()` `innerShadow()` `RootBackdrop` `EmptyBackdrop` `InteractiveHighlight` `isRefractionSupported()`
手势	`inspectTransformGestures(el, onGesture)` `inspectDragGestures(el, onDrag)`
几何	`identityTransform` `layerTransformToCss()` `applyLayerTransform()` `applyInverseLayerTransform()`
运行时	`FrameValue` `ElementMetrics` `attachTap()` `layoutEpoch`
资源	`FlightIconPath` `LoremIpsum`
样式	`injectStyles(target?)`

PlayGround 参数

控件演示（自带 DOM + apply）

Button

Toggle

Slider

Bottom Tabs

快速开始

核心 API：`apply(element, options?)`

附带的工具

控件演示（自带 DOM + apply）

Button

Toggle

Slider

Bottom Tabs

快速开始

核心 API：apply(element, options?)

附带的工具

核心 API：`apply(element, options?)`