Ambient CSS вышла в версии 3.0: физически точные тени и блики в CSS
Открытый проект Ambient CSS, CSS-фреймворк освещения, чей код лежит в репозитории github.com/kikkupico/ambientcss, 21 августа 2026 года выпустил в npm пакет @ambientcss/css версии 3.0.0 (позже в тот же день вышла точечная версия 3.0.1, она и числится последней в реестре npm). Идея проекта: вместо того чтобы вручную подбирать готовые CSS-классы теней вроде shadow-sm, shadow-md и shadow-lg, они, по формулировке README проекта, чисто декоративны и никак не связывают разные элементы в единую сцену, разработчик задаёт один источник света (направление, интенсивность двух ламп, key light и fill light, оттенок, высоту элемента над поверхностью), и все тени, блики на кромках и градиенты поверхности у всех элементов страницы пересчитываются из этого единого источника автоматически и согласованно. Меняется вектор света на родительском контейнере, вслед за ним синхронно обновляются все дочерние элементы.
Технически движок описывает каждый элемент интерфейса как физический материал под двухламповой системой освещения и собирает для него составную тень box-shadow из пяти слоёв: направленная падающая тень (масштабируется от условной высоты элемента), блик на скруглённой кромке со стороны света (fillet highlight), мягкая тень на кромке с противоположной стороны, широкая скошенная подсветка на освещённых гранях (chamfer highlight) и тёмная скошенная тень на теневых гранях. По утверждению README, поведение освещения физически обосновано и откалибровано по эталонным 3D-рендерам, которые сделаны в Blender: отдельный модуль проекта, ambient3d, воссоздаёт параметрический 3D-макет той же самой панели, и её трассированный в Blender рендер (Cycles) визуально сопоставляют с версией на чистом box-shadow, геометрия и вектор света в обеих версиях совпадают.
В версии 3 из библиотеки убрали четыре класса с фиксированной яркостью поверхности, amb-surface-darker, -darkest, -lighter и -lightest. Вместо них поверхность теперь задаётся через единую пару переменных: --amb-albedo (собственный цвет материала под полным освещением) и --amb-shade (множитель яркости). Прежние четыре фиксированных класса, это, по формулировке README, частный случай того же единого закона альбедо/яркости, с коэффициентами 0.38, 0.07, 1.11 и 1.16 соответственно (в самом README эти четыре класса почему-то названы «пятью фиксированными альбедо», притом что перечислены только четыре класса и четыре коэффициента; объяснения этому расхождению в тексте нет). Отдельно в v3 описаны два вида «браш-металла» (amb-mat-brushed и amb-mat-brushed-round), фактура с рельефом, где смещение между прямым и инверсным слоем рельефа отслеживает свет, так что сами неровности остаются на месте, а по ним лишь скользит светотень; для круглых поверхностей (например, шляпки регулятора) зерно рисуется концентрическим градиентом вместо линейного.
Проект, монорепозиторий из пяти частей: чистый CSS-пакет @ambientcss/css без зависимостей, библиотека React-компонентов @ambientcss/components (кнопки, панели, регуляторы-«крутилки» и другие тактильные элементы управления, стилизованные под физическое оборудование), сам модуль ambient3d для калибровки по Blender, сайт документации на Docusaurus и демо-приложение в виде аппаратного синтезатора. Подключается через npm install @ambientcss/css (чистый CSS и HTML-классы вроде amb-surface, amb-chamfer, amb-elevation-1) либо через npm install @ambientcss/components для готовых React-компонентов (AmbientProvider, AmbientButton, AmbientKnob, AmbientPanel и другие) с возможностью подменять части компонента своей разметкой. Лицензия, MIT.
Ключевые факты
- npm-пакет @ambientcss/css версии 3.0.0 вышел 21 августа 2026 года, в тот же день следом вышла версия 3.0.1, она сейчас числится последней в реестре npm
- Единый источник света (key light + fill light) задаёт составную тень box-shadow из пяти слоёв на каждом элементе: падающая тень, два блика и две тени на кромках
- Освещение калибруется по 3D-рендерам, сделанным в Blender: отдельный модуль ambient3d воссоздаёт ту же панель параметрически и трассирует её в Cycles для сверки с версией на box-shadow
- В v3 убрали четыре класса с фиксированной яркостью поверхности (darker/darkest/lighter/lightest), заменив их парой переменных --amb-albedo и --amb-shade с коэффициентами 0.38, 0.07, 1.11 и 1.16
- Монорепозиторий включает пять частей: CSS-пакет, React-библиотеку компонентов @ambientcss/components, модуль калибровки ambient3d, сайт документации и демо-приложение синтезатора
Почему это важно
Обычные CSS-тени вроде shadow-sm/shadow-md/shadow-lg подбираются на глаз для каждого элемента отдельно и никак не связаны между собой, карточка с одной тенью и кнопка рядом с другой не образуют единую физическую сцену, это просто два независимых значения размытия. Ambient CSS переворачивает подход: разработчик один раз описывает источник света на контейнере, а тени, блики и градиенты поверхности всех вложенных элементов выводятся из этого источника автоматически и остаются согласованными между собой. Дополнительный вес подходу придаёт то, что поведение освещения не просто выглядит правдоподобно, а сверяется с эталонными 3D-рендерами той же сцены в Blender.
Кому это важно
В первую очередь это фронтенд-разработчикам и дизайнерам интерфейсов, которые строят «тактильные», приборно-стилизованные интерфейсы, панели с регуляторами, кнопками и индикаторами, имитирующие настоящее оборудование (демо-приложение проекта, это как раз аппаратный синтезатор). Готовая библиотека React-компонентов @ambientcss/components с кнопками, панелями и регуляторами-«крутилками» экономит им ровно ту работу, которую иначе пришлось бы делать вручную, подгонять тени и блики под общую сцену.
Как это применить
Пакеты бесплатны и распространяются по лицензии MIT. Для чистого CSS: npm install @ambientcss/css, подключить стили и раскладывать классы вроде amb-surface, amb-chamfer, amb-elevation-1 на нужных элементах, а направление света задавать классом на родителе (например amb-light-tl) или напрямую через CSS-переменные --amb-light-x, --amb-key-light-intensity и другие. Для React: npm install @ambientcss/components @ambientcss/css и готовые компоненты вроде AmbientProvider, AmbientButton, AmbientKnob, AmbientPanel, при этом можно подменять отдельные визуальные части компонента своей разметкой, сохраняя логику и доступность.
Можно ли доверять
Проект существует на деле, а не только на словах: npm-пакет @ambientcss/css действительно опубликован и его версии 3.0.0 и 3.0.1 подтверждены реестром npm, исходники и README лежат в открытом репозитории на GitHub. Публикацию на Hacker News заметно поддержало сообщество, 218 очков и 69 комментариев. При этом сама демонстрационная страница ambientcss.vercel.app, это клиентское SPA-приложение без серверного текста, так что подробности взяты из README и данных реестра npm, а не из самой страницы. Утверждения о «физической обоснованности» и точности калибровки по Blender, формулировка самого README проекта, независимых замеров или сторонних обзоров пока не публиковалось.
Риски и подводные камни
Переход на v3, не обратно совместимое обновление: четыре класса фиксированной яркости поверхности (darker/darkest/lighter/lightest) убраны и заменены переменными --amb-albedo и --amb-shade, так что код, написанный под прежние версии, потребует правки. Сам механизм, составная тень из пяти слоёв box-shadow на каждом элементе, потенциально нагружает рендеринг на страницах с большим числом элементов, но никаких цифр по производительности, размеру пакета или совместимости с браузерами в материалах проекта не приводится. Стоит отметить и то, что само README внутренне противоречиво: оно называет четыре убранных класса «пятью фиксированными альбедо», хотя перечисляет только четыре класса и четыре коэффициента, объяснения этому расхождению в тексте нет, что намекает на не до конца вычитанную документацию молодого проекта.
«Обычные шкалы CSS-теней декоративны, карточка с shadow-lg рядом с кнопкой с shadow-sm вовсе не подразумевает общую физическую сцену.»
— README проекта Ambient CSS