---
name: kodoceh-motion-dna
description: "Что делает сайт «эффектным» в нашей грамматике: один срежиссированный момент на первом экране, показывающий работу продукта, плюс разный ритм соседних секций — а не фотореализм и не набор fade-in"
metadata: 
  node_type: memory
  type: project
  originSessionId: b11e39bd-4f6f-47c9-ba7b-680ccf041a5b
  modified: 2026-08-06T17:45:25.845Z
---

**06.08.2026.** Владелец пересмотрел ролик-референс (youtu.be/hffvuckBtGs) и сказал: «у них сайт
очень эффектный, мы что-то упустили». Разобрал стенограмму целиком. Упущены были три вещи, и ни
одна из них — не «сделать красивее».

1. **Первый экран у них ЖИВЁТ.** Картинка интерьера превращается в 3D-облёт по скроллу. У нас первый
   экран был статичной типографикой со схемой, которая дорисовывалась за 1,15 с и замирала.
2. **Каждая следующая секция отличается от предыдущей.** У нас все секции между героем и футером
   стояли на одном фоне, в одной ширине, с одним выключением влево — страница читалась одним блоком.
3. **Глубина.** У них параллакс и наложение карточек; у нас всё в одной плоскости.

**Как это переносится честно** (фотореализм и сток нам не подходят — у нас нет фотографируемого
продукта): вместо картинки движется **собственный артефакт продукта**, и движение показывает его работу.

- **Витрина** — состав идёт по линии за 1,15 с и зажигает станции; тот же заказ на «обычном пути»
  идёт 3,4 с, потому что четырежды стоит на пересадке. Аргумент страницы разыгран движением.
- **ВакХантер** — развёртка приёмника проходит двадцать станций, каждая вспыхивает под стрелкой,
  пойманная остаётся гореть; дальше стрелка живёт микродрожью.
- **Автеро** — карточка подбора заполняется в том порядке, в каком её заполняет сам подбор:
  машина → VIN → оригинал → аналоги с источниками.

**Ритм секций:** соседние обязаны различаться хотя бы одним из трёх — фон (полоса `--panel`
или тёмная плита), ширина колонки, расстановка. Тёмная плита в середине страницы отведена
**правилу продукта**: у ВакХантера «где приёмник останавливается», у Автеро «откуда номер»,
у витрины — табло цен. Это семейная ДНК: одинаковый приём, разные лица.

**Второй заход (тот же день, «хочется эффектнее»): дело было в размере, а не в анимации.**
Движение уже было, а «вау» не появлялось, потому что фирменный предмет сидел внутри текстовой
колонки 1152 px, а плита кончалась на 790 px из 900. Три изменения, каждое чисто вёрсточное:

- плита получила `md:min-h-[100svh]` — первый экран стал первым ЭКРАНОМ;
- предмет ушёл **от края до края** (`max-w-[112rem]`), текст остался в обычной колонке.
  Двадцать станций во всю ширину читаются как прибор, в колонке — как виджет под абзацем;
- **рельс витрины стал видимым**: 2 px с прозрачностью 0,42 и точки без подписей никто не замечал.
  Теперь у станций есть имена вдоль линии, активная горит — та же линия, что и в герое, ведёт
  через всю страницу. Это и есть «одна линия» буквально.

Побочный урок: широкая секция (`max-w-[84rem]`) наезжает на рельс. Рельс важнее — он держит
страницу; секции различать фоном и расстановкой, а не шириной.

**Ограничения, которые нельзя нарушать:** состояние по умолчанию — конечное и верное (без JS,
без анимации, при `prefers-reduced-motion`); обратного хода нет — см.
[[scroll_animation_must_not_encode_quantity]]. Общий механизм — `useArrivals()` в `@cbr/ui`,
жест у каждого сайта свой.
