Начало›Установка

Установка

Один пакет, без зависимостей, сборка не обязательна.

npm i @edinstvo/glass

Веб-компонент

Подключите определение один раз. После этого тег работает в обычном HTML, React, Vue, Svelte и везде, где рендерятся элементы.

<script type="module">
  import "@edinstvo/glass/define";
</script>

<edinstvo-glass style="width: 240px; height: 120px">
  Hello
</edinstvo-glass>

Углы задаёт --glass-radius, размер берётся из вашей вёрстки.

Без кастомных элементов

import { attachGlass } from "@edinstvo/glass";

const glass = attachGlass(element, { material: { frost: 0.4 } });

glass.set({ material: { refraction: 0.6 } });
glass.destroy();

Только CSS

Нет JavaScript или видеокарты? Таблица стилей даёт .glass, .glass-clear и .glass-frost поверх backdrop-filter. Если WebGL недоступен, элемент сам перейдёт на такой же вид.

import "@edinstvo/glass/glass.css";