GitHub-радар
Liquid Glass для веба: эффект Apple на React
React-компонент без зависимостей, воспроизводящий Apple Liquid Glass в браузере — как живую линзу, преломляющую реальный DOM, а не застывший скриншот поверх контента. Текст выделяется, ссылки кликаются, работает в Chrome, Firefox и Safari включая iOS.
React-компонент без зависимостей, который реализует крутой эффект стеклянного морфизма от Apple. Вместо того чтобы просто показывать картинку экрана, он работает как интерактивное увеличительное стекло над DOM-элементами. Использует svg displacement filters и рендеринг через signed distance field, чтобы создавать хроматическую аберрацию и эффекты преломления, при этом сохраняя полное взаимодействие с элементами под стеклом. Работает в Chrome, Firefox и Safari (включая iOS). Доступны 3 режима: преломление дочерних элементов, преломление контента через props и рендер через WebGL (поддержка видео и canvas).
Зачем это вайб-кодеру
Если хочешь добавить своему лендингу, портфолио или приложению немного стильного apple-стекла без ущерба для интерфейса — дальше искать не нужно. Это идеальное решение, потому что оно позволяет сохранить интерфейс целым, а раньше тебе пришлось бы ограничиться только Chrome или мириться с тем, что контент под стеклом замирает. С этим компонентом можно получить лучшее из обоих миров, так что бери и используй его в своём следующем React-проекте!
▌ Ещё находки