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支持
• 可拖拽交互功能