Codex
npx skills add https://github.com/rdsolod-ui/glass-neon-motion-skill/tree/main/skill/glass-neon-motion --agent codex --global --copyВ терминале · для всех проектов
GLASS / NEON / MOTION · SKILL
Этот стиль — в вашем агенте.
Установите скилл из GitHub и используйте материалы, компоненты и правила движения в своих проектах.
Claude Code
npx skills add https://github.com/rdsolod-ui/glass-neon-motion-skill/tree/main/skill/glass-neon-motion --agent claude-code --global --copyВ терминале · для всех проектов
Нужен Node.js 22.20 или новее. После установки откройте новый чат и попросите использовать glass-neon-motion. При обновлении сохраните свои правки перед заменой файлов. Инструкция на GitHub ↗
Интерфейсная лаборатория / 05
Glass Atlas.
Прозрачность. Свет. Глубина. Коллекция материалов, элементов и движений для живого интерфейса.
24 группы UI76 рабочих примеров39 motion-этюдов
Движение включено
Пять галерей.
Пять задач.
Маршруты website-reference-pack. Референсы композиции, не лицензия на копирование и не готовые компоненты. Проверено 23 октября 2026.
Supahero
Первый экран и иерархия заголовка. Сайт сообщает о переходе в Screensdesign.
Открыть галерею ↗Pricing Pages
Тарифы, сравнительные таблицы и структура предложений.
Открыть галерею ↗Navbar Gallery
Навигация: static, sticky, dropdown и mega menu.
Открыть галерею ↗CTA.gallery
Действия: кнопки, формы, подписка и скачивание.
Открыть галерею ↗Footer Design
Подвалы: типографика, сетки и завершение страницы.
Открыть галерею ↗Сравнение материалов
Для интерактивного сравнения компонентов включите JavaScript. Готовые примеры Clear, Frost и вариантов края доступны в разделе «Стекло» ниже.
Theme Studio / экспорт настроек
Ваше стекло.
Ваши правила.
Настройте материал, палитры и отклик. Получите CSS-токены, JSON и небольшой runtime для анимаций. Изменения сразу видны в мудборде.
Типографика / 47 образцов
Смысл.
С весом.
Manrope и новый editorial-набор Onest / Inter по типографическому ритму WowPovod. Жирные акценты, ясная иерархия и конечное движение. Все примеры доступны для подборок и экспорта.
Свет.
Форма.
Характер.
Видеть глубже.
Прозрачный материал. Выразительная типографика.
Раздел истории
Название главы
Тема внутри главы
Деталь и пояснение
Хороший интерфейс начинается с ясного сообщения. Материал поддерживает смысл.
Свет проходит сквозь стекло, оставляя фон различимым. Спокойная строка помогает читать длинные объяснения. Главная мысль получает вес. Остальному тексту достаточно пространства.
Пространство для мысли
Не каждый фрагмент должен привлекать одинаковое внимание. Заголовок обозначает маршрут, вводный текст задаёт контекст, а основной абзац раскрывает подробности.
Разумная длина строки и устойчивый межстрочный интервал сохраняют ритм чтения на широком и узком экране.
«Ясность — самая выразительная форма внимания».Демонстрационная цитата · LUMA
Коллекция / 2026
Прозрачный характер
Новый материалРисунок 01. Свет на оптическом крае.
Короткое название поможет найти её позже.
Ошибка. Укажите название.
Готово. Изменения сохранены.
Демонстрационные сообщения состояния.
128 м²
- Изменение
- +12,8 %
- Время
- 01:24:09
2 490 ₽
Демонстрационная цена за комплект.
2 990 ₽ · Экономия 500 ₽
| Материал | Слой | Значение |
|---|---|---|
| Clear | Depth | 0,8 |
| Frost | Film | 16,0 |
- Прозрачность сохраняет фон.
- Жирное начертание выделяет смысл.
- Интервалы связывают фрагменты.
- Clear
- Прозрачный материал.
- Depth
- Оптическая глубина края.
Токен --type-body
font-weight: 800;
line-height: 1.1;Сохранить: Ctrl + S
Пример условий. Значения в атласе демонстрационные. Рабочие формы не отправляют данные на сервер.
Важное — жирным. Смысловое ударение — прямым начертанием. Выделение — на спокойной подложке.
UI · H2O · м2
Здесь будет ваша подборка
Выберите компоненты в атласе и сохраните их вместе.
Ёж, щука, чай. Свет и тень.
Clear type. Bold ideas.
0123456789 · № 24 · 50 % · ₽ € $
Авторская серия / 01
СВЕТ
ОСТАЁТСЯ.
Появление слоями · 900 мс
Материал открывается.
Смысл остаётся.
Маска и мягкое смещение · 900 мс
2026
Год новых идей
Мягкий масштаб · 900 мс
Глубина мысли.
Свежий взгляд.
Смелый голос.
Тёплый свет.
Смысл.
Движение.
В фокусе.
Новый ракурс.
Ближе к сути.
Открытый смысл.
РИТМ.
Сначала увидеть.
Затем понять.
И действовать.
01 Материал и характер
Стекло для живых интерфейсов.
Прозрачность оставляет место содержанию. Типографика задаёт ритм и помогает увидеть главное.
Исследовать систему02 Коллекция
Один материал — много сценариев.
От короткого действия до длинного чтения. Размер, вес и паузы связывают элементы одной страницы.
Clear · глубина
У каждого слоя свой голос
Заголовок остаётся плотным и коротким. Описание получает свободный интервал, чтобы спокойно объяснить назначение материала.
Читать описаниеПаспорт поверхности
- Материал
- Прозрачное стекло
- Варианты
- 2D · 3D
- Диффузия
- 0,8–16 px
- Режим
- Светлый · тёмный
Учебные параметры: значения меняются в редакторе темы.
03 Навигационный ритм
Малый текст. Ясная роль.
Метки короткие. Разрядка относится к надписям, а не к основному абзацу.
04 Учебная метрика
128 м²
Пространство для смысла
Единицы тише числа. Табличные цифры сохраняют ширину при обновлении значения.
Когда тексту нужен воздух
Крупный заголовок открывает тему. Вводный абзац помогает понять её без лишних деталей.
Основной текст набран нейтральным гротеском. У строки есть предел ширины, а у абзацев — понятные паузы. В длинном объяснении читатель не должен искать, где заканчивается одна мысль и начинается следующая.
Иерархия внутри раздела
Вес выделяет смысл. Цвет связывает отдельные акценты. Подложка поддерживает читаемость и не дробит каждое предложение на самостоятельную карточку.
05 Демонстрационный тезис
«Пауза между словами тоже работает на смысл».Учебная композиция · LUMA
Выберите свой ритм
Главное действие получает вес. Дополнительная ссылка остаётся заметной и спокойной.
Ссылки ведут к разделам исходного атласа; серверной операции нет.
06 Короткий ответ
Как сохранить читаемость на стекле?
Начните с контраста и длины строки. Добавляйте свет и прозрачность после того, как сообщение хорошо читается на спокойной поверхности.
Демонстрационный тариф
Набор для старта
2 490 ₽
- Единица
- За учебный комплект
- Состав
- Тема · компоненты · код
Пример оформления цены. Покупка и оплата не подключены.
07 Кириллица и латиница
Сильный голос.
Clear ideas.
Onest — заголовки и акценты. Inter — основной текст. Оба шрифта поставляются с кириллицей: Ёж, щука, чай, № 12.
Прямые начертания · без курсива и засечек
24 группы / рабочая библиотека
Всё начинается
с взаимодействия.
Нажмите, выберите, раскройте. 76 рабочих примеров: от свитчера до диаграммы. Все данные учебные, действия остаются в браузере.
Компоненты · HTML · анимации · композиции · референсы. Русские и английские названия.
76 рабочих примеров в 24 группах
Результаты по всей коллекции
Каждая группа раскрывается отдельно. «Рабочий пример» означает локальное поведение в пределах подписи; платежи, отправка сообщений и настоящая авторизация не подключены.
01Основа и токены
3 примера
Самостоятельные композиции с локальным поведением. Управляйте с клавиатуры, мышью или касанием.
Светлая и тёмная тема
THEME SYSTEM
Свет меняет материал.
Текст, поля и акценты переключаются вместе.
Тема соответствует общей настройке страницы.
Акцент без потери смысла
01 / Glass study
Цвет обозначает акцент, подпись сохраняет смысл.
Cyan выбран
Плотность и типографика
- ManropeКириллица / Aa Бб 0123
- 16 pxРазмер полей ввода
- 1.5Межстрочный интервал
Свободная плотность
02Иконки и пиктограммы
2 примера
Самостоятельные композиции с локальным поведением. Управляйте с клавиатуры, мышью или касанием.
03Кнопки и действия
3 примера
Приоритет, выбор команды и завершение операции.
Иерархия действий
Frost / 01
1 слой. Добавьте ещё один или сбросьте композицию.
Busy → success / error
Учебная операция длится 1,2 секунды. Сервер не используется.
Готово к сборке.
Основное действие и варианты
Другой формат
Формат: Карточка
Выберите формат, затем создайте элемент.
04Призывы к действию
3 примера
Самостоятельные композиции с локальным поведением. Управляйте с клавиатуры, мышью или касанием.
Hero CTA с результатом
ОПТИКА И ИНТЕРФЕЙС
Начните с одного слоя.
Выберите образец и откройте его спецификацию.
Палитра ещё не выбрана
Закрываемый промобаннер
Баннер открыт
Контекстный CTA и подтверждение
Сохраните подборку в рамках этой сессии.
Подборка не сохранена
05Переключение и выбор
3 примера
Настройка сразу меняет объект; множественный и единичный выбор различаются.
06Поля и ввод
3 примера
Постоянная подпись, понятный пример ввода и видимое значение.
Label / placeholder / help / value
Подпись остаётся видимой после ввода; placeholder исчезает.
px
Проект ещё не назван · 1280 px.
Textarea и счётчик
0 / 180 знаков · высота растёт до 8 строк
Здесь появится ваше описание.
Пароль и одноразовый код
Введите любой код из шести цифр. Проверяется формат, не подлинность.
Учебные поля. Не вводите настоящий пароль.
07Селекторы
3 примера
Нативный выбор, поиск варианта и диапазон значений.
Select и множественный выбор
Frost · без дополнительных слоёв.
Combobox с клавиатурой
Стрелки — вариант, Enter — выбрать, Escape — закрыть. Можно касаться строки.
Выбор ещё не сделан.
Диапазон, дата и цвет
Диапазон 20–80 · 50%
Допустимое значение: 20–80. Дата: 2026-10-22.
08Подсказки и объяснения
3 примера
Короткий tooltip, интерактивный popover и пошаговое обучение.
Tooltip: hover / focus / touch
2D-плёнка рассеивает фон без оптической толщины.
Наведите указатель, перейдите Tab или коснитесь кнопки. Escape скрывает пояснение. В tooltip нет интерактивных элементов.
Пояснение также доступно при фокусе.
Popover с действием
Подсказка по материалу
Плотный фон защищает длинный текст. Выберите, где показывать помощь.
Короткое название помогает найти материал в каталоге.
Inline-помощь включена.
Пошаговое объяснение
01 · Материал02 · Акцент03 · Проверка
Обзор из трёх шагов
Объяснения остаются рядом с объектами и не блокируют страницу.
Обзор ещё не начат.
09Header и burger-меню
2 примера
Самостоятельные композиции с локальным поведением. Управляйте с клавиатуры, мышью или касанием.
12Поиск и фильтрация
3 примера
Сочетание запроса и фильтров, команды и сохранённое представление.
Поиск + фильтр + сортировка
- Frost · светлый
- Pearl · светлый
- Prism · светлый
- Smoke · тёмный
4 материала.
Палитра команд
Слоёв: 1 · обычная подложка
Палитра управляет только этим образцом.
Сохранённое представление
Frost / 2DLens / 3DPaper / Solid
Выбрано: 2D, 3D. Сохранение только в памяти страницы.
13Карточки и контент
3 примера
Самостоятельные композиции с локальным поведением. Управляйте с клавиатуры, мышью или касанием.
Карточка с избранным
LUMA / 01
Прозрачная геометрия
Цвет и контраст читаются сквозь слой.
Карточка вне коллекции
FAQ с независимыми разделами
Чем плёнка отличается от стекла?
Плёнка не показывает толщину. Стекло передаёт её направленными краевыми бликами и внутренней тенью.
Матовый или глянцевый?
Матовая поверхность рассеивает фон; глянцевая сохраняет его ясность и добавляет отражённый свет.
Фильтрация карточек
- Прозрачная плёнка
- Матовое стекло
- Глянцевое стекло
Показано 3 материала
14Медиа и файлы
2 примера
Самостоятельные композиции с локальным поведением. Управляйте с клавиатуры, мышью или касанием.
15Таблицы и данные
3 примера
Сортировка, фильтрация, массовые действия, раскрытие и проверяемое редактирование. Состояния локальные; данные учебные.
Реестр: сортировка, фильтр и выбор
Учебный реестр · 6 материалов
| Статус | |||
|---|---|---|---|
| Aurora | 12 | Черновик | |
| Clear | 28 | Готово | |
| Frost | 24 | Черновик | |
| Prism | 36 | Черновик | |
| Smoke | 18 | Готово | |
| Solid | 0 | Готово |
Выбор сохраняется при фильтрации. Общий переключатель выбирает только видимые строки; массовое действие относится ко всем выбранным.
Раскрываемые записи
Редактирование и валидация
Редактирование на месте · 5 баллов за единицу
| Материал | Количество, ед. | Баллы | Действие |
|---|---|---|---|
| Frost | 20 | ||
| Clear | 30 | ||
| Prism | 40 |
Целое число 0–99. Enter сохраняет, Escape отменяет. Итог пересчитывается после сохранения.
16Графики и диаграммы
12 примера
12 рабочих SVG-примеров: сравнение, время, распределение, связи, доли, иерархия, потоки, условная география и мониторинг. Точные значения доступны таблицей.
Сортируемые столбцы
Сравнение / ед. / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- Frost
- Smoke
- Prism
- Solid
Сумма 100 ед. Исходный порядок.
Таблица значений · 4 строк
| Материал | Количество, ед. |
|---|---|
| Frost | 42 |
| Smoke | 28 |
| Prism | 18 |
| Solid | 12 |
Длина от нуля; сортировка меняет порядок, а не значения.
Сравнение двух серий
Сравнение / ед. / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- План
- Факт
Показаны серии: План, Факт.
Таблица значений · 4 строк
| Материал | План, ед. | Факт, ед. |
|---|---|---|
| Frost | 30 | 50 |
| Smoke | 45 | 35 |
| Prism | 60 | 70 |
| Solid | 55 | 40 |
Общая линейная шкала. Серии различаются цветом и узором.
Линия с пропуском
Время / ед. / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- План
- Факт
Шкала 0–100 ед.; пропуск показан разрывом. Май—октябрь, учебный период.
Таблица значений · 6 строк
| Месяц | План, ед. | Факт, ед. |
|---|---|---|
| Май | 30 | 24 |
| Июнь | 36 | 32 |
| Июль | 48 | Нет данных |
| Август | 56 | 47 |
| Сентябрь | 60 | 55 |
| Октябрь | 68 | 64 |
Разрыв — отсутствие наблюдения, не ноль. Пропуск не интерполируется.
Распределение по интервалам
Распределение / наблюдений / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- Частота
24 наблюдения. Ширина интервала 4 мин. Сумма частот 24.
Исходные значения, мин: 1, 2, 2, 3, 4, 4, 5, 5, 6, 6, 7, 8, 8, 9, 10, 11, 11, 12, 13, 14, 14, 15, 16, 16.
Таблица значений · 4 строк
| Интервал, мин | Наблюдений |
|---|---|
| [0; 4) | 4 |
| [4; 8) | 7 |
| [8; 12) | 6 |
| [12; 16] | 7 |
Равные интервалы [a, b), последний включает правую границу. Исходная выборка доступна ниже.
Связь двух величин
Связи / мин / баллы / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- Команда A
- Команда B
8 наблюдений. Круг — A; ромб — B. Значения доступны в таблице.
Таблица значений · 8 строк
| Наблюдение | Команда | Время, мин | Баллы |
|---|---|---|---|
| P1 | Команда A | 1 | 25 |
| P2 | Команда A | 2 | 36 |
| P3 | Команда A | 4 | 55 |
| P4 | Команда A | 6 | 62 |
| P5 | Команда B | 3 | 20 |
| P6 | Команда B | 5 | 45 |
| P7 | Команда B | 7 | 70 |
| P8 | Команда B | 9 | 88 |
Каждая точка — отдельное учебное наблюдение; связь не доказывает причинность.
Доли целого
Доли / ед. / % / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- Frost
- Smoke
- Prism
- Solid
Всего 100 ед. Четыре доли образуют 100%.
Таблица значений · 4 строк
| Материал | Количество, ед. | Доля, % |
|---|---|---|
| Frost | 42 | 42 |
| Smoke | 28 | 28 |
| Prism | 18 | 18 |
| Solid | 12 | 12 |
Сектора рассчитаны от общей суммы. Точные значения и доли есть в таблице.
Нормированные группы
Доли / % / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- План
- Факт
Показаны серии: План, Факт. Сумма каждой строки — 100% выбранных серий.
Таблица значений · 4 строк
| Материал | План, ед. | Факт, ед. | План, % | Факт, % |
|---|---|---|---|---|
| Frost | 30 | 50 | 37,5 | 62,5 |
| Smoke | 45 | 35 | 56,3 | 43,8 |
| Prism | 60 | 70 | 46,2 | 53,8 |
| Solid | 55 | 40 | 57,9 | 42,1 |
Каждая строка нормируется до 100% выбранных серий. Абсолютные значения не теряются в таблице.
Иерархия площадей
Иерархия / ед. / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- Frost
- Smoke
- Prism
- Solid
Вся иерархия: 100 ед. Площади пропорциональны долям выбранной ветви.
Таблица значений · 4 строк
| Ветвь | Материал | Количество, ед. |
|---|---|---|
| Базовые | Frost | 42 |
| Базовые | Smoke | 28 |
| Оптические | Prism | 18 |
| Оптические | Solid | 12 |
Два уровня, алгоритм slice-and-dice. Площадь пропорциональна величине; можно раскрыть ветвь.
Потоки между этапами
Потоки / ед. / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- Прямой
- Поиск
- Письмо
Вход = выход = 120 ед. Толщина каждого потока использует общий масштаб.
Таблица значений · 9 строк
| Источник | Назначение | Поток, ед. |
|---|---|---|
| Прямой | Обзор | 20 |
| Прямой | Пример | 10 |
| Прямой | Экспорт | 10 |
| Поиск | Обзор | 5 |
| Поиск | Пример | 25 |
| Поиск | Экспорт | 10 |
| Письмо | Обзор | 15 |
| Письмо | Пример | 5 |
| Письмо | Экспорт | 20 |
Двухэтапный Sankey: ширина ленты пропорциональна потоку. Суммы входов и выходов равны.
Схематическая хороплетная карта
География / % / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
Шесть вымышленных областей; цвет кодирует процент, не площадь региона. Границы шкалы 0 / 25 / 50 / 75 / 100%.
- 0–<25%
- 25–<50%
- 50–<75%
- 75–100%
Таблица значений · 6 строк
| Условная область | Доля, % |
|---|---|
| R1 | 65 |
| R2 | 35 |
| R3 | 80 |
| R4 | 20 |
| R5 | 55 |
| R6 | 95 |
Авторская условная география из шести областей; не реальные территории, границы или статистика.
Цель и история показателя
Мониторинг / % / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- Факт
Последнее значение 64%. Цель 70%. До цели 6 п. п.
Таблица значений · 8 строк
| Период | Значение, % | Цель, % |
|---|---|---|
| 1 | 35 | 70 |
| 2 | 40 | 70 |
| 3 | 38 | 70 |
| 4 | 50 | 70 |
| 5 | 52 | 70 |
| 6 | 58 | 70 |
| 7 | 61 | 70 |
| 8 | 64 | 70 |
Bullet со шкалой 0–100, целью 70 и историей из восьми учебных периодов.
Контрольные границы
Мониторинг / ед. / демоданные
На узком экране график прокручивается; точные значения — в таблице ниже.
- Значение
0 из 8 точек вне учебных границ. Ромб обозначает выход.
- Центр 50 ед.
- LCL 35 / UCL 65 ед.
Таблица значений · 8 строк
| Наблюдение | Значение, ед. | Статус |
|---|---|---|
| 1 | 48 | Внутри границ |
| 2 | 52 | Внутри границ |
| 3 | 50 | Внутри границ |
| 4 | 47 | Внутри границ |
| 5 | 51 | Внутри границ |
| 6 | 49 | Внутри границ |
| 7 | 53 | Внутри границ |
| 8 | 50 | Внутри границ |
Учебные фиксированные границы 35/65 и центр 50; это не статистически оценённые нормативы процесса.
17Организация содержимого
3 примера
Вкладки с панелями, вложенное раскрытие и master/detail.
Вкладки с настоящими панелями
Оптика
Цветная форма продолжается под плёнкой и рассеивается внутри неё.
Контраст
Текст располагается на стабильном фоне; неон остаётся акцентом.
Движение
Изменение состояния видно и при выключенной анимации.
Раскрытие и вложенная структура
Материал 3 слоя
- Плёнка — прозрачность 44%
Локальная кромка
Свет сверху слева, затухание к нижнему краю.
- Подложка — cyan / violet
Что меняется в Solid?
Прозрачность и размытие убираются, структура и контраст сохраняются.
Материальная плоскость
Кромка включена. Это дерево native details, не ARIA treeview.
Master/detail и ширина панели
Frost
Мягкое рассеивание для фоновых панелей.
Выбран Frost. На узком экране панели расположены вертикально.
18Наложения и окна
3 примера
Диалог редактирования, подтверждение и нижняя панель.
Dialog: редактирование и возврат фокуса
Morning frost
Изменения действуют только в этом образце.
Подтверждение удаления
Слой ReflectionУчебная запись, 12 KB
Слой присутствует.
Bottom sheet с выбором
Frost
Выбран Frost. Выбор применяется только после подтверждения.
19Обратная связь
3 примера
Реальный локальный результат, отмена и журнал уведомлений.
Snackbar и Undo
Образец AuroraНаходится в коллекции
Образец убран.
Образец в коллекции. Undo не исчезает по таймеру.
Alert: offline → retry → ready
Демонстрационный offline
Новые данные недоступны. Последняя локальная копия сохранена.
Сеть не проверяется: это явная симуляция состояний.
Центр уведомлений
Непрочитано: 2
- Материал Frost добавлен
- Контраст проверен
2 непрочитанных уведомления.
20Ожидание и отсутствие данных
3 примера
Измеримый прогресс, скелетон и выход из пустого состояния.
Progress с отменой
Обработано 0 из 5. Это учебный таймер, не загрузка файла.
Skeleton → содержимое
Готово
Материал Aurora
Матовая плёнка и локальный голубой акцент.
Данные уже видимы. По кнопке — симуляция ожидания 1 секунду.
Empty / error / retry
Коллекция пуста
Создайте первый материал — он появится здесь.
0 материалов.
21Формы и сценарии
3 примера
Проверка, пошаговый ввод и сохранение черновика.
Форма с summary ошибок
Форма только проверяет значения, ничего не отправляет.
Wizard: ввод → выбор → проверка
- Название
- Материал
- Проверка
Шаг 1 из 3. Все данные остаются на странице.
Черновик: save / cancel / dirty
Нет изменений
Это локальный черновик, перезагрузка очищает сохранённое.
22Товар и корзина
2 примера
Самостоятельные композиции с локальным поведением. Управляйте с клавиатуры, мышью или касанием.
23Аккаунт и настройки
3 примера
Безопасная демонстрация входа, предпочтений и согласий.
Вход: локальная проверка формы
Учебная форма: используйте любые вымышленные данные. Настоящей авторизации нет.
Демонстрационный профильЛокальное состояние, не сессия аккаунта
Не авторизовано. Пароль не хранится и не отправляется.
Настройки с локальным preview
Aurora / материал
Мягкая плёнка. Голубой локальный акцент.
Последнее изменение: сейчасНастройки меняют только карточку ниже.
Настройки согласия
Учебный выбор. Cookie, аналитика и сторонние запросы не создаются.
Ничего не применено. Текущий пример не устанавливает cookie.
24Сложные рабочие области
3 примера
Самостоятельные композиции с локальным поведением. Управляйте с клавиатуры, мышью или касанием.
Kanban с клавиатурой
План
Настроить стеклоЗадача 01
В работе
Готово
На карточке: Alt + ← / →. Или используйте кнопки.
Задача в колонке «План»
Календарь с выбором даты
Октябрь 2026
Выберите дату. События не создаются.
Текстовый редактор с preview
Стеклянная коллекция
Сначала материал, затем движение.
Простой preview: # заголовок, **жирный** текст.
В рабочих UI-примерах совпадений нет. Проверьте результаты других разделов выше или сбросьте поиск.
Четыре характера / один интерфейс
Матовый.
Прозрачный. Глянцевый.
Одинаковый фон под четырьмя поверхностями. По умолчанию — прозрачное глянцевое стекло. Сравните резкость, отражение и толщину. Выбранный материал применяется к оболочке страницы и рабочим UI-примерам.
FROST / FILM
Матовая плёнка
Мягкое рассеивание. Плоский край без толщины.
FROST / GLASS
Матовое стекло
Диффузия и локальная фаска. Свет собирается у края.
CLEAR / FILM
Глянцевая плёнка
Почти резкий фон. Узкое отражение без объёмной кромки.
CLEAR / GLASS
Глянцевое стекло
Прозрачная толща, направленный блик и внутренняя грань.
Глянцевое стекло · 3D. CSS-имитация, без физической рефракции.
Материал / свет / глубина
2D плёнка.
3D край.
Авторские CSS-образцы по вашим референсам. Frost и Smoke — плоская плёнка без обводки. Liquid — объёмный край с направленным бликом и внутренней тенью. Цвет за стеклом раскрывает оба материала.
Живой образец · управление мышью, клавиатурой и касанием
2D плёнка · Светлая тема · № 2 / 9 / 17
Свет сквозь матовую плёнку
Чёткий объект вне панели становится мягким внутри. Перекрытие показывает расстояние между слоями.
2D плёнка · Тёмная тема · № 2 / 9 / 17
Свет сквозь матовую плёнку
Чёткий объект вне панели становится мягким внутри. Перекрытие показывает расстояние между слоями.
2D плёнка · Светлая тема · № 3 / 6 / 13
Прозрачная глубина
Цветная форма остаётся видна за дымчатой плоскостью. Текст получает собственный спокойный участок.
2D плёнка · Тёмная тема · № 3 / 6 / 13
Прозрачная глубина
Цветная форма остаётся видна за дымчатой плоскостью. Текст получает собственный спокойный участок.
3D край · Светлая тема · № 20 / 21 / 24
Свет собирается на краях
Двойной блик и внутренняя тень создают иллюзию толщины. Это CSS-стилизация, не физическая рефракция.
3D край · Тёмная тема · № 20 / 21 / 24
Свет собирается на краях
Двойной блик и внутренняя тень создают иллюзию толщины. Это CSS-стилизация, не физическая рефракция.
Variation layer / 01
Один элемент.
Разный характер.
44 рабочих локальных вариантов в 15 семействах. Сравнивайте форму, плотность и поведение отдельно от материала. Все значения — демонстрационные.
Материал наследуется от общих переключателей «Стекло». Найти отдельный вариант можно через единый поиск UI выше. Скроллбары остаются системными: внешний вид зависит от браузера и ОС.
Прогресс и показатели4 варианта
Линейный прогресс
Обычная шкала с числом и подписью.
Подготовка коллекции
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-progress-demo" data-progress-kind="linear"><div class="vx-line-label"><span>Подготовка коллекции</span><output>64%</output></div><progress class="vx-progress linear" max="100" value="64" aria-label="Подготовка коллекции">64%</progress><label class="ui-label" for="vx-value-linear">Изменить прогресс</label><input id="vx-value-linear" data-vx-range type="range" min="0" max="100" value="64"></div>Тонкая линия
Для компактной строки состояния.
Подготовка коллекции
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-progress-demo" data-progress-kind="thin"><div class="vx-line-label"><span>Подготовка коллекции</span><output>64%</output></div><progress class="vx-progress thin" max="100" value="64" aria-label="Подготовка коллекции">64%</progress><label class="ui-label" for="vx-value-thin">Изменить прогресс</label><input id="vx-value-thin" data-vx-range type="range" min="0" max="100" value="64"></div>Кольцевой индикатор
Число внутри кольца, единый доступный progressbar.
Подготовка коллекции
64%
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-progress-demo" data-progress-kind="ring"><div class="vx-line-label"><span>Подготовка коллекции</span><output>64%</output></div><div class="vx-ring" role="progressbar" aria-label="Подготовка коллекции" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--value:64"><span>64%</span></div><label class="ui-label" for="vx-value-ring">Изменить прогресс</label><input id="vx-value-ring" data-vx-range type="range" min="0" max="100" value="64"></div>Сегментная шкала
Десять дискретных секций и точный процент рядом.
Подготовка коллекции
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-progress-demo" data-progress-kind="segments"><div class="vx-line-label"><span>Подготовка коллекции</span><output>64%</output></div><div class="vx-segments" role="progressbar" aria-label="Подготовка коллекции" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i><i class=""></i><i class=""></i></div><label class="ui-label" for="vx-value-segments">Изменить прогресс</label><input id="vx-value-segments" data-vx-range type="range" min="0" max="100" value="64"></div>Прокрутка и чтение4 варианта
Нативный скроллбар
Системная механика, окрашенные ползунок и дорожка.
01 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
02 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
03 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
04 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
05 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
06 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
07 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-scroll-demo"><div class="vx-scroll standard" tabindex="0" role="region" aria-label="Прокручиваемый текст, standard"><p><b>01 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>02 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>03 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>04 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>05 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>06 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>07 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p></div><small>Tab → область, затем стрелки. На телефоне — свайп.</small><button type="button" class="ui-btn" data-vx-action="scroll-start">В начало</button> <button type="button" class="ui-btn" data-vx-action="scroll-end">В конец</button></div>Компактный скроллбар
Тонкий ползунок; область доступна клавишами и касанием.
01 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
02 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
03 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
04 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
05 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
06 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
07 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-scroll-demo"><div class="vx-scroll thin" tabindex="0" role="region" aria-label="Прокручиваемый текст, thin"><p><b>01 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>02 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>03 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>04 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>05 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>06 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>07 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p></div><small>Tab → область, затем стрелки. На телефоне — свайп.</small><button type="button" class="ui-btn" data-vx-action="scroll-start">В начало</button> <button type="button" class="ui-btn" data-vx-action="scroll-end">В конец</button></div>Горизонтальная лента
Нативная прокрутка и мягкое snap-позиционирование.
Tab → область, затем стрелки. На телефоне — свайп.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-scroll-demo"><div class="vx-scroll horizontal" tabindex="0" role="region" aria-label="Горизонтальная лента образцов"><div class="vx-slide"><span>Коллекция / 01</span><strong>Свет</strong></div><div class="vx-slide"><span>Коллекция / 02</span><strong>Глубина</strong></div><div class="vx-slide"><span>Коллекция / 03</span><strong>Цвет</strong></div><div class="vx-slide"><span>Коллекция / 04</span><strong>Форма</strong></div><div class="vx-slide"><span>Коллекция / 05</span><strong>Ритм</strong></div><div class="vx-slide"><span>Коллекция / 06</span><strong>Воздух</strong></div></div><small>Tab → область, затем стрелки. На телефоне — свайп.</small><button type="button" class="ui-btn" data-vx-action="scroll-start">В начало</button> <button type="button" class="ui-btn" data-vx-action="scroll-end">В конец</button></div>Прогресс чтения
Шкала вычисляется по фактическому положению текста.
Прочитано:
01 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
02 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
03 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
04 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
05 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
06 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
07 / Материал и пространство. Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-scroll-demo"><div class="vx-reading-label">Прочитано: <output>0%</output></div><progress max="100" value="0" aria-label="Прогресс чтения"></progress><div class="vx-scroll reading" tabindex="0" role="region" aria-label="Прокручиваемый текст, reading"><p><b>01 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>02 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>03 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>04 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>05 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>06 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p><p><b>07 / Материал и пространство.</b> Прозрачное стекло сохраняет цвет подложки, а плотная зона чтения помогает различать содержание. Прокрутка остаётся нативной: колёсико, касание и клавиши работают привычно.</p></div><small>Tab → область, затем стрелки. На телефоне — свайп.</small><button type="button" class="ui-btn" data-vx-action="scroll-start">В начало</button> <button type="button" class="ui-btn" data-vx-action="scroll-end">В конец</button></div>Ожидание и загрузка4 варианта
Кольцо ожидания
Короткая загрузка, завершение и отмена.
Готово к демонстрации
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-load-demo" data-loading-kind="spinner"><div class="vx-load-surface" aria-busy="false"><span class="vx-spinner" aria-hidden="true"></span><p class="vx-load-status" role="status">Готово к демонстрации</p></div><button type="button" class="ui-btn" data-vx-action="load">Повторить загрузку</button> <button type="button" class="ui-btn" data-vx-action="cancel-load">Отменить</button><small>Локальная демонстрация, 2 секунды; без запроса к серверу.</small></div>Три точки
Конечный ритм без бесконечного движения.
Готово к демонстрации
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-load-demo" data-loading-kind="dots"><div class="vx-load-surface" aria-busy="false"><div class="vx-dots" aria-hidden="true"><i></i><i></i><i></i></div><p class="vx-load-status" role="status">Готово к демонстрации</p></div><button type="button" class="ui-btn" data-vx-action="load">Повторить загрузку</button> <button type="button" class="ui-btn" data-vx-action="cancel-load">Отменить</button><small>Локальная демонстрация, 2 секунды; без запроса к серверу.</small></div>Каркас содержимого
Статический каркас, затем готовое содержание.
Готово к демонстрации
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-load-demo" data-loading-kind="skeleton"><div class="vx-load-surface" aria-busy="false"><div class="vx-skeleton" aria-hidden="true"><i></i><i></i><i></i></div><p class="vx-load-status" role="status">Готово к демонстрации</p></div><button type="button" class="ui-btn" data-vx-action="load">Повторить загрузку</button> <button type="button" class="ui-btn" data-vx-action="cancel-load">Отменить</button><small>Локальная демонстрация, 2 секунды; без запроса к серверу.</small></div>Пустое состояние → данные
Переход от пустой области к локальному результату.
Готово к демонстрации
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-load-demo" data-loading-kind="empty"><div class="vx-load-surface" aria-busy="false"><div class="vx-empty-symbol" aria-hidden="true">—</div><p class="vx-load-status" role="status">Готово к демонстрации</p></div><button type="button" class="ui-btn" data-vx-action="load">Повторить загрузку</button> <button type="button" class="ui-btn" data-vx-action="cancel-load">Отменить</button><small>Локальная демонстрация, 2 секунды; без запроса к серверу.</small></div>Шаги и последовательности3 варианта
Горизонтальные шаги
Текущий шаг, движение назад и вперёд.
- 1Материал
- 2Композиция
- 3Проверка
Шаг 1 из 3 · Материал
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-step-demo horizontal" data-step="1"><ol class="vx-steps"><li aria-current="step"><span>1</span><b>Материал</b></li><li ><span>2</span><b>Композиция</b></li><li ><span>3</span><b>Проверка</b></li></ol><p role="status">Шаг 1 из 3 · Материал</p><button type="button" class="ui-btn" data-vx-action="step-back">Назад</button> <button type="button" class="ui-btn" data-vx-action="step-next">Далее</button></div>Вертикальный маршрут
Для узких колонок и длинных подписей.
- 1Материал
- 2Композиция
- 3Проверка
Шаг 1 из 3 · Материал
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-step-demo vertical" data-step="1"><ol class="vx-steps"><li aria-current="step"><span>1</span><b>Материал</b></li><li ><span>2</span><b>Композиция</b></li><li ><span>3</span><b>Проверка</b></li></ol><p role="status">Шаг 1 из 3 · Материал</p><button type="button" class="ui-btn" data-vx-action="step-back">Назад</button> <button type="button" class="ui-btn" data-vx-action="step-next">Далее</button></div>Компактный счётчик шагов
Минимальная композиция с тем же состоянием.
- 1Материал
- 2Композиция
- 3Проверка
Шаг 1 из 3 · Материал
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-step-demo compact" data-step="1"><ol class="vx-steps"><li aria-current="step"><span>1</span><b>Материал</b></li><li ><span>2</span><b>Композиция</b></li><li ><span>3</span><b>Проверка</b></li></ol><p role="status">Шаг 1 из 3 · Материал</p><button type="button" class="ui-btn" data-vx-action="step-back">Назад</button> <button type="button" class="ui-btn" data-vx-action="step-next">Далее</button></div>Варианты кнопок4 варианта
Иерархия действий
Основная, вторичная и текстовая кнопки.
Нажмите доступную кнопку — результат появится здесь.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-action-demo hierarchy"><div class="vx-action-row"><button class="ui-btn ui-primary" data-vx-action="choose">Основная</button><button class="ui-btn" data-vx-action="choose">Вторичная</button><button class="ui-btn vx-text-button" data-vx-action="choose">Текстовая</button></div><p role="status">Нажмите доступную кнопку — результат появится здесь.</p></div>Кнопка с выбором
Округлая форма и явное pressed-состояние.
Нажмите доступную кнопку — результат появится здесь.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-action-demo toggle"><button class="ui-btn vx-pill" data-vx-action="toggle" aria-pressed="false">В избранное</button><p role="status">Нажмите доступную кнопку — результат появится здесь.</p></div>Три масштаба
Разные внутренние отступы, зона нажатия от 44 px.
Нажмите доступную кнопку — результат появится здесь.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-action-demo sizes"><div class="vx-action-row"><button class="ui-btn vx-compact" data-vx-action="choose">Компактная</button><button class="ui-btn" data-vx-action="choose">Обычная</button><button class="ui-btn vx-large" data-vx-action="choose">Крупная</button></div><p role="status">Нажмите доступную кнопку — результат появится здесь.</p></div>Доступность и намерение
Основное действие, disabled и локальное удаление демо.
Нажмите доступную кнопку — результат появится здесь.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-action-demo states"><div class="vx-action-row"><button class="ui-btn ui-primary" data-vx-action="choose">Сохранить</button><button class="ui-btn" disabled>Недоступно</button><button class="ui-btn vx-danger" data-vx-action="choose">Удалить демо</button></div><p role="status">Нажмите доступную кнопку — результат появится здесь.</p></div>Варианты полей4 варианта
Поле с единицей
Единица измерения остаётся рядом со значением.
В пикселях, от 160 до 1200.
Ширина: 320 px
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<label class="ui-label" for="vx-width">Ширина панели</label><div class="vx-input-unit"><input class="ui-field" id="vx-width" type="number" min="160" max="1200" value="320" data-vx-unit aria-describedby="vx-width-help"><span aria-hidden="true">px</span></div><small id="vx-width-help">В пикселях, от 160 до 1200.</small><p role="status">Ширина: 320 px</p>Счётчик количества
Плюс, минус и ручной ввод с границами.
От 1 до 12. Можно ввести число вручную.
Выбрано: 3
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-quantity"><label class="ui-label" for="vx-quantity">Количество образцов</label><div class="vx-action-row"><button type="button" class="ui-btn" data-vx-action="minus">−</button><input class="ui-field" id="vx-quantity" type="number" min="1" max="12" value="3" aria-describedby="vx-quantity-help"><button type="button" class="ui-btn" data-vx-action="plus">+</button></div><small id="vx-quantity-help">От 1 до 12. Можно ввести число вручную.</small><p role="status">Выбрано: 3</p></div>Многострочное поле
Остаток длины без подмены подписи placeholder-ом.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<label class="ui-label" for="vx-message">Комментарий к образцу</label><textarea class="ui-field" id="vx-message" rows="3" maxlength="160" placeholder="Что стоит изменить?" data-vx-count aria-describedby="vx-message-count"></textarea><output id="vx-message-count">0 / 160</output>Проверка значения
Валидация с доступной ошибкой без отправки данных.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<form data-vx-email novalidate><label class="ui-label" for="vx-email">Email для примера</label><input id="vx-email" class="ui-field" type="email" required autocomplete="off" placeholder="name@example.com" aria-describedby="vx-email-message"><p id="vx-email-message" role="status">Учебная форма, данные не отправляются.</p><button class="ui-btn" type="submit">Проверить</button></form>Варианты карточек3 варианта
Карточка показателя
Крупное число и компактный контекст.
Готовность коллекции24
проверенных образца · демоданные
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-content-demo metric"><span class="vx-overline">Готовность коллекции</span><strong class="vx-metric">24</strong><p>проверенных образца · демоданные</p><button type="button" class="ui-btn" data-vx-action="metric">Добавить образец</button></div>Карточка выбора
Кликабельная подпись настоящего checkbox.
Материал не выбран
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-content-demo selection"><label class="vx-selection"><input type="checkbox"><span><strong>Прозрачное стекло</strong><small>Выбрать материал для локальной подборки</small></span></label><p role="status">Материал не выбран</p></div>Карточка с раскрытием
Нативное раскрытие дополнительного содержания.
Карточка с подробностями
Компактный заголовок раскрывает описание. Нативный details поддерживает клавиатуру и не требует искусственной роли.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-content-demo disclosure"><details class="vx-disclosure"><summary>Карточка с подробностями</summary><p>Компактный заголовок раскрывает описание. Нативный details поддерживает клавиатуру и не требует искусственной роли.</p></details></div>Статусы и метки4 варианта
Метка статуса
Текст передаёт состояние независимо от цвета.
● Черновик
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-badges"><span data-vx-badge>● Черновик</span></div><label class="ui-label" for="vx-status-select">Статус образца</label><select class="ui-field" id="vx-status-select" data-vx-status><option>Черновик</option><option>На проверке</option><option>Готово</option><option>Ошибка</option></select>Множественный выбор
Независимые нажимаемые метки с общим результатом.
Выбрано: Стекло
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-chip-list"><button class="ui-btn vx-pill" data-vx-action="chip" aria-pressed="true">Стекло</button><button class="ui-btn vx-pill" data-vx-action="chip" aria-pressed="false">Неон</button><button class="ui-btn vx-pill" data-vx-action="chip" aria-pressed="false">Motion</button></div><p role="status">Выбрано: Стекло</p>Шкала заполненности
Измеренная величина, а не ход выполнения задачи.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<label for="vx-meter">Занято в хранилище</label><meter id="vx-meter" min="0" max="100" low="40" high="80" optimum="20" value="64">64%</meter><output>64%</output><label class="ui-label" for="vx-meter-value">Изменить занятое место</label><input id="vx-meter-value" data-vx-range type="range" min="0" max="100" value="64">Встроенное уведомление
Смена результата в потоке без перекрытия страницы.
Изменения сохранены локально.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="vx-inline-alert" role="status">Изменения сохранены локально.</div><button type="button" class="ui-btn" data-vx-action="notice">Изменить уведомление</button>Пагинация и выдача2 варианта
Номера страниц
Переключение страниц и честные границы.
- Образец 01 · Свет
- Образец 02 · Глубина
- Образец 03 · Цвет
Страница 1 из 3
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-pages="numbered" data-page="1"><ol class="va-results"><li>Образец 01 · Свет</li><li>Образец 02 · Глубина</li><li>Образец 03 · Цвет</li></ol><p role="status">Страница 1 из 3</p><nav class="vx-action-row" aria-label="Страницы демоколлекции"><button class="ui-btn" type="button" data-va-action="prev">Назад</button><button class="ui-btn" data-va-action="page" data-page="1" aria-current="page">1</button><button class="ui-btn" data-va-action="page" data-page="2">2</button><button class="ui-btn" data-va-action="page" data-page="3">3</button><button class="ui-btn" type="button" data-va-action="next">Далее</button></nav></div>Показать ещё
Постепенное раскрытие девяти локальных результатов.
- Образец 01 · Свет
- Образец 02 · Глубина
- Образец 03 · Цвет
Показано 3 из 9
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-pages="more" data-page="1"><ol class="va-results"><li>Образец 01 · Свет</li><li>Образец 02 · Глубина</li><li>Образец 03 · Цвет</li></ol><p role="status">Показано 3 из 9</p><button class="ui-btn" type="button" data-va-action="more">Показать ещё</button></div>Таймлайны событий2 варианта
Вертикальная история
Три этапа с текущим состоянием и текстовым пояснением.
- 01ПолученоЗапрос принят
- 02В работеПодготовка образца
- 03ГотовоМожно просмотреть
Текущий этап: Получено
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="va-timeline vertical" data-va-timeline><ol><li aria-current="step"><span>01</span><b>Получено</b><small>Запрос принят</small></li><li ><span>02</span><b>В работе</b><small>Подготовка образца</small></li><li ><span>03</span><b>Готово</b><small>Можно просмотреть</small></li></ol><p role="status">Текущий этап: Получено</p><button class="ui-btn" type="button" data-va-action="timeline">Следующий этап</button></div>Горизонтальный маршрут
Та же последовательность в горизонтальной композиции.
- 01ПолученоЗапрос принят
- 02В работеПодготовка образца
- 03ГотовоМожно просмотреть
Текущий этап: Получено
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div class="va-timeline horizontal" data-va-timeline><ol><li aria-current="step"><span>01</span><b>Получено</b><small>Запрос принят</small></li><li ><span>02</span><b>В работе</b><small>Подготовка образца</small></li><li ><span>03</span><b>Готово</b><small>Можно просмотреть</small></li></ol><p role="status">Текущий этап: Получено</p><button class="ui-btn" type="button" data-va-action="timeline">Следующий этап</button></div>Очереди файлов2 варианта
Список файлов
Добавление, удаление и ручное моделирование обработки.
Файлы остаются на устройстве; читаются только имена и размеры. Максимум 5 файлов.
Очередь пуста
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-queue="list"><label class="ui-label" for="va-files-list">Добавить файлы в локальную очередь</label><input class="ui-field" id="va-files-list" type="file" multiple><p class="ui-muted">Файлы остаются на устройстве; читаются только имена и размеры. Максимум 5 файлов.</p><ul class="va-file-list"></ul><p role="status">Очередь пуста</p><button class="ui-btn" type="button" data-va-action="queue-add">Добавить демофайл</button> <button class="ui-btn" type="button" data-va-action="queue-clear">Очистить</button></div>Карточки файлов
Тот же локальный сценарий в карточной раскладке.
Файлы остаются на устройстве; читаются только имена и размеры. Максимум 5 файлов.
Очередь пуста
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-queue="cards"><label class="ui-label" for="va-files-cards">Добавить файлы в локальную очередь</label><input class="ui-field" id="va-files-cards" type="file" multiple><p class="ui-muted">Файлы остаются на устройстве; читаются только имена и размеры. Максимум 5 файлов.</p><ul class="va-file-list"></ul><p role="status">Очередь пуста</p><button class="ui-btn" type="button" data-va-action="queue-add">Добавить демофайл</button> <button class="ui-btn" type="button" data-va-action="queue-clear">Очистить</button></div>Центр уведомлений2 варианта
Непрочитанные события
Прочитать одно или сразу все, счётчик синхронизируется.
2 непрочитанных
- Образец готовСегодня · демособытие
- Новый комментарийСегодня · демособытие
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-notices="inbox"><p role="status">2 непрочитанных</p><ul class="va-notices"><li><strong>Образец готов</strong><span>Сегодня · демособытие</span><button class="ui-btn" type="button" data-va-action="read">Прочитано</button></li><li><strong>Новый комментарий</strong><span>Сегодня · демособытие</span><button class="ui-btn" type="button" data-va-action="read">Прочитано</button></li></ul><button class="ui-btn" type="button" data-va-action="read-all">Прочитать всё</button></div>Удаление с отменой
Убрать последнее сообщение и восстановить его.
2 непрочитанных
- Образец готовСегодня · демособытие
- Новый комментарийСегодня · демособытие
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-notices="undo"><p role="status">2 непрочитанных</p><ul class="va-notices"><li><strong>Образец готов</strong><span>Сегодня · демособытие</span><button class="ui-btn" type="button" data-va-action="read">Прочитано</button></li><li><strong>Новый комментарий</strong><span>Сегодня · демособытие</span><button class="ui-btn" type="button" data-va-action="read">Прочитано</button></li></ul><button class="ui-btn" type="button" data-va-action="remove-notice">Убрать последнее</button> <button class="ui-btn" type="button" data-va-action="undo-notice">Вернуть</button></div>Оценки и рейтинги2 варианта
Оценка звёздами
Нативная radio-группа с текстовой альтернативой.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<fieldset class="va-rating"><legend>Оцените образец: от 1 до 5</legend><label><input type="radio" name="va-stars" value="1"><span aria-hidden="true">★</span><span class="sr-only">1 из 5</span></label><label><input type="radio" name="va-stars" value="2"><span aria-hidden="true">★★</span><span class="sr-only">2 из 5</span></label><label><input type="radio" name="va-stars" value="3"><span aria-hidden="true">★★★</span><span class="sr-only">3 из 5</span></label><label><input type="radio" name="va-stars" value="4"><span aria-hidden="true">★★★★</span><span class="sr-only">4 из 5</span></label><label><input type="radio" name="va-stars" value="5"><span aria-hidden="true">★★★★★</span><span class="sr-only">5 из 5</span></label><p role="status">Оценка не выбрана</p></fieldset>Числовая оценка
Непрерывный выбор 0–10 без выдуманных отзывов.
Учебная оценка сохраняется только на открытой странице.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-score><label class="ui-label" for="va-score">Оценка удобства, от 0 до 10</label><input id="va-score" type="range" min="0" max="10" value="7"><output for="va-score">7 из 10</output><p class="ui-muted">Учебная оценка сохраняется только на открытой странице.</p></div>Диапазоны значений2 варианта
Диапазон цены
Две границы в рублях; это демоданные, не предложение.
Два связанных нативных ползунка; минимум не превышает максимум.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-dual="price"><label class="ui-label" for="va-min-price">Минимальная цена, ₽</label><input id="va-min-price" data-va-min type="range" min="0" max="10000" step="100" value="2000"><label class="ui-label" for="va-max-price">Максимальная цена, ₽</label><input id="va-max-price" data-va-max type="range" min="0" max="10000" step="100" value="8000"><output>2000–8000 ₽</output><p class="ui-muted">Два связанных нативных ползунка; минимум не превышает максимум.</p></div>Диапазон процентов
Независимые ручки с ограничением пересечения.
Два связанных нативных ползунка; минимум не превышает максимум.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-dual="percent"><label class="ui-label" for="va-min-percent">Начало диапазона, %</label><input id="va-min-percent" data-va-min type="range" min="0" max="100" step="1" value="20"><label class="ui-label" for="va-max-percent">Конец диапазона, %</label><input id="va-max-percent" data-va-max type="range" min="0" max="100" step="1" value="80"><output>20–80%</output><p class="ui-muted">Два связанных нативных ползунка; минимум не превышает максимум.</p></div>Изменяемые панели2 варианта
Две колонки
Нативный ползунок управляет пропорцией колонок.
Навигация
Материал
Композиция
Состояние
Просмотр
Размер панелей меняется без потери содержимого. Ползунок доступен с клавиатуры.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-split="horizontal"><label class="ui-label" for="va-split-horizontal">Ширина левой панели, 25–75%</label><input id="va-split-horizontal" type="range" min="25" max="75" value="40"><output>40 / 60%</output><div class="va-split horizontal" style="--split:40%"><div tabindex="0" role="region" aria-label="Панель навигации"><strong>Навигация</strong><p>Материал<br>Композиция<br>Состояние</p></div><div tabindex="0" role="region" aria-label="Панель просмотра"><strong>Просмотр</strong><p>Размер панелей меняется без потери содержимого. Ползунок доступен с клавиатуры.</p></div></div><button class="ui-btn" type="button" data-va-action="split-reset">Сбросить пропорции</button></div>Две строки
Изменение высоты панелей, содержимое прокручивается.
Навигация
Материал
Композиция
Состояние
Просмотр
Размер панелей меняется без потери содержимого. Ползунок доступен с клавиатуры.
HTML образца
Используется со стилями variation-atlas.css и локальным поведением variation-atlas.js. Это пример, не готовый backend.
<div data-va-split="vertical"><label class="ui-label" for="va-split-vertical">Высота верхней панели, 25–75%</label><input id="va-split-vertical" type="range" min="25" max="75" value="40"><output>40 / 60%</output><div class="va-split vertical" style="--split:40%"><div tabindex="0" role="region" aria-label="Панель навигации"><strong>Навигация</strong><p>Материал<br>Композиция<br>Состояние</p></div><div tabindex="0" role="region" aria-label="Панель просмотра"><strong>Просмотр</strong><p>Размер панелей меняется без потери содержимого. Ползунок доступен с клавиатуры.</p></div></div><button class="ui-btn" type="button" data-va-action="split-reset">Сбросить пропорции</button></div>HTML / семантика / состояния
Анатомия
интерфейса.
От тега до рабочего контрола. 113 HTML-элементов, 2 соседних пространства имён, 22 типа input и 12 групп состояний. Раскройте строку: слева образец, справа рецепт.
01Управление
15 элементов
<button>Кнопка действияЖивой HTML
Клавиши Enter и Space. Текст объясняет действие; type задаётся явно.
<button type="button" data-ha-action>Применить материал</button><output data-ha-feedback aria-live="polite"></output><input>Однострочное полеЖивой HTML
Все 22 типа разобраны отдельно ниже. Placeholder не заменяет label.
<label>Название материала<input type="text" placeholder="Например, Arctic" maxlength="60"></label><select>Нативный селекторЖивой HTML
Список и его клавиатура принадлежат браузеру. На телефоне интерфейс может отличаться.
<label>Материал<select><option>Frost</option><option>Smoke</option><option>Liquid</option></select></label><option>Вариант выбораЖивой HTML
value — данные; выбранное и недоступное состояния задаются явно.
<label>Отделка<select><option value="matte">Матовая</option><option value="clear" selected>Прозрачная</option><option disabled>Недоступная</option></select></label><optgroup>Группа вариантовЖивой HTML
Группа подписывается label; это не отдельное выбираемое значение.
<label>Семейство<select><optgroup label="2D плёнка"><option>Frost</option><option>Smoke</option></optgroup><optgroup label="3D край"><option>Liquid</option></optgroup></select></label><datalist>Поле с подсказкамиЖивой HTML
Подсказки допускают произвольный ввод. Это не обязательный выбор из списка.
<label>Акцент<input list="ha-colors" placeholder="Введите цвет"></label><datalist id="ha-colors"><option value="Лаймовый"><option value="Циановый"><option value="Розовый"></datalist><textarea>Многострочный вводЖивой HTML
Высота изменяется пользователем. Длинный текст переносится.
<label>Комментарий<textarea rows="3" placeholder="Опишите материал"></textarea></label><label>Связь подписи с полемЖивой HTML
Используйте вложение либо точную связь for/id.
<label for="ha-label-sample">Нажмите на эту подпись</label><input id="ha-label-sample" placeholder="Фокус перейдёт сюда"><fieldset>Группа контроловЖивой HTML
Общий смысл группы передаётся через legend.
<fieldset><legend>Толщина стекла</legend><label><input type="radio" name="ha-thickness" checked> 2D плёнка</label><label><input type="radio" name="ha-thickness"> 3D край</label></fieldset><legend>Название группыЖивой HTML
Подпись остаётся видимой, даже когда значение ещё не выбрано.
<fieldset><legend>Экспортировать слои</legend><label><input type="checkbox" checked> Поверхность</label><label><input type="checkbox"> Блики</label></fieldset><form>Форма и проверкаЖивой HTML
Локальная демо-валидация. Данные не отправляются и не сохраняются.
<form data-ha-form method="dialog"><label>Демо-почта<input type="email" required placeholder="name@example.com"></label><button type="submit">Проверить</button><output data-ha-feedback aria-live="polite"></output></form><output>Вычисленное значениеЖивой HTML
Обновляется по input; связь output for сохраняет смысл результата.
<label>Диффузия<input id="ha-output-range" type="range" min="0" max="24" value="14" data-ha-output></label><output for="ha-output-range" data-ha-range-value>14 px</output><meter>Измеренная величинаЖивой HTML
Известная шкала с границами. Это не процесс загрузки.
<label>Заполнение слоя <meter min="0" max="100" low="25" high="80" optimum="60" value="62">62%</meter></label><progress>Ход задачиЖивой HTML
68 из 100 · статический пример
Число — учебное состояние, а не текущая загрузка.
<label>Подготовка образца <progress max="100" value="68">68%</progress></label><span>68 из 100 · статический пример</span><selectedcontent>Настраиваемый selectРецепт
Настраиваемый select
Код без встраивания в документЕсть в текущем стандарте, но поддержка отдельных возможностей ограничена. Нужны проверка браузера, appearance: base-select и обычный select как fallback.
<select>
<button><selectedcontent></selectedcontent></button>
<option>Frost</option>
</select>02Раскрытие
3 элементов
<details>Нативное раскрытиеЖивой HTML
Что делает стекло выразительным?
Цвет под поверхностью, диффузия и локальный свет на 3D-краю.
Клавиатура работает без JavaScript. Содержимое раскрывается без анимации высоты.
<details><summary>Что делает стекло выразительным?</summary><p>Цвет под поверхностью, диффузия и локальный свет на 3D-краю.</p></details><summary>Заголовок раскрытияЖивой HTML
Показать свойства
- Материал
- 2D Frost
Первый summary внутри details; не вкладывайте в него другие кнопки.
<details><summary>Показать свойства</summary><dl><dt>Материал</dt><dd>2D Frost</dd></dl></details><dialog>Модальный диалогЖивой HTML
showModal, Escape, возврат фокуса и блокировка фона. Без JS показан рецепт.
<button type="button" data-ha-dialog-open>Открыть диалог</button><dialog class="ha-modal" id="ha-native-dialog" aria-labelledby="ha-dialog-title"><h4 id="ha-dialog-title">Сохранить материал?</h4><p>Это локальный учебный диалог.</p><form method="dialog"><button value="cancel">Закрыть</button><button value="save">Готово</button></form></dialog>03Секции
10 элементов
<header>Вступление секцииЖивой HTML
Поверхности со светом
Содержательное вступление; материал не меняет семантику.
<header><small>ОПТИЧЕСКАЯ ЛАБОРАТОРИЯ</small><p><strong>Поверхности со светом</strong></p></header><main>Основное содержимоеРецепт
Основное содержимое
Код без встраивания в документОдна видимая основная область страницы. В атласе не создаём вложенный main.
<main id="content">
<h1>Название страницы</h1>
<section>…</section>
</main><section>Тематический разделЖивой HTML
Оптика
Самостоятельная тема с явным заголовком.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<section><h4>Оптика</h4><p>Самостоятельная тема с явным заголовком.</p></section><article>Самостоятельная карточкаЖивой HTML
Frost / 01
Матовая поверхность с мягкой диффузией.
Образец коллекцииСемантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<article><h4>Frost / 01</h4><p>Матовая поверхность с мягкой диффузией.</p><small>Образец коллекции</small></article><aside>Сопутствующая информацияЖивой HTML
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<aside aria-label="Подсказка к образцу"><strong>На заметку</strong><p>Blur без цветного фона почти незаметен.</p></aside><address>Контактная информацияЖивой HTML
Демо-студия LUMA
studio@example.com
studio@example.com
Демонстрационный адрес на example.com, не контакт проекта.
<address>Демо-студия LUMA<br><a href="mailto:studio@example.com">studio@example.com</a></address><search>Область поискаЖивой HTML
Семантическая область; фильтрация требует отдельной логики и здесь не подключена.
<search><label>Поиск в образце<input type="search" placeholder="Название слоя"></label></search><hgroup>Заголовок с подзаголовкомЖивой HTML
Коллекция / 01
Арктический свет
Серия матовых поверхностей
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<hgroup><p>Коллекция / 01</p><h4>Арктический свет</h4><p>Серия матовых поверхностей</p></hgroup>04Заголовки
6 элементов
<h1>Заголовок уровня 1Живой HTML
Главная идея
Уровень отражает структуру документа, а размер задаётся CSS.
<h1 class="ha-heading-example">Главная идея</h1><h2>Заголовок уровня 2Живой HTML
Раздел коллекции
Уровень отражает структуру документа, а размер задаётся CSS.
<h2 class="ha-heading-example">Раздел коллекции</h2><h3>Заголовок уровня 3Живой HTML
Семейство материала
Уровень отражает структуру документа, а размер задаётся CSS.
<h3 class="ha-heading-example">Семейство материала</h3><h4>Заголовок уровня 4Живой HTML
Вариант поверхности
Уровень отражает структуру документа, а размер задаётся CSS.
<h4 class="ha-heading-example">Вариант поверхности</h4><h5>Заголовок уровня 5Живой HTML
Деталь образца
Уровень отражает структуру документа, а размер задаётся CSS.
<h5 class="ha-heading-example">Деталь образца</h5><h6>Заголовок уровня 6Живой HTML
Примечание к детали
Уровень отражает структуру документа, а размер задаётся CSS.
<h6 class="ha-heading-example">Примечание к детали</h6>05Блоки текста
7 элементов
<p>АбзацЖивой HTML
Стекло становится видимым там, где свет встречается с цветом. Текст остаётся на спокойной поверхности.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<p>Стекло становится видимым там, где свет встречается с цветом. Текст остаётся на спокойной поверхности.</p><div>Универсальный контейнерЖивой HTML
Слой светаСлой материалаСлой содержания
Используйте, когда у группы нет более точной семантики.
<div class="ha-stack"><span>Слой света</span><span>Слой материала</span><span>Слой содержания</span></div><blockquote>Отдельная цитатаЖивой HTML
«Сначала ясная композиция, затем движение».
Авторский пример, не приписанная кому-либо цитата.
<blockquote><p>«Сначала ясная композиция, затем движение».</p><footer>Учебная фраза LUMA</footer></blockquote><pre>Форматированный блокЖивой HTML
surface light → diffusion edge → thickness
Пробелы сохраняются; длинная строка имеет собственную прокрутку.
<pre>surface
light → diffusion
edge → thickness</pre><hr>Тематический разрывЖивой HTML
Материал
Поведение
Разделение темы, не способ нарисовать любой декоративный бордер.
<p>Материал</p><hr><p>Поведение</p><figure>Иллюстрация с подписьюЖивой HTML
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="240" height="100" alt="Лаймовый круг за голубой стеклянной панелью"><figcaption>Цветная форма за плёнкой</figcaption></figure><figcaption>Подпись иллюстрацииЖивой HTML
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="240" height="100" alt="Лаймовый круг за голубой стеклянной панелью"><figcaption>01 · Направление света слева</figcaption></figure>06Списки
7 элементов
<ul>Неупорядоченный списокЖивой HTML
- Прозрачность
- Диффузия
- Направленный свет
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<ul><li>Прозрачность</li><li>Диффузия</li><li>Направленный свет</li></ul><ol>ПоследовательностьЖивой HTML
- Выбрать материал
- Настроить свет
- Проверить текст
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<ol><li>Выбрать материал</li><li>Настроить свет</li><li>Проверить текст</li></ol><li>Элемент спискаЖивой HTML
- Frost — плоская плёнка
- Liquid — объёмный край
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<ul><li><strong>Frost</strong> — плоская плёнка</li><li><strong>Liquid</strong> — объёмный край</li></ul><dl>Пары термин — значениеЖивой HTML
- Frost
- Матовая плёнка
- Liquid
- Оптическая толщина
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<dl><dt>Frost</dt><dd>Матовая плёнка</dd><dt>Liquid</dt><dd>Оптическая толщина</dd></dl><dt>ТерминЖивой HTML
- Диффузия
- Рассеивание фона под поверхностью.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<dl><dt>Диффузия</dt><dd>Рассеивание фона под поверхностью.</dd></dl><dd>Описание терминаЖивой HTML
- Контраст
- Проверяется на итоговом составном фоне.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<dl><dt>Контраст</dt><dd>Проверяется на итоговом составном фоне.</dd></dl>07Строчная семантика
31 элементов
<a>СсылкаЖивой HTML
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<a href="#ha-states">Перейти к состояниям ↗</a><abbr>СокращениеЖивой HTML
WAAPI — Web Animations API
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<abbr title="Web Animations API">WAAPI</abbr> — Web Animations API<b>Ключевое словоЖивой HTML
Материал Frost в новой коллекции.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Материал <b>Frost</b> в новой коллекции.<strong>ВажностьЖивой HTML
Не теряйте видимый фокус.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<strong>Не теряйте видимый фокус.</strong><em>Смысловое ударениеЖивой HTML
Сначала читаемость, затем эффект.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Сначала <em>читаемость</em>, затем эффект.<i>Иной голосЖивой HTML
Эффект glassmorphism в интерфейсе.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Эффект <i lang="en">glassmorphism</i> в интерфейсе.<u>АннотацияЖивой HTML
В макете: несогласованое написание.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
В макете: <u>несогласованое</u> написание.<s>НеактуальноеЖивой HTML
Режим: полная прозрачность → матовая плёнка.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Режим: <s>полная прозрачность</s> → матовая плёнка.<small>Второстепенный текстЖивой HTML
Учебный образец. Значения условные.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<small>Учебный образец. Значения условные.</small><mark>Выделение совпаденияЖивой HTML
Поиск: стекло в светлой теме.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Поиск: <mark>стекло</mark> в светлой теме.<span>Строчная группаЖивой HTML
Состояние: готово
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Состояние: <span class="ha-badge">готово</span><br>Смысловой переносЖивой HTML
Линия света
на матовой поверхности
на матовой поверхности
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Линия света<br>на матовой поверхности<wbr>Возможный переносЖивой HTML
glassmaterialcollectionpreview
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
glass<wbr>material<wbr>collection<wbr>preview<code>Фрагмент кодаЖивой HTML
backdrop-filter: blur(14px)Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<code>backdrop-filter: blur(14px)</code><kbd>Клавиатурный вводЖивой HTML
Нажмите Tab, затем Enter.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Нажмите <kbd>Tab</kbd>, затем <kbd>Enter</kbd>.<samp>Ответ программыЖивой HTML
Образец готов · 0 ошибок
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<samp>Образец готов · 0 ошибок</samp><var>ПеременнаяЖивой HTML
Толщина: t = 3
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Толщина: <var>t</var> = 3<sub>Нижний индексЖивой HTML
H2O
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
H<sub>2</sub>O<sup>Верхний индексЖивой HTML
Площадь: 16 м2
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Площадь: 16 м<sup>2</sup><q>Строчная цитатаЖивой HTML
Правило:
Один владелец свойства.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Правило: <q>Один владелец свойства</q>.<cite>Название произведенияЖивой HTML
Оптическая лаборатория LUMA
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<cite>Оптическая лаборатория LUMA</cite><dfn>Определяемый терминЖивой HTML
2D-плёнка — поверхность без оптической толщины.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<dfn>2D-плёнка</dfn> — поверхность без оптической толщины.<data>Машинное значениеЖивой HTML
Арктический свет
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<data value="frost-01">Арктический свет</data><time>Дата или времяЖивой HTML
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<time datetime="2026-10-21">21 октября 2026</time><bdi>Изоляция направленияЖивой HTML
Автор: نور · слой 01
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
Автор: <bdi>نور</bdi> · слой 01<bdo>Направление текстаЖивой HTML
ABC 123
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<bdo dir="rtl">ABC 123</bdo><ruby>Аннотация над текстомЖивой HTML
光
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<ruby>光<rp>(</rp><rt>свет</rt><rp>)</rp></ruby><rt>Текст аннотацииЖивой HTML
光
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<ruby>光<rp>(</rp><rt>свет</rt><rp>)</rp></ruby><rp>Резервные скобкиЖивой HTML
光
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<ruby>光<rp>(</rp><rt>свет</rt><rp>)</rp></ruby><ins>Добавленный текстЖивой HTML
Добавлен локальный блик.
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<ins datetime="2026-10-21">Добавлен локальный блик.</ins><del>Удалённый текстЖивой HTML
Семантический элемент в авторском образце. Стекло задаётся CSS и не меняет назначение тега.
<del datetime="2026-10-21">Равномерная обводка</del>08Таблицы
10 элементов
<table>Таблица данныхЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><caption>Название таблицыЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><thead>Шапка таблицыЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><tbody>Основные строкиЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><tfoot>Итоговые строкиЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><tr>СтрокаЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><th>Заголовочная ячейкаЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><td>Ячейка данныхЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><colgroup>Группа столбцовЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table><col>Оформление столбцаЖивой HTML
| Слой | Размытие |
|---|---|
| Плёнка | 14 px |
| Режим | 2D |
Один связный табличный образец показывает контекст тега. Не использовать таблицу для раскладки страницы.
<table><caption>Оптические слои</caption><colgroup><col class="ha-tint"><col></colgroup><thead><tr><th scope="col">Слой</th><th scope="col">Размытие</th></tr></thead><tbody><tr><th scope="row">Плёнка</th><td>14 px</td></tr></tbody><tfoot><tr><th scope="row">Режим</th><td>2D</td></tr></tfoot></table>09Медиа
8 элементов
<img>ИзображениеЖивой HTML
Оригинальный векторный образец внутри data URL. Смысловой alt и явные размеры.
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="240" height="100" alt="Лаймовый круг за голубой стеклянной панелью"><picture>Адаптивное изображениеЖивой HTML
Один авторский asset в двух точках выбора; отдельный art direction — задача проекта.
<picture><source media="(min-width: 700px)" srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="240" height="100" alt="Лаймовый круг за голубой стеклянной панелью"></picture><source>Источник медиаЖивой HTML
Не рисует самостоятельную поверхность; работает внутри picture/audio/video.
<picture><source type="image/svg+xml" srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="240" height="100" alt="Лаймовый круг за голубой стеклянной панелью"></picture><audio>АудиоплеерКонтролы без медиа
Контролы браузера; аудиофайл не подключён.
Визуальный образец контролов, не воспроизведение готового аудио.
<audio controls preload="none" aria-label="Учебный аудиоплеер"></audio><p class="ha-hint">Контролы браузера; аудиофайл не подключён.</p><video>ВидеоплеерКонтролы без медиа
Постер; видеофайл не подключён.
Не запускайте автозвук. Подготовьте субтитры и доступный fallback.
<video controls preload="none" width="240" height="100" poster="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" aria-label="Учебный видеоплеер"></video><p class="ha-hint">Постер; видеофайл не подключён.</p><track>СубтитрыРецепт
Субтитры
Код без встраивания в документРецепт подключения WebVTT. Файлов film.webm/captions.vtt в демо нет.
<video controls>
<source src="film.webm" type="video/webm">
<track kind="captions" src="captions.vtt" srclang="ru" label="Русский">
</video><map>Карта ссылок изображенияЖивой HTML
Активна область круга; нужна текстовая альтернатива.
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="240" height="100" usemap="#ha-map" alt="Лаймовый круг за голубой стеклянной панелью"><map name="ha-map"><area shape="circle" coords="80,50,34" href="#ha-states" alt="К состояниям элементов"></map><area>Интерактивная областьЖивой HTML
Активна область панели. Геометрия зависит от реального размера изображения.
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="240" height="100" usemap="#ha-area" alt="Лаймовый круг за голубой стеклянной панелью"><map name="ha-area"><area shape="rect" coords="95,22,205,80" href="#ha-states" alt="К состояниям элементов"></map>10Встраивание
6 элементов
<iframe>Изолированный документЖивой HTML
Учебный srcdoc с sandbox; доступ к внешним сервисам не нужен.
<iframe title="Изолированный учебный документ" sandbox srcdoc="<html lang=ru><body style='font:16px sans-serif;background:#d9f4ef;color:#15233c;padding:18px'><strong>Отдельный документ</strong><p>Без сети и скриптов</p></body></html>"></iframe><object>Встроенный объектЖивой HTML
Встроенное SVG собственного авторства; fallback остаётся в разметке.
<object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="240" height="100" aria-label="Векторный образец"><p>Цветная форма за плёнкой.</p></object><embed>Внешний встроенный ресурсРецепт
Внешний встроенный ресурс
Код без встраивания в документPDF не подключён. Предоставьте обычную ссылку на документ и проверьте просмотрщик.
<embed src="document.pdf" type="application/pdf" title="Описание материала"><canvas>Растровая сценаЖивой HTML
Скрипт рисует статичный образец один раз. Текстовая альтернатива не зависит от canvas.
<canvas width="240" height="100" data-ha-canvas role="img" aria-label="Два пересекающихся оптических слоя">Два пересекающихся оптических слоя.</canvas><svg>Векторная графикаДругой namespace
Корень SVG — отдельное пространство имён, не HTML-тег. Полный словарь SVG здесь не перечисляется.
<svg role="img" aria-label="Лаймовый круг и голубая панель" xmlns="http://www.w3.org/2000/svg" width="240" height="100" viewBox="0 0 240 100"><rect width="240" height="100" rx="18" fill="#15374b"/><circle cx="80" cy="50" r="34" fill="#a8ff62"/><rect x="95" y="22" width="110" height="58" rx="14" fill="#90eaff" fill-opacity=".55"/></svg><math>Математическая разметкаДругой namespace
Корень MathML — отдельное пространство имён, не HTML-тег.
<math aria-label="x в квадрате плюс y в квадрате"><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><msup><mi>y</mi><mn>2</mn></msup></mrow></math>11Документ и шаблоны
12 элементов
<html>Корень документаРецепт
Корень документа
Код без встраивания в документ<head>МетаданныеРецепт
Метаданные
Код без встраивания в документСодержит настройки документа; не карточка интерфейса.
<head>
<meta charset="utf-8">
<title>LUMA</title>
</head><body>Содержимое документаРецепт
Содержимое документа
Код без встраивания в документОдин body, без вложения второго body для компонента.
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body><title>Название вкладкиРецепт
Название вкладки
Код без встраивания в документНазвание страницы, не визуальный заголовок.
<title>Glass Atlas — элементы</title><meta>Настройки и описаниеРецепт
Настройки и описание
Код без встраивания в документМасштабирование пользователем остаётся доступным.
<meta name="viewport" content="width=device-width, initial-scale=1"><link>Связанный ресурсРецепт
Связанный ресурс
Код без встраивания в документПроверяйте пути относительно опубликованной страницы.
<link rel="stylesheet" href="./style.css"><style>Встроенный CSSРецепт
Встроенный CSS
Код без встраивания в документНе подменяйте стили всей страницы из примера компонента.
<style>
.surface { border: 0; }
</style><base>Базовый URLРецепт
Базовый URL
Код без встраивания в документМеняет разрешение всех относительных URL. В живой атлас не вставляется.
<base href="https://example.com/catalog/"><script>ПоведениеРецепт
Поведение
Код без встраивания в документСкрипты не должны быть условием чтения основной информации.
<script type="module" src="./interaction.js"></script><noscript>Резерв без JavaScriptРецепт
Резерв без JavaScript
Код без встраивания в документСодержимое проверяется с реально выключенным JS.
<noscript>Фильтрация недоступна; элементы перечислены ниже.</noscript><template>Инертный шаблонРецепт
Инертный шаблон
Код без встраивания в документНе отображается до клонирования content; это не скрытая интерактивная карточка.
<template id="material-template">
<article>Frost</article>
</template><slot>Точка вставки Web ComponentРецепт
Точка вставки Web Component
Код без встраивания в документРаботает внутри shadow root. Нужен host-компонент и проверка доступного имени.
<slot name="title">Материал</slot>Совпадений нет. Очистите поиск или выберите «Вся карта».
Каждый тип input.
22 нативных типа: форма и выбор, данные и время, действия. Пикеры зависят от браузера; файлы остаются на устройстве.
buttonКоманда
<input type="button" value="Применить" data-ha-action><output data-ha-feedback aria-live="polite"></output>checkboxФлажок
<label><input type="checkbox" checked> Включить цветную подложку</label>colorЦвет
<label>Цвет<input type="color" value="#a8ff62"></label>dateДата
<label>Дата<input type="date" value="2026-10-21"></label>datetime-localЛокальная дата и время
<label>Локальная дата и время<input type="datetime-local" value="2026-10-21T14:30"></label>emailПочта
<label>Почта<input type="email" placeholder="name@example.com"></label>fileФайл
<label>Файл<input type="file" accept="image/*"></label>hiddenСкрытое значение
Значение frost не видно. Hidden не является защитой данных.
<input type="hidden" name="material" value="frost"><p>Значение frost не видно. Hidden не является защитой данных.</p>imageКнопка-изображение
<form data-ha-form method="dialog"><input type="image" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22100%22%20viewBox%3D%220%200%20240%20100%22%3E%3Crect%20width%3D%22240%22%20height%3D%22100%22%20rx%3D%2218%22%20fill%3D%22%2315374b%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22%23a8ff62%22%2F%3E%3Crect%20x%3D%2295%22%20y%3D%2222%22%20width%3D%22110%22%20height%3D%2258%22%20rx%3D%2214%22%20fill%3D%22%2390eaff%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E" width="180" height="75" alt="Выбрать материал"><output data-ha-feedback aria-live="polite"></output></form>monthМесяц
<label>Месяц<input type="month" value="2026-10"></label>numberЧисло
<label>Число<input type="number" min="0" max="24" value="14"></label>passwordПароль
<label>Пароль<input type="password" autocomplete="new-password" placeholder="Учебное поле"></label>radioОдин из вариантов
<fieldset><legend>Радиокнопки</legend><label><input type="radio" name="ha-type-radio" checked> Frost</label><label><input type="radio" name="ha-type-radio"> Smoke</label></fieldset>rangeДиапазон
<label>Диапазон<input type="range" min="0" max="24" value="14"></label>resetСброс формы
<form data-ha-form method="dialog"><label>Образец<input value="Frost" name="sample"></label><input type="reset" value="Вернуть Frost"><output data-ha-feedback aria-live="polite"></output></form>searchПоиск
<label>Поиск<input type="search" placeholder="Найти поверхность"></label>submitОтправка формы
<form data-ha-form method="dialog"><label>Образец<input value="Frost" name="sample"></label><input type="submit" value="Проверить локально"><output data-ha-feedback aria-live="polite"></output></form>telТелефон
<label>Телефон<input type="tel" placeholder="+7 000 000-00-00"></label>textТекст
<label>Текст<input type="text" placeholder="Название слоя"></label>timeВремя
<label>Время<input type="time" value="14:30"></label>urlАдрес сайта
<label>Адрес сайта<input type="url" placeholder="https://example.com"></label>weekНеделя
<label>Неделя<input type="week" value="2026-W43"></label>Не только default.
Кнопки, селекторы и поля проверяются в состояниях: действие, выбор, фокус, ошибка и недоступность. Все действия ниже локальные.
Primary · secondary · quiet
Иерархия действия определяется смыслом. Neon — один главный акцент.
Toggle · icon · disabled
Toggle сохраняет имя и меняет aria-pressed. У icon-only есть доступная подпись.
Подготовка → готово
Реальный локальный конечный переход состояния; никакой сетевой операции.
Сегменты / один выбор
Нативные radio дают Tab + стрелки; обе подписи доступны на телефоне.
Несколько вариантов
Нативный multiple; при сложном поиске нужен отдельный combobox/listbox с полным клавиатурным контрактом.
Switch / on–off
Switch — два состояния; radio выбирает один вариант из набора.
Mixed checkbox
Начальное indeterminate задаётся JS.
Смешанное состояние — свойство DOM, не атрибут checked. После клика элемент становится обычным checkbox.
Required · readonly · disabled
Readonly остаётся доступным для фокуса и копирования; disabled — нет.
Ошибка и помощь
Введите название, чтобы продолжить. Учебное состояние ошибки.
Ошибка передаётся текстом и связью aria-describedby, а не только цветом.
Popover / подсказка
2D Frost
Плёнка без оптической толщины. Закрыть: Escape или касание снаружи.
Нативный popover доступен через click/touch/keyboard. Это не tooltip только на hover.
Текущая страница
aria-current обозначает место; ссылки сохраняют обычную навигацию.
Keyboard / hover / active
Hover — только при наличии указателя. Focus-visible имеет функциональный контур и не нарушает запрет декоративной обводки стекла.
Границы карты · новые возможности и устаревшие теги
Основа — список conforming elements HTML Living Standard, сверенный 21.10.2026. selectedcontent показан как рецепт с проверкой поддержки. SVG и MathML вынесены отдельно; произвольные custom elements не образуют конечного списка.
Теги прошлого перечислены для распознавания старого кода, без живого исполнения: acronym applet basefont bgsound big blink center content dir font frame frameset image isindex keygen listing marquee menuitem multicol nextid nobr noembed noframes param plaintext rb rtc shadow spacer strike tt xmp. Не используйте их как новые компоненты.
Не включены в базовый счёт экспериментальные или нестандартные элементы fencedframe, geolocation, permission, portal. Перед применением проверяйте актуальный статус и поддержку.
Tabs, combobox, tree, grid, menu-button, date-range и drag-select — составные паттерны, не новые HTML-теги. Их наличие в карте элементов не означает реализацию полного ARIA-поведения.
Основание карты: WHATWG · элементы · MDN · HTML · MDN · input. Дата сверки: 21.10.2026. Превью и тексты созданы для LUMA.
Motion library / 13 направлений
Движение
со смыслом.
39 авторских этюдов: от одного нажатия до композиции из нескольких слоёв. Прокрутка и slider работают напрямую. Остальные образцы показывают движение; они не заменяют готовые компоненты.
Один активный образец. Без фоновых циклов. 2D-плёнка и 3D-кромка — разные материалы.
39 образцов / 13 группВыберите образец
01Обратная связьДействие получает понятный ответ.02Вход и выходПоявление объясняет иерархию.03ПерестройкаСохраняем положение и контекст.04НавигацияПоказываем выбранное направление.05ПрокруткаДвижение связано с чтением.06ТипографикаСлова сохраняют смысл и целостность.07SVG и траекторииЛиния становится рассказом.08ДанныеИзменение видно, число остаётся доступным.09ОжиданиеКонечные этюды состояний загрузки.10ЖестыПрямое управление и его альтернативы.11Свет и стеклоМатериал раскрывается движением света.12ОбъёмСлои показывают расстояние.13ХореографияНесколько действий в одном ритме.
01
Обратная связь
Действие получает понятный ответ.
WAAPI · 220 мс
Тактильное нажатие
Подтверждает контакт, не смещая соседей.
Рецепт движения
- HTML / применение
- button · :active
- Триггер в продукте
- Нажатие кнопки
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 220 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 540 мс
Подтверждение
Рисует понятный знак завершения.
Рецепт движения
- HTML / применение
- input checkbox · status
- Триггер в продукте
- Успешное действие
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · stroke-dashoffset
- Ритм
- 540 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 360 мс
Мягкая коррекция
Короткое отклонение привлекает внимание к ошибке.
Рецепт движения
- HTML / применение
- input · aria-invalid
- Триггер в продукте
- Ошибка валидации
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 360 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
02
Вход и выход
Появление объясняет иерархию.
WAAPI · 480 мс
Вход с подъёмом
Связывает новый слой с точкой появления.
Рецепт движения
- HTML / применение
- dialog · popover
- Триггер в продукте
- Открытие слоя
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 480 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1100 мс
Выход и возврат
Показывает уход без внезапного обрыва.
Рецепт движения
- HTML / применение
- toast · dialog
- Триггер в продукте
- Закрытие; здесь полный цикл
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1100 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 720 мс
Раскрытие окна
Открывает композицию от опорной стороны.
Рецепт движения
- HTML / применение
- figure · section
- Триггер в продукте
- Первое появление
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · clip-path
- Ритм
- 720 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
03
Перестройка
Сохраняем положение и контекст.
WAAPI · 800 мс
Смена порядка
Сохраняет идентичность элементов при сортировке.
Рецепт движения
- HTML / применение
- ol · li
- Триггер в продукте
- Сортировка; схема перестановки
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 800 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 650 мс
Раскрытие содержимого
Поясняет связь заголовка и дополнительных строк.
Рецепт движения
- HTML / применение
- details · summary
- Триггер в продукте
- Раскрытие; визуальная схема
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 650 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1000 мс
Общий элемент
Один объект связывает компактное и подробное состояние.
Рецепт движения
- HTML / применение
- article · dialog
- Триггер в продукте
- Переход карточка → деталь; схема
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + border-radius
- Ритм
- 1000 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
05
Прокрутка
Движение связано с чтением.
01 / Начало
Прокрутите этот
небольшой текст.
Шкала следует
за чтением.
02 / Середина
Движением
управляете вы.
03 / Конец
Прямое управление · live
Прогресс чтения
Настоящая прокрутка внутри образца управляет шкалой.
Рецепт движения
- HTML / применение
- article · progress
- Триггер в продукте
- Колесо, touch, клавиши; live
- В образце
- Прямое взаимодействие; кнопка задаёт конечную позицию.
- Владелец / свойства
- DOM listener · scrollTop → scaleX
- Ритм
- Следует вводу пользователя, без инерции и autoplay.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1600 мс
Разная скорость слоёв
Разделяет ближний и дальний планы.
Рецепт движения
- HTML / применение
- figure · decorative layers
- Триггер в продукте
- Сценарий прокрутки моделируется replay
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1600 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1500 мс
Закрепление раздела
Иллюстрирует остановку заголовка при движении текста.
Рецепт движения
- HTML / применение
- section · heading
- Триггер в продукте
- Сценарий sticky моделируется replay
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1500 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
06
Типографика
Слова сохраняют смысл и целостность.
WAAPI · 1000 мс
Последовательность слов
Ведёт взгляд по фразе без разбивки графем.
Рецепт движения
- HTML / применение
- h2 · span
- Триггер в продукте
- Первое появление заголовка
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1000 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 750 мс
Смысловое подчёркивание
Выделяет одну важную часть фразы.
Рецепт движения
- HTML / применение
- a · strong
- Триггер в продукте
- Выбор или фокус; схема
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 750 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1000 мс
Смена подписи
Сохраняет место при замене короткого сообщения.
Рецепт движения
- HTML / применение
- output · status
- Триггер в продукте
- Изменение подписи; схема
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1000 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
07
SVG и траектории
Линия становится рассказом.
WAAPI · 1200 мс
Рисование маршрута
Последовательно открывает связь между точками.
Рецепт движения
- HTML / применение
- svg · path
- Триггер в продукте
- Раскрытие схемы
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · stroke-dashoffset
- Ритм
- 1200 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1500 мс
Движение по пути
Проводит маркер по конечной траектории.
Рецепт движения
- HTML / применение
- svg · circle
- Триггер в продукте
- Объяснение направления
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1500 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 900 мс
Изменение силуэта
Связывает два состояния простой формы.
Рецепт движения
- HTML / применение
- svg · rect
- Триггер в продукте
- Смена состояния; CSS/WAAPI
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + rx
- Ритм
- 900 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
08
Данные
Изменение видно, число остаётся доступным.
WAAPI · 1000 мс
Рост столбцов
Делает соотношение величин видимым.
Рецепт движения
- HTML / применение
- figure · figcaption
- Триггер в продукте
- Обновление данных
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1000 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 900 мс
Роллер числа
Сохраняет позицию цифр при изменении значения.
Рецепт движения
- HTML / применение
- output · data
- Триггер в продукте
- Изменение показателя; демоданные
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 900 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1100 мс
Кольцевая шкала
Выделяет завершённую долю.
Рецепт движения
- HTML / применение
- svg · progress
- Триггер в продукте
- Обновление прогресса
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · stroke-dashoffset
- Ритм
- 1100 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
09
Ожидание
Конечные этюды состояний загрузки.
WAAPI · 1400 мс
Скелет → содержание
Меняет ожидание на готовые строки без сдвига.
Рецепт движения
- HTML / применение
- article · aria-busy
- Триггер в продукте
- Завершение загрузки; схема
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · opacity
- Ритм
- 1400 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1400 мс
Ритм ожидания
Даёт короткий сигнал активного процесса.
Рецепт движения
- HTML / применение
- status · span
- Триггер в продукте
- Один конечный цикл
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1400 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1700 мс
Определённый прогресс
Показывает завершение измеряемой операции.
Рецепт движения
- HTML / применение
- progress · output
- Триггер в продукте
- Демонстрационный прогресс
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1700 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
10
Жесты
Прямое управление и его альтернативы.
↔
Тяните · ← → · Home / EndПрямое управление · live
Прямое перетаскивание
Настоящий горизонтальный slider: pointer и клавиатура.
Рецепт движения
- HTML / применение
- slider · input range
- Триггер в продукте
- Тянуть; ← → Home End; live
- В образце
- Прямое взаимодействие; кнопка задаёт конечную позицию.
- Владелец / свойства
- DOM listener · pointer → translateX
- Ритм
- Следует вводу пользователя, без инерции и autoplay.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1100 мс
Возврат к позиции
Поясняет выбор ближайшего устойчивого состояния.
Рецепт движения
- HTML / применение
- carousel · list
- Триггер в продукте
- Отпускание; replay траектории
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1100 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1200 мс
Смахивание карточки
Показывает направление завершения действия.
Рецепт движения
- HTML / применение
- article · list
- Триггер в продукте
- Смахивание; replay траектории
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1200 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
11
Свет и стекло
Материал раскрывается движением света.
WAAPI · 1400 мс
Блик на 3D-кромке
Локальный свет показывает толщину без общего outline.
Рецепт движения
- HTML / применение
- 3D glass surface
- Триггер в продукте
- Короткое световое раскрытие
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1400 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1800 мс
Цвет за 2D-плёнкой
Объект меняет положение за матовой поверхностью.
Рецепт движения
- HTML / применение
- 2D glass surface
- Триггер в продукте
- Материальный этюд
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1800 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1300 мс
Разделение спектра
Два цветных отсвета отделяются у края.
Рецепт движения
- HTML / применение
- 3D optical accent
- Триггер в продукте
- Акцент материала
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1300 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
12
Объём
Слои показывают расстояние.
WAAPI · 1400 мс
Наклон плоскости
Небольшой поворот объясняет ориентацию поверхности.
Рецепт движения
- HTML / применение
- article · figure
- Триггер в продукте
- Replay пространственного наклона
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1400 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1500 мс
Разбор слоёв
Разводит перекрывающиеся плоскости по глубине.
Рецепт движения
- HTML / применение
- layered UI
- Триггер в продукте
- Объяснение структуры
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform
- Ритм
- 1500 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1200 мс
Смена переднего плана
Переводит внимание между слоями без анимации blur.
Рецепт движения
- HTML / применение
- figure · layered UI
- Триггер в продукте
- Выбор приоритетного слоя
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1200 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
13
Хореография
Несколько действий в одном ритме.
WAAPI · 1100 мс
Каскад карточек
Обозначает порядок нескольких равнозначных объектов.
Рецепт движения
- HTML / применение
- ul · li
- Триггер в продукте
- Открытие группы
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1100 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1600 мс
Процесс по шагам
Передаёт импульс от одного этапа к следующему.
Рецепт движения
- HTML / применение
- ol · progress
- Триггер в продукте
- Объяснение процесса
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1600 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
WAAPI · 1800 мс
Сборка композиции
Соединяет материал, заголовок и действие.
Рецепт движения
- HTML / применение
- section · h1 · button
- Триггер в продукте
- Однократное вступление
- В образце
- Кнопка replay; визуальный сценарий, не полная логика компонента.
- Владелец / свойства
- WAAPI · transform + opacity
- Ритм
- 1800 мс; cubic-bezier(.22,1,.36,1); конечный этюд.
- Прерывание
- Новый replay, фильтр, stop, уход с экрана, скрытие вкладки и смена reduced отменяют активный этюд.
- Reduced substitute
- Читаемый статичный кадр без opacity, stagger и перемещения. Прямой slider и шкала остаются функциональными.
- Cleanup
- Animation.cancel(), снятие pointer capture, остановка прокрутки; observer отключается на pagehide и возвращается на pageshow.
Подходящих движений нет. Измените запрос или группу.
Примеры используют CSS, Web Animations API и нативные события. Физическая рефракция, полноценная spring-физика, scroll pinning и gesture recognizer не заявлены. Web Animations API ↗
Карта композиций
Каждому элементу —
своя роль.
48 авторских композиций показывают стекло в интерфейсе. Нативная семантика и состояния раскрыты выше; серверные интеграции, платежи и WebGL остаются за пределами демо.
Основа / Есть связанный live-пример
Тема и акцент
Две самостоятельные палитры и один локальный акцент.
Основа / Есть связанный live-пример
Плёнка, кромка, глубина
Тонировка держит текст; blur отделяет задний план.
Основа / Визуальный рецепт
Типографика и знаки
Кириллица, ясная шкала и спокойная поверхность чтения.
Композиция / Есть связанный live-пример
Контейнер и сетка
Один ритм полей, адаптивные колонки без скрытого overflow.
Композиция / Есть связанный live-пример
Hero и продукт
Один оптический объект рядом с главным сообщением.
Композиция / Есть связанный live-пример
Features и bento
Контент задаёт размеры; стекло выделяет нужный слой.
Композиция / Есть связанный live-пример
Процесс и timeline
Этапы читаются в естественном порядке без scroll-зависимости.
Навигация / Есть связанный live-пример
Header и sticky nav
Компактная стеклянная панель, видимые текущие действия.
Навигация / Есть связанный live-пример
Мобильное меню
Вертикальные ссылки, явное раскрытие и закрытие Escape.
Навигация / Визуальный рецепт
Sidebar и оглавление
Тонкая граница, активный пункт и стабильная ширина.
Навигация / Визуальный рецепт
Breadcrumb
Местоположение важнее эффектов; последний пункт не ссылка.
Навигация / Визуальный рецепт
Tabs и segmented
Плотный активный индикатор вместо свечения текста.
Навигация / Визуальный рецепт
Pagination
Текущая страница названа; доступен переход без свайпа.
Навигация / Есть связанный live-пример
Footer и utility links
Спокойное завершение с полезными маршрутами.
Контент / Визуальный рецепт
Статья и код
Длинный текст на плотной плоскости, код доступен для копирования.
Контент / Есть связанный live-пример
Карточка и сетка
Кромка и тень отделяют объект; hover не прячет содержание.
Контент / Есть связанный live-пример
Accordion и FAQ
Нативный details сохраняет смысл и клавиатурное управление.
Контент / Визуальный рецепт
Цитата и testimonial
Только подтверждённая цитата; здесь явно учебный образец.
Контент / Визуальный рецепт
Логотипы и аватары
Реальные материалы с правами; здесь абстрактные образцы.
Контент / Визуальный рецепт
Badge, tag, chip
Акцент обозначает состояние, текст объясняет значение.
Формы / Есть связанный live-пример
Кнопка и icon action
Ясный глагол, контрастная заливка и самостоятельный focus.
Формы / Есть связанный live-пример
Input и textarea
Постоянная подпись, текст от 16 px, плотная внутренняя поверхность.
Формы / Визуальный рецепт
Select и combobox
Для сложного списка — проверенная headless-поведенческая база.
Формы / Есть связанный live-пример
Checkbox и radio
Состояние читается по отметке и подписи, не только по цвету.
Формы / Визуальный рецепт
Switch
Немедленное изменение настройки; семантика switch или checkbox.
Формы / Есть связанный live-пример
Slider и range
Нативный input range; значение видно и меняется клавиатурой.
Формы / Визуальный рецепт
Дата и время
Нативный picker или доступная библиотека, локаль и часовой пояс.
Формы / Визуальный рецепт
Upload и drop area
Кнопка выбора обязательна; не обещать загрузку без сервера.
Формы / Есть связанный live-пример
Поиск и фильтр
Последний запрос побеждает; пустой результат объясняется.
Формы / Есть связанный live-пример
Ошибка и валидация
Текст рядом с полем и aria-describedby; цвет не единственный сигнал.
Данные / Визуальный рецепт
Статистика и KPI
Единицы и период рядом с числом; без выдуманных результатов.
Данные / Визуальный рецепт
Таблица и сортировка
Плотный фон, табличные цифры, подписи и доступная сортировка.
Данные / Визуальный рецепт
Список и activity feed
События остаются в порядке чтения; новые записи не крадут фокус.
Данные / Визуальный рецепт
График и легенда
Дублировать смысл текстом и таблицей; неон не кодирует всё.
Медиа / Визуальный рецепт
Изображение и галерея
Подпись вне стеклянного шума; alt передаёт назначение.
Медиа / Визуальный рецепт
Carousel
Названные кнопки назад/вперёд, без обязательного autoplay.
Медиа / Визуальный рецепт
Видео и управление
Контролы видимы, есть субтитры; autoplay не нужен.
Медиа / Визуальный рецепт
Карта и масштаб
Адрес и список рядом с картой; эффекты не блокируют жесты.
Обратная связь / Визуальный рецепт
Tooltip и popover
Открывать с фокуса и pointer; важный текст доступен без hover.
Обратная связь / Есть связанный live-пример
Dialog и sheet
Smoke отделяет фон, focus остаётся внутри и возвращается к кнопке.
Обратная связь / Есть связанный live-пример
Toast и alert
Уведомление подтверждает реальное действие, status без перехвата фокуса.
Обратная связь / Визуальный рецепт
Progress и skeleton
Прогресс отражает реальное состояние; reduced — статический placeholder.
Обратная связь / Визуальный рецепт
Empty, error, offline
Назвать проблему и доступное следующее действие.
Коммерция / Визуальный рецепт
Тариф и billing
Период, валюта, условия; только явно демонстрационные числа.
Коммерция / Визуальный рецепт
Сравнение возможностей
Читаемая матрица вместо набора светящихся карточек.
Коммерция / Визуальный рецепт
Товар, корзина, количество
Цена, количество и итог согласованы; без фиктивной оплаты.
Motion / Есть связанный live-пример
Reveal и глубина
Декоративный слой появляется один раз; текст уже доступен.
Motion / Есть связанный live-пример
Optical highlight
Блик — отдельный ограниченный слой, без тяжёлой анимации blur.
Ничего не найдено. Измените запрос или выберите «Все».
Превью схематические: они показывают материал семейства. Кнопка ▶ воспроизводит движение образца, а не функциональность компонента. В рецепте указан связанный live-пример и его границы.
Ваша подборка
23 визуальных
ориентира.
Сохранена исходная нумерация: № 19 повторяет № 5, № 25 пустой. Картинки открываются у источников. Наши образцы — самостоятельная реализация; движение по статичным изображениям не подтверждено.
Объём за панелью
Циановые и розовые формы, тонкие световые края и тёмные полупрозрачные карточки.
Посмотреть референс ↗Круглая матовая линза
Сочная геометрия за матовым кругом. Разница чёткой и размытой формы делает материал видимым.
Посмотреть референс ↗Графит и лайм
Дымчатая панель на гранёном чёрном фоне; блик по верхней границе и локальный лаймовый акцент.
Посмотреть референс ↗Прозрачная оболочка
Большое окно приложения пропускает цвет обоев; внутренние зоны получают собственную плотность.
Посмотреть референс ↗Карточки в пространстве
Высокая панель и розовые вложенные карточки образуют несколько планов на сине-фиолетовом фоне.
Посмотреть референс ↗Форма поверх цветной ленты
Прозрачная широкая форма входа, белая типографика и яркая лента за стеклом.
Посмотреть референс ↗Стеклянный первый экран
Крупная матовая рамка над красно-голубым фоном. Это изображение макета, не работающий сайт.
Посмотреть референс ↗Светлые мобильные панели
Холодный голубой фон, белые внутренние карточки и мягкая прозрачная внешняя оболочка.
Посмотреть референс ↗Три слоя погоды
Тонкие наклонённые карточки: содержимое заднего слоя размывается за передним.
Посмотреть референс ↗Монохромные экраны
Серые дымчатые мобильные экраны и тонкая подсветка элементов; мелкий низкоконтрастный текст не переносим.
Посмотреть референс ↗Оранжевый за стеклом
Смещённые насыщенные формы позади прозрачных кругов и капсул показывают границу материала.
Посмотреть референс ↗Лавандовый плеер
Светлые панели на лавандовом фоне, круглые белые контролы и оранжевое основное действие.
Посмотреть референс ↗Неон под дымчатым слоем
Лаймовые объекты выступают из-за тёмных прозрачных иконок; небольшие острые блики.
Посмотреть референс ↗Контраст температур
Оранжевый и пурпурный круги за погодной карточкой. Изучен статичный кадр; анимация неизвестна.
Посмотреть референс ↗Синяя двойная кромка
Прозрачная панель поверх синих объёмных фигур; двойной световой край. Движение не проверено.
Посмотреть референс ↗Чёрное стекло чата
Тёмные мобильные экраны с небольшими лаймовыми действиями и локальными бликами.
Посмотреть референс ↗Фиолетовые сферы
Яркие сферы пересекают границу тонких мобильных панелей: чёткие снаружи, мягкие за стеклом.
Посмотреть референс ↗Выпуклая кнопка
Графитовая капсула с выпуклым бликом и внутренней тенью; материал читается через край.
Посмотреть референс ↗Светлая библиотека контролов
Объёмные кнопки, поля и переключатели с пастельными бликами; переносим материал, а не текст макета.
Посмотреть референс ↗Оптическая палитра
Цветные образцы и толстое прозрачное тело с радужными бликами; числовые подписи не являются CSS-спецификацией.
Посмотреть референс ↗Лавандовая линза
Прозрачная капсула деформирует видимую сетку. Статичный кадр After Effects, не доказательство web-реализации.
Посмотреть референс ↗Стеклянный сегмент
Скруглённые вкладки и полупрозрачный индикатор на пурпурном фоне. Движение по превью не подтверждено.
Посмотреть референс ↗Неоновые компоненты
Тёмные поля и карточки, цианово-фиолетовые блики по краю, яркие локальные действия.
Посмотреть референс ↗Reference library
Откуда
пришли идеи.
Источники проверены 21 октября 2026. Галереи дают композицию, документация — технические ориентиры. Движение не выводится из статичных скриншотов.
GlassKit / LUMEN
Просмотрены обе темы в браузере. Берём принцип независимой настройки плёнки и кромки; создаём собственные элементы.
Открыть первоисточник ↗Remember / Glassmorphism
Просмотрен тёмный hero с кольцами и прозрачной панелью. Наши motion-рецепты самостоятельные, тайминг источника не измерялся.
Открыть первоисточник ↗Microsoft Fluent / Material
Разделение solid, acrylic и smoke. Адаптируем роли материалов для веба, без зависимости от WinUI.
Открыть первоисточник ↗Microsoft / Acrylic
Размытие, тонировка и глубина. Избегаем многократного вложенного blur и сохраняем плотный fallback.
Открыть первоисточник ↗Apple / Liquid Glass
Оптическая иерархия контролов и навигации. CSS blur не воспроизводит нативный движок преломления Apple.
Открыть первоисточник ↗Reflect / Supahero
Просмотрен скриншот: световой горизонт и крупный заголовок. Переносим иерархию, не чужие изображения или анимацию.
Открыть первоисточник ↗Fey / Pricing Pages
Просмотрены desktop/mobile. Один главный выбор и FAQ. Не переносим низкий контраст крупной цены.
Открыть первоисточник ↗Supaste / Navbar Gallery
Компактная шапка и вертикальное мобильное меню. Поведение клавиатуры реализуем и проверяем отдельно.
Открыть первоисточник ↗Eternalblue / CTA Gallery
Контекстная кнопка рядом с продуктом. Это референс композиции, а не стеклянного материала.
Открыть первоисточник ↗Eclipse Space / Footer Design
Выразительное завершение и компактные полезные ссылки. Motion по одному изображению не подтверждён.
Открыть первоисточник ↗Стеклянное кольцо курсора
Живой образец: наведите на кнопку. Диаметр 48 px сохраняется; неоновое свечение плавно пульсирует за 1,8 секунды, пока указатель над активным элементом. Нажатие сжимает кольцо до 32 px (⅔), отпускание возвращает 48 px.
Без текста внутри и без расходящейся волны. Поля ввода сохраняют нативный указатель. На сенсорных устройствах, при reduced motion и forced colors используется обычный курсор.