Основа

Стекло и анимация

Стекло для слоя управления, пружины, перетекание и появление

В духе Liquid Glass macOS 26 и iOS 26: контент плотный, стекло только у слоя управления поверх него, выбор перетекает каплей, всё садится пружиной. Правила в DESIGN.md, раздел «Стекло и движение»

npx shadcn@latest add @umbra/glass @umbra/motion

Два слоя

Контент плотный: плитки, карточки, текст. Стекло только у слоя управления, который плавает поверх: шапка при прокрутке, панель действий, меню. Прокрутите список: под стеклом всегда есть контент

Синк дизайнаСегодня, 12:00
Ревью бетыСегодня, 12:01
Интервью: онбордингСегодня, 12:02
Планирование спринтаСегодня, 12:03
Разбор метрикСегодня, 12:04
Созвон с юристомСегодня, 12:05

Материал

Тон --glass-tint с --glass-alpha, blur(var(--glass-blur)) saturate(180%), блик по верхней кромке, тонкая кромка --glass-edge, мягкая тень --glass-shadow. Плотное (--glass-alpha-dense) для мелкого текста поверх пёстрого

Встреча с командой дизайна: бета в пятницу, тексты к четвергу. Итоги собраны автоматически, проверьте имена

Встреча с командой дизайна: бета в пятницу, тексты к четвергу. Итоги собраны автоматически, проверьте имена

Обычное

Итоги

Плотное

Мелкий текст и подписи поверх пёстрого

Преломление

Лупа по краю: SVG feDisplacementMap в backdrop-filter, только Chromium (проверка @supports); Safari и Firefox получают blur и saturate. Только у мелких элементов: индикатор выбора, бегунок, тост. Ведите курсор по примеру

Встреча с командой дизайна: бета в пятницу, тексты к четвергу. Итоги собраны автоматически, проверьте имена

Встреча с командой дизайна: бета в пятницу, тексты к четвергу. Итоги собраны автоматически, проверьте имена

Концентричность

Радиус внутреннего равен внешнему минус отступ. У управления таблетки: внутренняя повторяет внешнюю

Вложенное 16

Плитка 24, отступ 8, внутри 24 − 8 = 16

НеделяМесяц

У управления таблетки: внутренняя таблетка с отступом 4 повторяет внешнюю

Доступность

prefers-reduced-transparency даёт сплошной фон темы без размытия. Контраст текста на стекле по APCA проверяется на самом пёстром фоне под ним (худший случай: под стеклом сплошной цвет). Ниже худшие пары из pnpm apca

Встреча с командой дизайна: бета в пятницу, тексты к четвергу. Итоги собраны автоматически, проверьте имена

Стекло

Плотное, мелкий текст, светлаяхудший фон: text, порог 75101.2
Плотное, мелкий текст, тёмнаяхудший фон: text, порог 75106.4
Обычное, крупный полужирный, светлаяхудший фон: text, порог 6064.9
Обычное, крупный полужирный, тёмнаяхудший фон: text, порог 6090.4
Обычное, мелкий текст, тёмнаяхудший фон: text, порог 7590.4

Пружины

--spring-snappy и --spring-smooth через CSS linear(): пружина без заметного перелёта, не больше 4 %. Только у слоя управления. prefers-reduced-motion: длительности 0, только смена прозрачности

--spring-snappy 0.35 с, перелёт 2 %

--spring-smooth 0.5 с, перелёт 0.2 %

--ease-out для сравнения: появление

Перетекание

Индикатор выбора не появляется на новом месте, а перетекает каплей: в движении слегка вытягивается по направлению (около 1.08) и садится пружиной

Появление поверх

Из blur(8px), scale 0.96 и прозрачности; уход быстрее появления (--t-exit, --ease-in)

Встреча с командой дизайна: бета в пятницу, тексты к четвергу. Итоги собраны автоматически, проверьте имена

Встреча с командой дизайна: бета в пятницу, тексты к четвергу. Итоги собраны автоматически, проверьте имена

Нажатие

scale 0.97 и усиленный блик кромки на время нажатия

Встреча с командой дизайна: бета в пятницу, тексты к четвергу. Итоги собраны автоматически, проверьте имена

Смена страниц и темы

Если страница грузится по сети, выбор в навигации меняется сразу по клику, а контент появляется следом за --t-fast без размытия: View Transition заморозил бы экран до загрузки. Когда новая страница готова сразу, можно View Transitions: проявление из blur(6px), заголовок перетекает. Тема меняется круговым раскрытием от кнопки. Попробуйте пункты сайдбара и переключатель темы внизу слева

Без поддержки View Transitions и при prefers-reduced-motion переход мгновенный

Токены движения

Кривые и длительности: появление, уход, пружины слоя управления

Одна кривая на появление, одна на уход. При «уменьшить движение» длительности равны 0: шарик встаёт на место сразу

ease-out

cubic-bezier(0.22, 1, 0.36, 1). Всё появление и сдвиги

ease-in

cubic-bezier(0.4, 0, 1, 1). Уход

--t-fast 0,18 с: смена состояния
--t-base 0,26 с: появление
--t-page 0,24 с: смена экрана
--t-exit 0,28 с: уход карточки
--t-slow 0,5 с: панели, счётчики

Материал стекла @umbra/glass

Классы материала, вариант плотный, преломление, нажатие и компонент Glass

npx shadcn@latest add @umbra/glass

Материал стекла (styles/umbra/glass.css, подключается после base.css) и обёртка Glass. Правила в DESIGN.md, «Стекло и движение»

  • .umbra-glass: тон --glass-tint с --glass-alpha, backdrop-filter: blur(var(--glass-blur)) saturate(180%), блик по верхней кромке, тонкий край --glass-edge, мягкая тень --glass-shadow
  • .umbra-glass-dense: плотное (--glass-alpha-dense) для мелкого текста поверх пёстрого
  • .umbra-glass-soft: без тени и края; .umbra-glass-select: индикатор выбора на однотонной плитке (тон --text 8 %)
  • .umbra-glass-refract: преломление по краю (лупа) через SVG feDisplacementMap в backdrop-filter, только Chromium (проверка @supports); Safari и Firefox получают только blur и saturate. Нужен <GlassRefraction /> один раз на странице. Только у мелких элементов: дорого
  • .umbra-press: нажатие, scale 0.97 и усиленный блик кромки
  • prefers-reduced-transparency и data-transparency="reduce" на <html>: сплошной фон темы без размытия

Компонент Glass ставит базовые классы .glass* из theme-base (тот же материал), пропы refract и press добавляют классы из glass.css

Когда брать

  • Поповер, меню, подсказка, диалог, капсула над контентом
  • dense: карточка-уведомление, где текст должен читаться на любом фоне
  • pop: появление меню и диалогов из размытия

Когда не брать

  • Плитка, вложенное, поле: поверхности плоские
  • Шапка страницы: стекло включает Page
  • Уведомление: готовый NoticeCard или Toast

Встречи

7 записей за неделю

Планёрка командыВТ, 10:00 · 32 мин
Интервью с дизайнеромПН, 16:30 · 48 мин
Созвон с подрядчикомПТ, 12:00 · 21 мин
Разбор макетовЧТ, 11:00 · 54 мин
Ретро спринтаСР, 17:00 · 40 мин
Встреча с юристомСР, 12:30 · 25 мин
Обзор метрикВТ, 15:00 · 36 мин

Нельзя

  • Стекло на стекле (предупреждение umbra/glass-layer)
  • backdrop-filter у плитки (предупреждение umbra/glass-layer)
  • Преломление у больших панелей
  • Градиент или свечение вместо стекла
  • Стекло у элемента в потоке страницы

Движение @umbra/motion

Пружины, перетекающий индикатор MorphIndicator, появление поверх и смена темы

npx shadcn@latest add @umbra/motion

Движение слоя управления в духе Liquid Glass. Токены пружин уже в tokens.css (theme-base): --spring-snappy и --spring-smooth через linear(), длительности --t-spring-snappy 0.35 с и --t-spring-smooth 0.5 с; при prefers-reduced-motion длительности 0. Здесь утилиты (styles/umbra/motion.css, после base.css) и компонент MorphIndicator

  • .umbra-pop-in / .umbra-pop-out: появление поверх из blur(8px), scale 0.96 и прозрачности; уход быстрее, за --t-exit по --ease-in
  • MorphIndicator: капля выбора не появляется на новом месте, а перетекает; во время движения вытягивается по направлению (около 1.08), садится пружиной --spring-snappy
  • .umbra-vt-title и правила ::view-transition-*: контент новой страницы проявляется из blur(6px) за --t-page, заголовок перетекает, если он есть на обеих страницах
  • umbraThemeTransition(apply, origin): смена темы круговым раскрытием от кнопки

Когда брать

  • Индикатор выбора вкладок, чипов, пунктов сайдбара, бегунок переключателя
  • Меню, подсказка, тост, диалог: появление поверх
  • Смена страниц и темы

Когда не брать

  • Появление контента в потоке: umbra-rise и umbra-appear из theme-base
  • Живой персонаж и показы: у них свой цикл

У этого элемента нет живого примера: он ставит файлы или правила. Подключение во вкладке «Код»

Можно

  • Материал капли из @umbra/glass: umbra-glass-select, с umbra-glass-refract у мелких
  • Пружины только у слоя управления

Нельзя

  • Перелёт больше 4 %, свои кривые вместо --spring-*
  • Пружины у контента в потоке и у текста