Кейс разработки
Detailing-эпик — scroll-сайт детейлинг-центра, где автомобиль разбирается и собирается по прокрутке; видео сгенерировано нейросетью
О проекте
Scroll-эпик сайт детейлинг-центра на чёрном фоне: по мере прокрутки автомобиль «разбирается» и «собирается», крупно показываются керамика и химчистка салона. Видеоряд сгенерирован нейросетью с управляемыми движениями камеры. Собран на ките scroll-сайтов.
1. Задача
Премиальному детейлинг-центру нужен сайт, передающий «технологичность» услуги через визуал:
- Сквозной сюжет — разобрали → защитили → освежили → собрали.
- Видео под скролл — управляемая камера для плавного скраба.
- Запись на услугу — встроенный выбор даты/времени и заявка.
- Без съёмочной площадки — видеоряд генерируется, а не снимается.
2. Архитектура решения
Scrollytelling на нативном скролле поверх кита scroll-сайтов; видео генерируется AI-инструментами с пресетами камеры.
| Параметр | Значение |
|---|---|
| Основа | Кит scroll-сайтов (vanilla HTML + canvas) |
| Механика | Sticky-секции, кадры скрабятся прогрессом; scroll-driven прозрачность блоков |
| Генерация видео | Higgsfield (модели Seedance / Kling) с пресетами камеры (Orbit / Dolly / 360) |
| Постобработка | 4K-апскейл финального ролика → нарезка кадров |
3. Главная инженерная сложность
Главное — получить от нейросети управляемое видео, пригодное для покадрового скраба, и плавно подавать блоки без «провалов в чёрное».
- Управляемая камера — пресеты движения (Orbit / Dolly / 360) дают предсказуемый ход для скролл-скраба.
- Scroll-driven появление — прозрачность каждого видео-блока ведётся скроллом (плавное проявление/укатывание), без fade-to-black.
- Запись на услугу — встроенный календарь с выбором даты и времени и кнопкой записи.
Результат
Технологичный «вау»-сайт детейлинга, где сложный продукт показан через эффект разбора-сборки авто по скроллу — собран на переиспользуемом ките с полностью сгенерированным видеорядом.
4. Эффект для бизнеса
- Премиальный образ — визуал работает на восприятие услуги как технологичной.
- Конверсия — запись на услугу прямо на странице.
- Экономия на продакшене — видео генерируется, без съёмок.
5. Технологический стек — кратко
| Параметр | Значение |
|---|---|
| Основа | Кит scroll-сайтов (vanilla HTML + canvas) |
| AI-видео | Higgsfield (Seedance / Kling) |
| Постобработка | 4K-апскейл + ffmpeg |
Кейс подготовлен на основе технической архитектуры проекта (группа 1SELLER). Описывается инженерное решение.