5 творческих способов использования Liquid Glass в вашем следующем React проекте

Эффекты Liquid Glass революционизировали современный UI дизайн, привнеся элегантную эстетику macOS Tahoe в веб-приложения. Вот пять практических и творческих способов интеграции liquid-glass-react в ваши проекты, с полными примерами кода и лучшими практиками.

1. Интерактивные навигационные заголовки

Трансформируйте ваш навигационный заголовок с динамическими эффектами Liquid Glass, которые реагируют на взаимодействия пользователя и позицию прокрутки.

Реализация

'use client';

import { ConditionalLiquidGlass } from '@/components/shared/conditional-liquid-glass';
import { useState, useEffect } from 'react';

const LiquidGlassNavigation = () => {
  const [scrollY, setScrollY] = useState(0);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Динамические параметры на основе позиции прокрутки
  const dynamicParams = {
    displacementScale: Math.min(3.0 + scrollY * 0.01, 5.0),
    blurAmount: Math.min(1.0 + scrollY * 0.005, 2.5),
    elasticity: 0.8 + (scrollY * 0.001),
    aberrationIntensity: Math.min(scrollY * 0.002, 0.5)
  };

  return (
    <ConditionalLiquidGlass
      {...dynamicParams}
      cornerRadius={0}
      className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
      style={{
        background: `rgba(255, 255, 255, ${Math.min(scrollY * 0.001, 0.1)})`,
        backdropFilter: `blur(${Math.min(scrollY * 0.1, 20)}px) saturate(180%)`,
        borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
      }}
    >
      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center space-x-8">
            <div className="text-2xl font-bold">Логотип</div>
            <div className="hidden md:flex space-x-6">
              {['Главная', 'О нас', 'Услуги', 'Контакты'].map((item) => (
                <a
                  key={item}
                  href={`#${item.toLowerCase()}`}
                  className="text-foreground/80 hover:text-foreground transition-colors"
                >
                  {item}
                </a>
              ))}
            </div>
          </div>
          
          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className="md:hidden p-2 rounded-lg bg-white/10 backdrop-blur-sm"
          >
            <div className="w-6 h-6 flex flex-col justify-center space-y-1">
              <div className={`h-0.5 w-full bg-current transition-transform ${
                isMenuOpen ? 'rotate-45 translate-y-1' : ''
              }`} />
              <div className={`h-0.5 w-full bg-current transition-opacity ${
                isMenuOpen ? 'opacity-0' : ''
              }`} />
              <div className={`h-0.5 w-full bg-current transition-transform ${
                isMenuOpen ? '-rotate-45 -translate-y-1' : ''
              }`} />
            </div>
          </button>
        </div>
      </nav>
    </ConditionalLiquidGlass>
  );
};

Ключевые функции

• Эффекты, реагирующие на прокрутку: Параметры изменяются в зависимости от позиции прокрутки
• Мобильно-дружественный: Адаптивный дизайн с гамбургер-меню
• Оптимизированная производительность: Использует ConditionalLiquidGlass для автоматических резервных вариантов

2. Модальные диалоги и наложения

Создавайте потрясающие модальные диалоги, которые ощущаются как плавающие стеклянные панели с глубиной и интерактивностью.

Реализация

'use client';

import { ConditionalLiquidGlass } from '@/components/shared/conditional-liquid-glass';
import { X } from 'lucide-react';
import { useEffect, useState } from 'react';

interface LiquidGlassModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl';
}

const LiquidGlassModal = ({ 
  isOpen, 
  onClose, 
  title, 
  children, 
  size = 'md' 
}: LiquidGlassModalProps) => {
  const [isVisible, setIsVisible] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    if (isOpen) {
      setIsVisible(true);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
      const timer = setTimeout(() => setIsVisible(false), 150);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);

  const handleMouseMove = (e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setMousePosition({
      x: ((e.clientX - rect.left) / rect.width) * 2 - 1,
      y: ((e.clientY - rect.top) / rect.height) * 2 - 1,
    });
  };

  const sizeClasses = {
    sm: 'max-w-md',
    md: 'max-w-lg',
    lg: 'max-w-2xl',
    xl: 'max-w-4xl'
  };

  if (!isVisible) return null;

  return (
    <div className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-opacity duration-150 ${
      isOpen ? 'opacity-100' : 'opacity-0'
    }`}>
      {/* Фон */}
      <div 
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />
      
      {/* Модальное окно */}
      <ConditionalLiquidGlass
        displacementScale={2.5 + Math.abs(mousePosition.x) * 0.5}
        blurAmount={1.8}
        elasticity={0.7 + Math.abs(mousePosition.y) * 0.1}
        cornerRadius={20}
        globalMousePos={mousePosition}
        className={`relative ${sizeClasses[size]} w-full transform transition-all duration-150 ${
          isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
        }`}
        style={{
          background: 'rgba(255, 255, 255, 0.05)',
          backdropFilter: 'blur(25px) saturate(200%)',
          border: '1px solid rgba(255, 255, 255, 0.2)',
          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
        }}
        onMouseMove={handleMouseMove}
      >
        <div className="p-6">
          {/* Заголовок */}
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold">{title}</h2>
            <button
              onClick={onClose}
              className="p-2 rounded-full hover:bg-white/10 transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
          
          {/* Контент */}
          <div className="space-y-4">
            {children}
          </div>
        </div>
      </ConditionalLiquidGlass>
    </div>
  );
};

---

Заинтересованы в реализации этих паттернов в вашем проекте? Начните с компонента ConditionalLiquidGlass и постепенно улучшайте ваш пользовательский интерфейс с этими проверенными паттернами.