React JS

0:12

This media is not supported in your browser

VIEW IN TELEGRAM

💎 Liquid Glass для React — современный UI-эффект в духе Apple

liquid-glass-react — это эффект "жидкого стекла", теперь как компонент для React. Поддерживает преломление, размытие, хроматическую аберрацию и реакцию на курсор. Стильно, плавно и нативно выглядит в интерфейсе.

🧪 Что умеет:
• Преломление и искажение (`displacementScale`, blurAmount, `saturation`)
• Хроматическая аберрация и глянцевый блик
• Эффект "жидкой реакции" на курсор (`elasticity`)
• Реалистичный визуальный стиль как у macOS/iOS
• Кастомизация: cornerRadius, padding, onClick, mouseContainer

📦 Установка:

npm install liquid-glass-react

📍Пример:

<LiquidGlass
  displacementScale={64}
  blurAmount={0.1}
  saturation={130}
  aberrationIntensity={2}
  elasticity={0.35}
  cornerRadius={100}
>
  <span className="text-white font-medium">Click Me</span>
</LiquidGlass>

⚠️ Браузеры: Chrome и Chromium-based — идеально. Safari и Firefox — частичная поддержка без полного displacement.

🔗 GitHub: https://github.com/rdev/liquid-glass-react

@react_tg

www.tg-me.com/ua/React JS/com.react_tg/971

3.8K viewsJun 15 at 13:04

💎 Liquid Glass для React — современный UI-эффект в духе Apple

liquid-glass-react — это эффект "жидкого стекла", теперь как компонент для React. Поддерживает преломление, размытие, хроматическую аберрацию и реакцию на курсор. Стильно, плавно и нативно выглядит в интерфейсе.

🧪 Что умеет:
• Преломление и искажение (`displacementScale`, blurAmount, `saturation`)
• Хроматическая аберрация и глянцевый блик
• Эффект "жидкой реакции" на курсор (`elasticity`)
• Реалистичный визуальный стиль как у macOS/iOS
• Кастомизация: cornerRadius, padding, onClick, mouseContainer

📦 Установка:

npm install liquid-glass-react

<LiquidGlass
  displacementScale={64}
  blurAmount={0.1}
  saturation={130}
  aberrationIntensity={2}
  elasticity={0.35}
  cornerRadius={100}
>
  <span className="text-white font-medium">Click Me</span>
</LiquidGlass>

BY React JS