Служебная страница
Витрина стилей и анимаций
Концепты, моушн и UX-паттерны из наших проектов. Тёмная тема страницы — рамка, у демо-плиток собственный фон.
Стили концептов
Пять направлений из дизайн-концептов — каждая плитка живёт по своим правилам.
Кинетический минимализм
Чистый фон, крупная типографика, spring-появление. Никакого визуального балласта.
ДВИЖЕНИЕ
ЭТО ДИЗАЙН
Bento grid
Плитки 16–32px radius, тонкие рамки, каскадное появление блоков.
Глассморфизм
Полупрозрачная панель поверх цветных сфер. Размытие — только внутри плитки.
Стеклянная панель
Фон за панелью размыт, страница — нет.
12 новых заявок
Необрутализм
Жирная чёрная обводка, плоская тень без размытия. Кнопка вдавливается при клике.
СКИДКА 50%
Только первым пяти клиентам.
Иммерсивный сторителлинг
Облегчённая версия: параллакс обложки от скролла через IntersectionObserver, без Three.js.
Глава 01
Обложка едет медленнее карточки — глубина без единой 3D-библиотеки.
Анимации
Те же приёмы, что на главной: каждое демо подписано code-чипом.
Печатная машинка
CSS-печать по шагам, работает даже без JS.
Spring-появление
Физика пружины вместо линейного времени.
Stagger-каскад
Блоки появляются по очереди, как bento-плитки.
Press-эффект
Отклик на нажатие — только transform, без JS.
Magnetic-кнопка
Тянется к курсору. Только точный указатель.
Layout-переключение
Подчёркивание бегает между табами.
Витрина компании: разделы перестраиваются без перезагрузки.
UX-паттерны
Компактные схемы из каталога раскладок: миниатюры из div-ов, без картинок.
Глобальные раскладки
Пять базовых схем страницы — схематичные миниатюры, статичный CSS.
Holy Grail
Шапка · 3 колонки · подвал
Sidebar
Панель слева · контент
Split screen
Экран 50/50
Bento
Плитки разного размера
Masonry
Колонки разной высоты
Форма: вертикальный стек
Подпись строго над полем, взгляд идёт сверху вниз. Кнопка ничего не отправляет.
Кнопки: иерархия
Primary залита, secondary контурная. Главная кнопка — в точке финала: под последним полем, справа.
Списки
Три приёма организации данных: split, sticky-заголовок, hover-действия.
Master–detail
Слева список, справа детали выбранного.
- Заявка с сайта
- Вопрос по срокам
- Правки к макету
Заявка с сайта
Детали выбранной строки — в правой панели.
Sticky-заголовок
Шапка списка липнет к верху мини-скролла.
Контакты · 6
- Анна
- Борис
- Вера
- Глеб
- Дарья
- Егор
Hover-действия
Кнопки строки видны только на десктопе при наведении.
Мобильные паттерны
Два приёма адаптации: панель вне холста и сброс колонок.
Off-canvas
Панель выезжает сбоку по триггеру, контент перекрывается.
Открыть фильтры
Фильтры
Срок · бюджет · тематика
Повторный клик закрывает панель. Работает без JS.
Column drop
Три колонки десктопа на узком экране сбрасываются в одну ленту — как эта миниатюра.