Сайт, где дом строится при прокрутке: Claude Code и Seedance
Сайт, на котором дом строится прямо на глазах, пока человек листает страницу. Видео стройки делает Seedance, сайт собирает Claude Code, а прокрутка управляет видео покадрово. Ниже весь процесс: промпты для обоих, команды для нарезки кадров и проверки, без которых сайт падает на телефоне.
Внутри: как устроен эффект, промпт видео стройки для Seedance, нарезка кадров одной командой, промпт для Claude Code, проверка на телефоне и где ещё работает этот приём.
Как устроен эффект
Видео на таких сайтах не играет само. Его заранее режут на картинки, и каждой позиции прокрутки соответствует свой кадр.
Seedance генерирует видео стройки: от пустого участка до готового дома.
Видео режется на 45-90 кадров командой ffmpeg.
Claude Code собирает сайт, где номер кадра привязан к прокрутке. Листаешь вниз, дом строится. Листаешь вверх, стройка идёт назад.
Обычный тег video с перемоткой по прокрутке на телефонах дёргается. Кадры на canvas работают плавно везде, поэтому на хороших сайтах делают именно так.
Шаг 1. Видео стройки в Seedance
Нужна одна картинка: фото или рендер готового дома, снятый с той точки, с какой ты хочешь показывать стройку. Её грузишь в Seedance как референс и даёшь промпт ниже.
Промпт: стройка от участка до готового дома
Промпт
Timelapse of a house being built from scratch on this exact plot, ending exactly on the house from the reference image. Sequence: empty leveled plot, foundation poured, walls and frame go up, roof is laid, windows and facade are finished, landscaping appears, final shot matches the reference house. Locked-off static camera, same angle and lens as the reference image, same daylight, no people, no text, smooth continuous progress, photorealistic.
Длину ставь 8-10 секунд. Короче, и этапы стройки проскакивают. Длиннее, и кадров станет слишком много для телефона.
Камера должна стоять на месте. Если в ролике камера поехала, перегенерируй: при прокрутке движение камеры укачивает.
Если модель упрямо начинает с готового дома, сделай наоборот: попроси разобрать дом (второй промпт) и разверни видео командой ниже.
Запасной промпт: разборка, которую потом разворачиваем
Промпт
Reverse construction timelapse of the house from the reference image: the house is disassembled step by step, landscaping removed, facade and windows removed, roof removed, walls and frame removed, foundation removed, ending on an empty leveled plot. Locked-off static camera, same angle and lens as the reference image, same daylight, no people, no text, smooth continuous progress, photorealistic.
Два набора кадров: крупный для компьютера и лёгкий для телефона. Команды ставят ffmpeg, скачай его заранее или попроси Claude Code сделать это за тебя.
Положи папку frames рядом, открой Claude Code в этой папке и вставь промпт. Скобки заполни своими данными.
Промпт
Собери одностраничный сайт для [компания: например, «строительная компания ДомСтрой, каркасные дома под ключ в Подмосковье»]. Главный эффект: пока человек прокручивает первый блок, на экране строится дом.
Что у тебя есть:
- папка frames/desktop: кадры стройки 1600 px, файлы frame-001.webp и дальше по порядку;
- папка frames/mobile: те же кадры 960 px;
- [если есть: макет из Figma, фото, тексты, цены].
Как сделать эффект:
1. Первый блок закрепи на экране (pin) на высоту примерно 40 px прокрутки на каждый кадр.
2. Рисуй кадры на canvas. Номер кадра считай из прогресса прокрутки через GSAP ScrollTrigger со scrub. Перерисовывай canvas только когда номер кадра меняется.
3. При загрузке выбери набор: mobile при ширине экрана до 768 px, иначе desktop. Ограничь devicePixelRatio значением 2.
4. Сначала загрузи каждый восьмой кадр, чтобы прокрутка работала сразу, остальные догружай в фоне.
5. Поверх стройки выведи 3-4 подписи, которые появляются по ходу: фундамент, стены, кровля, готовый дом. Под каждой одна фраза о том, что компания делает на этом этапе.
6. После стройки обычные блоки: услуги, цены, этапы и сроки, отзывы, форма заявки.
Требования: один index.html с папками frames и assets, GSAP из CDN, без фреймворков. Страница не должна дёргаться, текст не должен прыгать при загрузке.
В конце открой сайт на ширине 390 и 1440 px, прокрути первый блок вверх и вниз и скажи, где эффект рвётся или тормозит. Исправь.
Проверь до публикации
Три проверки, на которых такие сайты чаще всего ломаются.
Телефон. Открой сайт на своём телефоне и пролистай первый блок три раза туда и обратно. Если страница перезагрузилась или вылетела, кадров слишком много или они слишком большие: уменьши набор mobile до 30-40 кадров.
Первая секунда. Открой сайт через мобильный интернет. Дом должен появиться сразу. Если сначала пустой экран, попроси Claude показать первый кадр как обычную картинку до загрузки остальных.
Вес. Папка frames/desktop должна весить до 8-10 МБ. Если больше, снизь качество до 70 или частоту кадров.
Где ещё работает приём
Ремонт квартиры от бетона до готового интерьера, кухня от чертежа до сборки, машина в детейлинге, блюдо от продуктов до подачи, участок до и после ландшафтного дизайна.
Чего не обещать клиенту
Точного соответствия его проекту. Seedance рисует правдоподобную стройку, и по его чертежу она не сверяется. Для рекламы этого хватает, для технической документации нет.
Следующий шаг
Хочешь так же, но под свой блог и продукт?
Я собрал систему, по которой обычный человек запускает блог с нуля и набирает аудиторию без съёмок, монтажа и команды. Внутри разбор, с которого стартовал сам.