Case 01 / 03[Barbershop] — [2026]

Polyakov Barber.

Клиент: Федя Поляков, частный барбер — Прага, Карлин
Роль: Дизайн и разработка
Стек: Vite · React 19 · TypeScript · Tailwind v4 · Framer Motion
Год: 2026
Статус: В работеpolyakovbarber.cz

Премиальный сайт частного барбера в Праге. Ремесло, а не конвейер: один клиент в одно время, плёночные ч/б фотографии и стрижка, которая происходит прямо во время скролла.

Открыть живое демо Оригинальный сайт

Polyakov Barber — Скролл-морф — девять плёночных кадров, кроссфейд по позиции скролла — Скролл-морф — девять плёночных кадров, кроссфейд по позиции скролла

Обзор

Федя работает один — одно кресло, один клиент, никакой очереди. Сайт должен сказать это раньше, чем прочитается первое слово, поэтому вся вёрстка построена вокруг одной фотографии за раз и большого количества пустого чёрного.

Запись идёт через Altegio: виджет открывается в модалке-iframe, поэтому данные клиента не проходят через мой код, а страница держит строгий CSP. Услуги, длительности и цены от 400 до 3500 Kč лежат в одном файле — из него и прайс, и подписи в записи, и структурированные данные.

Три языка (CZ / RU / EN), JSON-LD HairSalon, sitemap и security-заголовки продакшн-уровня. Здесь нет ни одного шаблонного куска: типографика, зерно и скролл-хореография сделаны под этого барбера.

Посмотреть вживую/demos/polyakov/

Полная копия сайта работает внутри портфолио — можно раскликать все страницы.

Фирменная анимация

Как это устроено.

Стрижка и есть переход. Внутри sticky-секции высотой 200vh девять фотографий перетекают друг в друга: длинные волосы укорачиваются в чистый фейд, а рядом в маскированном окне прокручивается слоган.

01
Стопка кадров
Девять JPEG лежат друг на друге. Прозрачность каждого — clamp(pos − i + 1, 0, 1), поэтому в любой момент идёт ровно один кроссфейд.
02
Скролл вместо таймлайна
Прогресс скролла задаёт pos — ни автоплея, ни видеофайла. Прокрутите назад, и волосы отрастают обратно.
03
Прокрутка слогана
Маскированное окно прокручивает «Sharp Cuts → Clean Fade» синхронно с кадрами, поэтому строка попадает ровно на готовую форму.
04
Плёночное зерно
SVG-слой feTurbulence в режиме overlay с дрожанием steps(3), виньетка и жёлтый круг за головой — цифровым фотографиям возвращают аналог.

Polyakov Barber — Портфолио — hover-аккордеон панелей на десктопе, 3D drag-стек на мобильном — Портфолио — hover-аккордеон панелей на десктопе, 3D drag-стек на мобильном

Polyakov Barber — mobile — Портфолио — hover-аккордеон панелей на десктопе, 3D drag-стек на мобильном

Посмотреть вживую/demos/polyakov/

Возможности05

01
Запись через Altegio
Реальный календарь салона открывается в модалке-iframe. Данные клиента не проходят через сайт, страница держит строгий CSP.
02
Три языка
CZ, RU и EN из одного словаря, с hreflang и локализованными метаданными на каждом маршруте.
03
Портфолио в двух видах
На десктопе — hover-аккордеон панелей; на мобильном те же работы превращаются в стопку карточек, которую тянешь пальцем в 3D.
04
Один источник правды
Услуги, длительности и цены (400–3500 Kč) берутся из одного файла — прайс и подписи в записи не могут разойтись.
05
Продакшн-гигиена
JSON-LD HairSalon, sitemap, security-заголовки, бюджеты картинок. Скучные части сделаны как надо.