Как реализовать Liquid Glass UI от Apple в React: полное руководство для разработчиков

npm install liquid-glass-react
# или
yarn add liquid-glass-react

import React from 'react';
import { LiquidGlass } from 'liquid-glass-react';
import './App.css';
 
function App() {
  return (
    <div className="app">
      <LiquidGlass
        displacementScale={2.0}
        blurAmount={1.5}
        elasticity={0.7}
        className="liquid-container"
      >
        <div className="content">
          <h1>Добро пожаловать в Liquid Glass</h1>
          <p>Испытайте революционный дизайн интерфейса Apple</p>
        </div>
      </LiquidGlass>
    </div>
  );
}

.liquid-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}
 
.content {
  padding: 40px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

<LiquidGlass displacementScale={2.5}>
  {/* Более высокие значения создают более драматичное искривление */}
</LiquidGlass>

<LiquidGlass blurAmount={1.8}>
  {/* Имитирует эффект глубины резкости macOS Tahoe */}
</LiquidGlass>

<LiquidGlass elasticity={0.9}>
  {/* Более высокие значения кажутся более жидкими */}
</LiquidGlass>

<LiquidGlass cornerRadius={20}>
  {/* Соответствует закругленным элементам интерфейса macOS Tahoe */}
</LiquidGlass>

<LiquidGlass aberrationIntensity={0.4}>
  {/* Создает тонкое разделение цветов для премиального ощущения */}
</LiquidGlass>

import React, { useState } from 'react';
import { LiquidGlass } from 'liquid-glass-react';
 
const MenuBar = () => {
  const [isActive, setIsActive] = useState(false);
 
  return (
    <LiquidGlass
      displacementScale={1.2}
      blurAmount={2.0}
      elasticity={0.8}
      className={`menu-bar ${isActive ? 'active' : ''}`}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        height: '32px',
        background: 'rgba(255, 255, 255, 0.05)',
        backdropFilter: 'blur(20px) saturate(180%)',
        borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
        zIndex: 1000
      }}
    >
      <div className="menu-items">
        <span className="menu-item">Файл</span>
        <span className="menu-item">Правка</span>
        <span className="menu-item">Вид</span>
        <span className="menu-item">Окно</span>
        <span className="menu-item">Справка</span>
      </div>
    </LiquidGlass>
  );
};

const CompatibilityCard = ({ macModel, compatibility }) => {
  const [isHovered, setIsHovered] = useState(false);
 
  return (
    <LiquidGlass
      displacementScale={isHovered ? 3.0 : 2.0}
      blurAmount={isHovered ? 2.0 : 1.5}
      elasticity={0.85}
      className="compatibility-card"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        padding: '24px',
        margin: '16px',
        background: compatibility.isSupported 
          ? 'rgba(52, 199, 89, 0.1)' 
          : 'rgba(255, 69, 58, 0.1)',
        border: '1px solid rgba(255, 255, 255, 0.15)',
        borderRadius: '16px',
        transition: 'all 0.3s ease'
      }}
    >
      <h3>{macModel}</h3>
      <p>{compatibility.features.join(', ')}</p>
      <div className="support-indicator">
        {compatibility.isSupported ? '✅ Полная поддержка' : '⚠️ Ограниченная поддержка'}
      </div>
    </LiquidGlass>
  );
};

.liquid-glass-container {
  transform: translateZ(0);
  will-change: transform, opacity;
  contain: layout style paint;
}

const isMobile = window.innerWidth < 768;
 
<LiquidGlass
  displacementScale={isMobile ? 1.0 : 2.5}
  blurAmount={isMobile ? 0.8 : 1.5}
  elasticity={isMobile ? 0.5 : 0.8}
>

import { useEffect, useRef } from 'react';
 
const OptimizedLiquidGlass = ({ children, ...props }) => {
  const containerRef = useRef(null);
 
  useEffect(() => {
    const container = containerRef.current;
    
    return () => {
      // Очистка контекстов WebGL и слушателей событий
      if (container) {
        const canvas = container.querySelector('canvas');
        if (canvas) {
          const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
          if (gl) {
            gl.getExtension('WEBGL_lose_context')?.loseContext();
          }
        }
      }
    };
  }, []);
 
  return (
    <div ref={containerRef}>
      <LiquidGlass {...props}>{children}</LiquidGlass>
    </div>
  );
};

const hasWebGLSupport = () => {
  try {
    const canvas = document.createElement('canvas');
    return !!(
      window.WebGLRenderingContext &&
      (canvas.getContext('webgl') || canvas.getContext('webgl2'))
    );
  } catch (e) {
    return false;
  }
};
 
const hasBackdropFilterSupport = () => {
  return CSS.supports('backdrop-filter', 'blur(1px)');
};
 
const ConditionalLiquidGlass = ({ children, fallbackComponent, ...props }) => {
  const supportsLiquidGlass = hasWebGLSupport() && hasBackdropFilterSupport();
 
  if (!supportsLiquidGlass) {
    return fallbackComponent || (
      <div className="fallback-glass">{children}</div>
    );
  }
 
  return <LiquidGlass {...props}>{children}</LiquidGlass>;
};

.fallback-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}
 
/* Исправления для Safari */
@supports (-webkit-backdrop-filter: blur(10px)) {
  .fallback-glass {
    -webkit-backdrop-filter: blur(10px);
  }
}

// Библиотека стеклянных компонентов
const GlassButton = ({ variant = 'primary', children, ...props }) => {
  const variants = {
    primary: {
      displacementScale: 1.5,
      blurAmount: 1.0,
      background: 'rgba(0, 122, 255, 0.2)'
    },
    secondary: {
      displacementScale: 1.2,
      blurAmount: 0.8,
      background: 'rgba(255, 255, 255, 0.1)'
    },
    danger: {
      displacementScale: 1.8,
      blurAmount: 1.2,
      background: 'rgba(255, 69, 58, 0.2)'
    }
  };
 
  return (
    <LiquidGlass
      {...variants[variant]}
      elasticity={0.7}
      cornerRadius={8}
      className={`glass-button glass-button--${variant}`}
      {...props}
    >
      <button className="button-content">{children}</button>
    </LiquidGlass>
  );
};
 
const GlassCard = ({ children, ...props }) => (
  <LiquidGlass
    displacementScale={2.0}
    blurAmount={1.5}
    elasticity={0.8}
    cornerRadius={16}
    className="glass-card"
    {...props}
  >
    <div className="card-content">{children}</div>
  </LiquidGlass>
);

import { useSpring, animated } from '@react-spring/web';
 
const AnimatedLiquidGlass = ({ isActive, children }) => {
  const springProps = useSpring({
    displacementScale: isActive ? 3.0 : 2.0,
    blurAmount: isActive ? 2.0 : 1.5,
    elasticity: isActive ? 0.9 : 0.7,
    config: { tension: 200, friction: 25 }
  });
 
  return (
    <animated.div style={springProps}>
      <LiquidGlass
        displacementScale={springProps.displacementScale}
        blurAmount={springProps.blurAmount}
        elasticity={springProps.elasticity}
      >
        {children}
      </LiquidGlass>
    </animated.div>
  );
};

const customShaderConfig = {
  fragmentShader: `
    precision mediump float;
    
    uniform sampler2D u_texture;
    uniform float u_time;
    uniform vec2 u_resolution;
    
    varying vec2 v_texCoord;
    
    void main() {
      vec2 uv = v_texCoord;
      
      // Добавление искажения на основе времени
      uv.x += sin(uv.y * 10.0 + u_time) * 0.01;
      uv.y += sin(uv.x * 10.0 + u_time * 0.5) * 0.01;
      
      vec4 color = texture2D(u_texture, uv);
      
      // Применение стеклоподобного преломления
      float aberration = 0.005;
      color.r = texture2D(u_texture, uv + vec2(aberration, 0.0)).r;
      color.b = texture2D(u_texture, uv - vec2(aberration, 0.0)).b;
      
      gl_FragColor = color;
    }
  `
};
 
<LiquidGlass
  customShader={customShaderConfig}
  displacementScale={2.5}
>
  {children}
</LiquidGlass>

const AccessibleLiquidGlass = ({ children, ...props }) => {
  const prefersReducedMotion = window.matchMedia(
    '(prefers-reduced-motion: reduce)'
  ).matches;
 
  const accessibleProps = prefersReducedMotion
    ? {
        displacementScale: 0.5,
        elasticity: 0.3,
        // Уменьшенное движение для чувствительных пользователей
      }
    : props;
 
  return (
    <LiquidGlass {...accessibleProps}>
      {children}
    </LiquidGlass>
  );
};

<LiquidGlass
  aria-label="Интерактивный элемент стеклянного интерфейса"
  role="presentation"
  {...props}
>
  <div aria-live="polite" className="sr-only">
    Контент обновлен с эффектом жидкого стекла
  </div>
  {children}
</LiquidGlass>

const PerformanceMonitor = ({ children }) => {
  useEffect(() => {
    let frameCount = 0;
    let lastTime = performance.now();
 
    const measureFPS = () => {
      frameCount++;
      const currentTime = performance.now();
      
      if (currentTime - lastTime >= 1000) {
        console.log(`Liquid Glass FPS: ${frameCount}`);
        frameCount = 0;
        lastTime = currentTime;
      }
      
      requestAnimationFrame(measureFPS);
    };
 
    measureFPS();
  }, []);
 
  return children;
};

class LiquidGlassErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
 
  componentDidCatch(error, errorInfo) {
    console.error('Ошибка Liquid Glass:', error, errorInfo);
  }
 
  render() {
    if (this.state.hasError) {
      return (
        <div className="fallback-glass">
          {this.props.fallback || this.props.children}
        </div>
      );
    }
 
    return this.props.children;
  }
}

// webpack.config.js оптимизация для Liquid Glass
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        liquidGlass: {
          test: /[\\/]node_modules[\\/]liquid-glass-react[\\/]/,
          name: 'liquid-glass',
          priority: 10,
          reuseExistingChunk: true
        }
      }
    }
  }
};

// Ленивая загрузка для производительности
const LiquidGlass = React.lazy(() => 
  import('liquid-glass-react').then(module => ({
    default: module.LiquidGlass
  }))
);
 
const LazyLiquidGlass = ({ children, ...props }) => (
  <Suspense fallback={<div className="fallback-glass">{children}</div>}>
    <LiquidGlass {...props}>{children}</LiquidGlass>
  </Suspense>
);

// Интерфейс TypeScript для интеграции системы дизайна
interface LiquidGlassTheme {
  colors: {
    glassTint: string;
    borderColor: string;
    backgroundGradient: string[];
  };
  effects: {
    displacementScale: number;
    blurAmount: number;
    elasticity: number;
  };
  accessibility: {
    reducedMotion: boolean;
    highContrast: boolean;
  };
}
 
const ThemedLiquidGlass: React.FC<{
  theme: LiquidGlassTheme;
  children: React.ReactNode;
}> = ({ theme, children }) => {
  const effectProps = theme.accessibility.reducedMotion
    ? { ...theme.effects, displacementScale: 0.5 }
    : theme.effects;
 
  return (
    <LiquidGlass
      {...effectProps}
      style={{
        background: `linear-gradient(${theme.colors.backgroundGradient.join(', ')})`,
        border: `1px solid ${theme.colors.borderColor}`
      }}
    >
      {children}
    </LiquidGlass>
  );
};