@chronoslu/advanced-liquid-glass

Advanced Liquid Glass for React

一个高度可定制的React液体玻璃效果组件，支持多种预设和高级视觉效果，如扭曲、颗粒和色散。

安装

npm install @chronoslu/advanced-liquid-glass

快速开始（使用预设）

使用组件最简单的方法是选择一个内置预设。

import AdvancedLiquidGlass from '@chronoslu/advanced-liquid-glass';

function MyComponent() {
  return (
    <AdvancedLiquidGlass preset="vintage-lens" draggable={true}>
      <div style={{padding: '20px', color: 'white'}}>
        您的内容
      </div>
    </AdvancedLiquidGlass>
  );
}

可用预设

我们的预设经过精心设计，提供多种开箱即用的美学风格。

预设	描述
default	平衡干净的起始点，具有微妙的效果。
classic	原始可拖拽模板，具有清晰的交互感。
strong-effect	高对比度和饱和度，模仿早期JS演示的效果。
deep-polarizer	模拟偏振滤镜，创造深邃色彩和深色调。
gentle-frost	柔和、重度模糊的玻璃，非常适合模态框和覆盖层。
physical-grain	厚重的磨砂玻璃，具有有形的凹凸纹理。
vintage-lens	模拟老式相机镜头的色散和暖色调。
film-grain	添加微妙的胶片质感，带来一丝怀旧感。

高级定制（属性）

为了完全控制，您可以覆盖任何预设参数或通过传递单独的属性从头构建自己的效果。

核心属性

属性	类型	默认值	描述
preset	string	'default'	用作基础的预设名称。
width	number	300	组件宽度（像素）。
height	number	200	组件高度（像素）。
borderRadius	number	30	组件边框圆角（像素）。
draggable	boolean	false	如果为 true，组件变为可拖拽。

视觉效果属性

属性	类型	默认值（来自预设）	描述
blur	number	0.25	高斯模糊强度。更高的值创造更磨砂的外观。
contrast	number	120	对比度百分比。100 为正常。值 > 100 增加对比度。
brightness	number	105	亮度百分比。100 为正常。
saturate	number	110	饱和度百分比。100 为正常。
tintColor	string	'#ffffff'	应用于玻璃的有色色调的十六进制颜色字符串。
tintOpacity	number	0	tintColor 层的不透明度（从 0 到 1）。
distortion	number	1.0	交互式扭曲效果的整体强度。
distortionRadius	number	0.15	鼠标交互区域的半径，作为组件大小的百分比（0-1）。
distortionFalloff	number	0.8	控制扭曲效果在半径边缘的衰减锐度。
grain	number	0	添加简单的均匀噪声层。适用于基本磨砂效果（0-1）。
organicGrain	number	0	添加高级的基于物理的颗粒，具有模拟光照。更真实但资源密集（0-1）。
chromaticAberration	number	0	边缘颜色通道分离的强度，以像素为单位测量。

使用示例

基本用法

import AdvancedLiquidGlass from '@chronoslu/advanced-liquid-glass';

function App() {
  return (
    <AdvancedLiquidGlass preset="gentle-frost" draggable={true}>
      <div style={{ padding: '20px', color: 'black' }}>
        <h3>柔和磨砂</h3>
        <p>这是一个使用柔和磨砂预设的示例。</p>
      </div>
    </AdvancedLiquidGlass>
  );
}

自定义属性

import AdvancedLiquidGlass from '@chronoslu/advanced-liquid-glass';

function App() {
  return (
    <AdvancedLiquidGlass
      preset="default"
      width={400}
      height={250}
      borderRadius={20}
      draggable={true}
      blur={0.5}
      contrast={150}
      brightness={110}
      saturate={120}
      tintColor="#ff6b6b"
      tintOpacity={0.1}
      distortion={1.5}
      organicGrain={0.3}
    >
      <div style={{ padding: '30px', color: 'white' }}>
        <h2>自定义玻璃效果</h2>
        <p>这个示例展示了如何自定义各种属性。</p>
      </div>
    </AdvancedLiquidGlass>
  );
}

多个预设展示

import AdvancedLiquidGlass from '@chronoslu/advanced-liquid-glass';

function App() {
  const presets = ['default', 'classic', 'strong-effect', 'vintage-lens'];
  
  return (
    <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
      {presets.map(preset => (
        <AdvancedLiquidGlass key={preset} preset={preset} draggable={true}>
          <div style={{ padding: '20px', color: 'white' }}>
            <strong>{preset}</strong>
          </div>
        </AdvancedLiquidGlass>
      ))}
    </div>
  );
}

技术特性

• ✨ 多种预设：8种精心设计的视觉风格
• 🎨 高度可定制：支持细粒度的视觉参数调整
• 🖱️ 交互式扭曲：鼠标悬停时的动态扭曲效果
• 📱 响应式设计：适配各种屏幕尺寸
• 🎭 高级效果：支持颗粒、色散、色调等特效
• 🚀 性能优化：使用CSS滤镜和变换实现高效渲染
• 💪 TypeScript支持：完整的类型定义

浏览器兼容性

• Chrome 53+
• Firefox 35+
• Safari 9.1+
• Edge 12+

许可证

MIT

作者

chronos

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

• 初始版本发布
• 支持8种预设效果
• 完整的TypeScript支持
• 可拖拽交互功能