Много экспериментировал с liquid glass для веба в прошлом году, используя CSS + SVG
Ключом к кроссбраузерности стал переход с svg backdrop-filter на обычный filter, а также синхронизация текстур карты смещения (displacement map)

👉 @PortalToDesign

Кажется, morphing braille loader постепенно становится новым стандартом.

Очень круто выглядит сочетание брайлевского лоадера с плавным морфингом текста.

Такие мелочи редко влияют на функциональность, но интерфейс сразу ощущается более живым и продуманным.

👉 @PortalToDesign

Похоже, работать с OKLCH-цветами в терминале стало заметно удобнее.

oklch-skill добавляет нормальный workflow для работы с современными цветовыми палитрами прямо из терминала, без постоянных прыжков между браузером, дизайн-инструментами и генераторами цветов.

Для тех, кто использует OKLCH в интерфейсах, дизайн-системах или Tailwind-проектах, выглядит как довольно полезный инструмент.

npx skills add jakubkrehel/oklch-skill

https://github.com/jakubkrehel/oklch-skill

👉 @PortalToDesign

websitevice — новая библиотека сайтов для воровства идей вдохновения

👉 @PortalToDesign

Совет: не допускайте повторного переноса текста при появлении полосы прокрутки.
Использование scrollbar-gutter: stable решает эту проблему.

👉 @PortalToDesign

Совет по дизайн-инжиринг:

Отделяйте объект от его тени.
Когда элемент приподнимается над поверхностью, тень не обязана двигаться вместе с ним. Если оставить тень на месте и постепенно уменьшать её интенсивность по мере удаления объекта, можно добиться более убедительного ощущения глубины и физичности.

При аккуратном использовании этот приём делает интерфейс более осязаемым и помогает избежать ощущения, будто перед пользователем просто набор слоёв, парящих в воздухе.
Я бы не применял это повсюду, но в местах, где нужен дополнительный акцент, эффект может оказаться очень выразительным.

const card = document.querySelector(".notification");
const shadow = document.querySelector(".shadow");

card.animate(
  [
    { transform: "translateY(0)" },
    { transform: "translateY(-160px)" },
  ],
  {
    duration: 900,
    easing: "cubic-bezier(.64,0,.78,0)"
  }
);

shadow.animate(
  [
    { opacity: 0.5, transform: "scaleX(1)" },
    { opacity: 0, transform: "scaleX(.35)" },
  ],
  {
    duration: 700,
    easing: "ease-out"
  }
);

👉 @PortalToDesign