TGViewer
Javascript Javascript @javascriptv · 17K subscribers
Post #1891 4.97K
💎 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
  • 🔥 8
  • ❤ 3
  • 👍 1
More from @javascriptv
  1. Sep 26, 2026Card Carousel Этот элемент веб-дизайна реализован с использованием HTML и CSS. Он представ…
  2. Sep 24, 2026photo post
  3. Sep 24, 2026Pure horizontal slider with sliding menu Увлекательный проект, в котором вёрстка выполнена…
  4. Sep 24, 2026Участвуй во всероссийском ИТ-чемпионате МТС True Tech Champ 2026 c призовой фондом 10 250…
  5. Sep 22, 2026CSS совет 💡 Возможно, ты не знал об этом новом и самом простом способе вертикально центри…
  6. Sep 22, 2026🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00 ДА! Вайбк…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →