FROST / FILM
Матовая плёнка
Мягкое рассеивание. Плоский край без толщины.
LUMA / Материал в интерфейсе
Свет.
Сквозь
стекло.
Прозрачное стекло, глянцевые отражения и свет на тонкой грани. Общий материал, точная иерархия и спокойное движение.
Clear + Depth по умолчанию · 413 образцов в атласе
GLASS / NEON / MOTIONПрозрачность.
Цвет за стеклом становится светом.
LUMA / OPTICAL EDITION
Прозрачность.
С характером.
Цвет за стеклом становится светом.Тонкая грань.
Объёмная кромка.
Авторский CSS-этюд · не 3D-рендерОбъёмная кромка.
Две темы / одна системаНативный motion / без тяжёлого runtimeДоступность / часть материала
Четыре характера / один интерфейс
Матовый.
Прозрачный. Глянцевый.
Одинаковый фон под четырьмя поверхностями. По умолчанию — прозрачное глянцевое стекло. Сравните резкость, отражение и толщину. Выбранный материал применяется к оболочке страницы и рабочим UI-примерам.
FROST / GLASS
Матовое стекло
Диффузия и локальная фаска. Свет собирается у края.
CLEAR / FILM
Глянцевая плёнка
Почти резкий фон. Узкое отражение без объёмной кромки.
CLEAR / GLASS
Глянцевое стекло
Прозрачная толща, направленный блик и внутренняя грань.
Глянцевое стекло · 3D. CSS-имитация, без физической рефракции.
Библиотека поверхностей
У стекла есть
характер.
Цветной объект за поверхностью. Мягкое рассеивание внутри. Чёткая световая кромка снаружи. Три характера одного материала.
01 / DIFFUSION
Frost.
Плоская 2D-плёнка. Мягко рассеивает свет, не имитируя толщину.
02 / TINT
Smoke.
Тонированная 2D-плоскость. Цвет проходит, текст остаётся читаемым.
03 / DEPTH
Prism.
Объёмная 3D-грань. Толщина проявляется в направленном блике и внутренней тени.
Стекло в действии
Не только
смотреть.
Переключите материал. Стеклянная линза сохраняет связь между состояниями — мышью, касанием и клавиатурой.
Material / 01
Мягкий свет
2D-плёнка без обводки рассеивает цвет, сохраняя силуэт за стеклом.
Независимые этюды: выбор здесь меняет только этот образец.
Выбран Frost · матовая 2D-плёнка
Material playground
Ваш оттенок.
Ваше ощущение.
Меняйте акцент, размытие и плотность, сохраняйте токены. Это рабочая локальная лаборатория: данные никуда не отправляются.
Личный материалПредпросмотр выбранных настроек
Motion, with intention
Движение
со смыслом.
Появление объясняет иерархию. Отклик подтверждает действие. Смена состояния сохраняет связь между экранами.
Исследовать 39 движений ↗Ничего лишнегоОдин жест. Один смысл.
Принцип системы
Сначала содержание.
Затем магия.
Композиция
Сетка, типографика и контраст работают даже без движения и размытия.
Материал
Тонированная плёнка, тонкая кромка и тень отделяют уровни интерфейса.
Поведение
Клавиатура, сенсорный экран и reduced motion получают полноценный интерфейс.
За поверхностью
Красиво.
И объяснимо.
Нужен ли React для стекла?
Нет. Стекло — это CSS. В этом демо используется нативный HTML, CSS и Web Animations API. React и Motion полезны для более сложных состояний приложения.
Что происходит без backdrop-filter?
Включается плотная поверхность. Контент, фокус и границы остаются видимыми. Тот же режим можно включить вручную в лаборатории.
Как отключается движение?
Системная настройка уменьшения движения и переключатель в лаборатории останавливают активную анимацию. Интерфейс сразу показывает конечное читаемое состояние.
Это настоящий продукт?
LUMA — авторский тестовый сайт для проверки скилла. Здесь нет платных тарифов, клиентских обещаний и отправки заявок.