Desique · заметка

Новая эра списков во Framer, адаптивные фреймы и кинетическая типографика

Новая эра списков во Framer, адаптивные фреймы и кинетическая типографика

Разбираем долгожданное поле List во Framer CMS, нативные адаптивные iframe без JavaScript, трехмерные трансформации в ИИ-агентах и свежие тренды интерактивной верстки.

Во Framer внедрили новое CMS-поле List и свойство Repeat для слоев на холсте. Теперь повторяющиеся сущности вроде тарифов, списков преимуществ или шагов в кейсах группируются внутри одной записи без бесконечного дублирования полей, а карточки на холсте генерируются автоматически, что радикально ускоряет верстку типовых клиентских страниц и упрощает передачу проекта контент-менеджерам. Подробнее обо всех изменениях можно прочитать в Framer Updates.

Поле List в CMS Framer
Поле List: вопросы и ответы внутри одной CMS-записи · Фото: Framer

ИИ-агент во Framer получил полноценную поддержку 3D Transforms, позволяя манипулировать перспективой, глубиной и вращением по осям XYZ через текстовые промпты. Для дизайнера это открывает возможность быстро прототипировать сложные пространственные анимации и интерактивные логотипы прямо на холсте, сохраняя все слои открытыми для тонкой ручной доводки без ручного написания CSS. Детали релиза описаны в Framer Updates.

Каркасный 3D-логотип Framer
Анонс 3D Transforms для агента Framer · Фото: Framer

В Chrome 154 появилась нативная поддержка responsive iframes, позволяющая встроенным фреймам автоматически подстраивать свои геометрические размеры под фактический размер внедренного документа. Для веб-разработки и создания сложных страниц это решает многолетнюю проблему интеграции внешних калькуляторов, форм и виджетов без необходимости подключать тяжелые JavaScript-библиотеки и городить слушатели через postMessage. Ознакомиться с технической спецификацией можно на Chrome for Developers.

В веб-платформу добавили поддержку Single-axis scroll containers, благодаря чему разработчики интерфейсов могут изолировать прокрутку строго по одной координатной оси. На практике это предотвращает паразитные горизонтальные сдвиги на смартфонах при сложном свайпе галерей и вложенных меню, делая мобильный UX веб-приложений и промо-страниц значительно более предсказуемым и аккуратным. Разбор фичи опубликован в материалах Chrome for Developers.

Свежие обновления стандарта WebGPU принесли поддержку Buffer View, swizzle-присваиваний и расширений шейдерного языка WGSL. Веб-дизайнерам и фронтендерам это дает возможность создавать более производительные интерактивные 3D-сцены и шейдерные эффекты непосредственно в браузере с минимальной нагрузкой на процессор мобильных устройств. Все подробности собраны в обзоре Chrome for Developers.

Сайтом дня по версии Awwwards стал проект Noho, продемонстрировавший мастерскую работу с кинетической микротипографикой, ультраминималистичной монохромной сеткой и бесшовными переходами. Кейс отлично иллюстрирует актуальный тренд на отказ от перегруженного визуального декора в пользу продуманного пространственного ритма и гладких интерактивных реакций интерфейса на движение мыши. Изучить живой пример и механику верстки можно на Awwwards.

Сайт Noho на экране
Noho — сайт дня на Awwwards · Фото: Awwwards