Начало›Введение
Введение
Настоящее стекло для веба. Один материал на WebGL, который преломляет свет одинаково на macOS и Windows и работает одним тегом в любом фреймворке.
ОптикаПреломление, разложение на цвета, честное гауссово размытие и свет с настоящим углом.
ДвижениеПружины на размер и положение, желе при перетаскивании, свет из-под пальца.
СлияниеЧасти сливаются в одну форму, когда сближаются. Какие именно, решаете вы.
СлоиСтекло видит стекло под собой, а кто сверху, выбираете вы.
Почему не backdrop-filter
backdrop-filter только размывает. Изгибать он не умеет, поэтому край элемента остаётся плоским срезом. Здесь стекло работает как линза: свет проходит через изогнутую кромку по закону Снеллиуса, цвета расходятся там, где поверхность гнётся, а середина остаётся спокойной.
Почему это быстро
Один контекст WebGL на всю страницу. Кадр рисуется только когда что-то изменилось, поэтому неподвижная страница ничего не стоит. Матовость считается один раз в маленьком размере и используется снова. Зависимостей нет, пакет весит около 26 кБ.