Apple Design: жесты, пружины и материалы Apple на веб-странице

Интерфейс кажется живым, когда движение стартует с текущего положения, подхватывает скорость пальца и его можно остановить в любой момент. Скилл Эмиля Ковальского пересказывает доклады WWDC, прежде всего Designing Fluid Interfaces 2018 года, языком веба: Pointer Events, requestAnimationFrame, backdrop-filter и пружины из библиотеки Motion.

49 196звёзд на GitHub · #26

Открыть на GitHub

Установка

skills CLI

npx skills add emilkowalski/skills@apple-design

Скачать ZIP

Автор: Emil Kowalski
Лицензия: MIT
Пакет: Один скилл
Обновлён: 11 октября 2026 г.

Что умеет

Пружины вместо анимаций с фиксированной длительностью: параметры damping и response и значения, которые Apple использует для шторок и перемещений
Прерываемость: анимация всегда начинается с текущего значения на экране, а элемент можно схватить и развернуть на полпути
Передача скорости и проекция импульса: функция Apple с коэффициентом 0.998 вычисляет, куда «долетит» карточка после броска
Резиновые границы, симметричные пути появления и исчезновения, полупрозрачные материалы через backdrop-filter
Доступность: prefers-reduced-motion, prefers-reduced-transparency и prefers-contrast, плюс оптический размер, трекинг и интерлиньяж шрифта

Когда пригодится

Делаете нижнюю шторку, карусель или свайп-карточки и хотите, чтобы они вели себя как в iOS
Анимация закрытия модального окна не даёт пользователю передумать на полпути, и это раздражает
Нужна стеклянная панель навигации, читаемая поверх контента и уважающая настройки доступности

Попросите агента

Сделай нижнюю шторку с пружинной анимацией, которая подхватывает скорость свайпа
Проверь эту карусель по принципам Apple: прерываемость, импульс, резиновые края
Добавь полупрозрачную панель навигации и вариант для prefers-reduced-transparency

Вопросы

Как установить Apple Design?

Командой npx skills add emilkowalski/skills@apple-design. Без флага @apple-design та же команда поставит весь набор скиллов Эмиля Ковальского.

Откуда берутся правила в Apple Design?

Из дизайнерских докладов Apple на WWDC, главным образом Designing Fluid Interfaces 2018 года, плюс доклада об аудио и тактильной отдаче. Автор переводит их на CSS, Pointer Events и пружины Motion.

Чем Apple Design отличается от других скиллов Эмиля Ковальского?

Многие соседние скиллы набора посвящены анимации вообще и её проверке. Apple Design собирает именно подход Apple: жесты, пружины, материалы, мультимодальную отдачу и типографику.

Дизайн Все скиллы