Портфолио основателя ZHEESHEE: сайт дня на CSSDA и номинация Portfolio Honors на Awwwards

Мы Cedro — дизайн-студия сервисов для финтеха, недвижимости, e-commerce и IT-компаний. И SALT AND PEPPER — digital-агентство с фокусом на создании цифровых сервисов, промо-сайтов, сайтов-портфолио и интеграции AI-решений; входим в топ-40 агентств разработки по всему миру, а в 2026 стали самым награждаемым агентством в России по количеству Awwwards и FWA и вторыми по количеству CSSDA (по данным рейтинга Workspace).

Слились в экспертизе, чтобы одни отрисовали дизайн с визуальной отсылкой к образу креативной студии, кастомными иллюстрациями и анимированной типографикой, а другие — перенесли всё это в код точно так, как было задумано. Результат — непрерывный поток с эффектом погружения в авторский стиль режиссёра. Плюс проект стал сайтом дня на CSSDA, попал на главную Muzli и в номинацию Portfolio Honors на Awwwards.

Артём Щербаков — основатель креативного продакшена ZHEESHEE. Вместе с командой делает CGI, VFX, 2D и 3D-анимации и всякий другой видеоконтент для корпораций вроде Яндекса, Сбера, Netflix, Samsung, Jeep или Philips. Плюс Артём вписывается в проекты как соло-режиссер. Ходит на диджитальные тусовки, знакомится с людьми, у него просят ссылку на персональный сайт, а сайта-то и нет (теперь есть, мы сделали). Задача сайта — креативно и эффектно презентовать режиссёрский почерк Артёма. Акцент — на кейсы, но чтобы упаковка тоже соответствовала. Что-то необычное, чтобы цепляло. Но в то же время обычное: понятное и без тотального творческого хаоса. Запрос одновременно на минимализм и фановость. Вдохновляющая метафора от Артёма: чтобы было ощущение, будто приходишь в стерильную студию, заглядываешь в дверь — а там крафтовая мастерская, где кипит работа.

Про рефы, мудборды и вдохновение 

Работать было комфортно с самого начала. Никаких жёстких рамок или радикальной обратной связи. Выбирали решения вместе с заказчиком: смотрели рефы, обсуждали, что нравится и цепляет, какие приёмы почерпнуть из кейсов Артёма. Остановились на таких акцентах: 

• фишка режиссёрского почерка Артёма — переходы из одного пространство в другое, мы обыграли это через page transition и смену блоков; 

• к этой же особенности отсылают микроприёмы в типографике, например когда при наведении на текст буквы сливаются.

Отрисовали концепцию, которая отсылает к образу креативной мастерской

Вообще, у нас было три захода. 

• Первая концепция — фановая, с акцентом на артефакты из работ Артёма.

• Вторая — тоже фановый, но чуть серьёзнее за счёт чёрно-белой палитры.

• Третья — всё ещё на приколе, но более крафтовая — с отсылкой к образу, который закинул в нас Артём: будто приходишь в стерильную студию, а за дверью креативная мастерская.

Взяли за основу третий концепт и дополнили его акцентами

Добавили крафта иллюстрациями

Создали графические элементы в стиле рисунков от руки. А ещё теги и обводки на шрифты — они появляются при скролле или наведении. Всё — в кислотно-зелёном цвете, который мэтчится по настроению с авторским стилем Артёма. 

Интегрировали артефакты из кейсов Артёма 

Фановость из второго концепта перенесли в третий (финальный). Взяли всё те же артефакты из видео Артёма и превратили их в прелоадер и использовали на странице 404.

Поработали с типографикой 

Базовый шрифт — спокойный и читаемый. Просто чёрный и белый текст, который разбавляют кислотно-зелёные элементы. При наведении и скролле буквы сужаются,  разъезжаются, бледнеют и исчезают. 

Сделали переходы между страницами бесшовными 

Между главной, общей страницей с кейсами и контактами — это та самая дверь, или окно. Но если кликнуть на любое видео в кейсах — оно переместится в центр при переходе на страницу этого проекта. 

Использовали кастомный плеер 

Любой стандартный разрушил бы целостность проекта, поэтому мы взяли свой продукт и кастомизировали детали: шрифт, раскрытие на фулскрин, паузу, обводку на шрифте при наведении на настройки. 

Передали эстафету разработке 

На самом деле мы были на связи с разрабами всё время, пока работали над дизайном. Сверяли с ними часы и уточняли, получится ли закодить эффект или реализовать анимацию так, как мы задумали. 

И тут врываемся мы — SALT AND PEPPER. Перехватываем микрофон у Cedro — и сейчас расскажем про свою часть. 

Закодили проект так, что не пришлось ни упрощать визуальные решения, ни терять в скорости сайта 

Оживили типографику 

Отрисованный текст поверх блоков — динамический. Мы используем библиотеку, которая генерирует SVG-пути из шрифта. Чтобы не нагружать основной поток процессора, генерация выполняется в отдельных тредах — Web Workers. При этом мы заранее генерируем и сохраняем в кэш тексты на странице, чтобы избежать повторного создания воркеров и лишних вычислений. 

Взаимодействия, например hover-теги, работают по тому же принципу: если SVG уже есть в кеше — он используется сразу, иначе шрифт динамически преобразуется в SVG через воркер в момент взаимодействия.

Для эффекта кляксового текста мы использовали комбинацию SVG-фильтров с размытием по Гауссу и Color Matrix. Анимация построена на уменьшении размытия: текст из расплывчатой массы плавно проявляется в чёткую форму.

Воссоздали эффект олдскульного пузатого телевизора 

Для этого применили Three.js с шейдерами: добавили шум и загнули углы для ощущения перспективы. 

Научили сайт распознавать производительность устройства

Сложный блюр и SVG-анимации на тексте могут тормозить на слабых мобильных девайсах. Чтобы сайтом мог пользоваться каждый, мы написали утилитку, которая следит за количеством FPS. 

Если FPS меньше 30, мы даунгрейдим эффекты: сначала отрезаем один вид анимации, потом другой. В крайнем случае пользователь видит упрощенную версию сайта, где из эффектов только прозрачность. 

Использовали плейсхолдеры для всех типов контента 

Если у пользователя медленный интернет и изображение ещё не подгрузилось, вместо пустоты на экране серый квадрат или заглушка в цвет самого изображения. А если не грузится видео — пользователь увидит статичный постер, первый кадр до старта проигрывания. 

Написали кастомный Page Transitions

Свой компонент, чтобы полностью контролировать моменты перехода. В системе предусмотрено несколько видов анимации. Основной режим — это открытие через окно. 

Если в момент клика окно в зоне видимости, Page Transitions подстраивается под его текущий размер и позицию на экране. Мы накладываем элемент поверх, управляем его прозрачностью и раскрываем новое содержимое, сохраняя привязку к координатам предыдущего блока. Если окон во вьюпорте нет, то переход на другую страницу начинается с центра экрана. 

Реализовали бесконечный скролл в кейсах

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

Добавили интерактив на странице 404

Стикеры подхватывают вектор движения курсора, какое-то время летят по инерции и только потом падают вниз.

Собрали гибкую админку на Strapi

Плюс развернули на сервере дополнительный сервис — Image Proxy, чтобы контент можно было заливать без навыков оптимизации контента. Если клиент загружает 4К-изображение, сервис при запросе с мобильного устройства сам режет его до нужного размера. Все обработанные копии сохраняются в кэш. 

Результат 

• Разработали сайт-визитку режиссёра CGI и VFX-контента и соблюли баланс: сделали акцент на кейсы клиента и одновременно создали самостоятельный фестивальный проект. Теперь планируем разослать его по всем конкурсам. 

• Закодили сайт без потери в скорости загрузки и уровне дизайна, а ещё реализовали удобную админку, чтобы клиенту не нужно было думать о формате и весе контента. 

• Проект стал сайтом дня на CSSDA, попал на главную Muzli и в номинацию Portfolio Honors на Awwwards (будем рады вашим голосам, чтобы выиграть в ней).

Проголосовать за нас на Awwwards

Смотреть сайт Артёма Щербакова