# infographic-shots — HANDOFF (модуль Remotion-видеошотов) Переносимое ядро видеошотов/перебивок для Reels/Shorts на **Remotion**. Самодостаточный проект: `npm install` → `npx remotion studio` → рендер. Никаких внешних зависимостей от нашей системы для рендера (ассеты-примеры внутри). Генерация НОВЫХ ассетов — опциональна (см. §5). - **Формат:** 1080×1920, 30fps (вертикаль Reels). Меняется в `src/Root.tsx`. - **Стек:** Remotion 4.0.484, React 19, three.js (для глобуса), @remotion/google-fonts. - **Правила плавности:** `MOTION.md` (обязательны — на них держится «дорогой» вид). ## 1. Запуск ```bash cd infographic-shots npm install npx remotion studio # интерактивный превью всех шаблонов # рендер одного шота: npx remotion render out/.mp4 # глобус (three.js) — с флагами: npx remotion render GlobeRoute out/globe.mp4 --gl=angle --concurrency=1 ``` `` — из каталога ниже (совпадает с id в Studio). ## 2. Каталог шаблонов (`src/`) | ID | Файл | Что делает | |---|---|---| | **FocusChain** | FocusChain.tsx | Фокус-субтитры: слайды текста сменяются, в резкости всегда нужное слово (жёлтый маркер + радиальное размытие); цепочка выделенных слов = смысл под озвучку | | **FocusWord** | FocusWord.tsx | Один фокус-слайд (базовый вариант FocusChain) | | **TypeComposition** | TypeComposition.tsx | Шрифтовая композиция: condensed побуквенно + рукописное поверх с наклоном/наложением + чипы; буквы «живые» после посадки | | **KineticCaption** | KineticCaption.tsx | Пословные субтитры: разные позиции/шрифты/эффекты на слово + обводка draw-on | | **ObjectShot** | ObjectShot.tsx | Статичный вырезанный объект (PNG) на бумаге: idle ±4°/±14px, тень, чип | | **ObjectVideoShot** | ObjectVideoShot.tsx | Анимированный объект-ВИДЕО с обтравкой (прозрачный webm) — напр. «больная→здоровая печень» | | **StickerPop** | StickerPop.tsx | 3D-стикер: из пустоты с bounce, РЕАЛЬНО гнётся (strip-wave), выпрямляется, в пустоту | | **PhotoUnfold** | PhotoUnfold.tsx | Фото разворачивается из мятого клочка (Grok i2v → обтравка) на тёмной бумаге | | **ArchiveFrame** | ArchiveFrame.tsx | Архив-видео в скруглённом фрейме на тёмной бумаге: кино-грейд, радиальный DoF, волнистые края | | **MockupSpace** | MockupSpace.tsx | Интерфейс в 3D-пространстве: телефон под углом, скролл реального UI-скриншота, карточки вылетают из плоскости | | **MapRoute** | MapRoute.tsx | Маршрут на плоской OSM-карте (2D-fallback для локальных сцен) | | **GlobeRoute** | GlobeRoute.tsx | Маршрут на 3D-ГЛОБУСЕ (three.js): рельефная Земля без подписей, космос, дуга + самолёт. Канон для перелётов | | **SubscribeFlow** | SubscribeFlow.tsx | «Подпишись»: элементы по очереди → курсор кликает лайк/подписку/колокольчик → уходит, всё тает | | **ZinePoster** | ZinePoster.tsx | Print-zine стиль: белая бумага, дидон с курсивными буквами, неон-плашка, рука рваным стоп-моушеном | | **VHSGlowDemo** | VHSGlow.tsx | Демо обёртки `VHSGlow` — ЛЮБОЙ контент → скан-линии + неон-glow + RGB-развал | | **FXShowcase** | PostFX.tsx | Витрина искажений: Halation · FilmBurn · GlitchSlices · DustScratches · LensWarp (обёртки поверх шота) | | **example-liver-S02…S11** | src/liver/ | Реальный шот-сет «печень» — пример применения шаблонов под конкретный сценарий | **Общая библиотека (не рендерятся сами):** `motion.ts` (пружины/easing/`alive`), `localFonts.ts` (трендовые шрифты uprock), `PaperFX.tsx` (`PaperStage` = живой видеофон-бумага + опц. VHS), `PostFX.tsx` (эффекты-обёртки), `VHSGlow.tsx` (VHS-обёртка). ## 3. Как менять контент Тексты/цвета/тайминги — прямо в .tsx шаблона (в начале каждого — константы и массив слов/слайдов). Пример: `FocusChain.tsx` → массив `SLIDES` (above/focus/below/dur). `TypeComposition.tsx` → строки заголовка + рукописное слово. Палитра под тему — константы вверху файла. ## 4. Плавность — ЖЕЛЕЗНОЕ правило (`MOTION.md`) Никогда `linear`. Вход — `spring()` (пресеты `SPRING.*`), `interpolate` — только с `EASE.*` + clamp. Стаггер 40-60мс/символ. После посадки элементы «дышат» (`alive()`). Всё тянется из `motion.ts`. ## 5. Пайплайн генерации ассетов (для НОВЫХ объектов — опционально) Шаблоны с объектами (`ObjectShot`, `ObjectVideoShot`, `StickerPop`, `PhotoUnfold`) используют вырезанные PNG/webm в `public/gen/`. Примеры уже лежат. Чтобы сделать СВОИ: 1. **Картинка на зелёном:** генерь объект на сплошном `#00FF00`, поля ≥15%, промпт: *"…isolated on PURE FLAT solid bright chroma green background #00FF00, NO shadow on background"*. (У нас — Vertex Imagen; у вас — любой image-gen.) 2. **Статика → вырез:** `rembg` u2net + alpha matting → прозрачный PNG в `public/gen/`. Грабля: внутренние ДЫРЫ (отверстия) u2net не режет — дочистить зелёные пиксели по hue. 3. **Анимация объекта → видео:** оживить картинку image-to-video (у нас Grok). ПРАВИЛО промпта: *камера статична, объект в центре и НЕ выходит за кадр, фон сплошной неизменный* (потом кеится). 4. **Видео → обтравка:** сэмплить реальный цвет фона пипеткой (ген-зелёный ≠ #00FF00!) → `ffmpeg -i in.mp4 -vf "chromakey=0x<цвет>:0.12:0.06,despill=type=green" -c:v libvpx-vp9 -pix_fmt yuva420p out.webm`. Ч/Б-контент (серый = 0 хромы) → similarity **≤0.12**, иначе растворяется. Проверять кей на 1 кадре. 5. Положить webm/png в `public/gen/`, прописать имя в `src=staticFile("gen/…")` шаблона. **VHS/гранж — пост-обработкой ffmpeg** (не в компе): `rgbashift=rh=-3:bh=3, gblur=0.6, noise=c0s=9, eq=saturation=0.9, vignette=PI/5`. ## 6. Ассеты в комплекте (`public/`) - Видеофоны: `bg_paper.mp4` (клетка), `bg_paper_white.mp4`, `bg_paper_black.mp4`, `archive_seg.mp4`. - Шрифты: Ratanegra/Callysto/BenbowBold/GolosText/GolosBlack (.ttf) + MarckScript (из @remotion/google-fonts). - `gen/` — примеры объектов (печень, капсула, стикер, ui-скриншот, healing-webm, photo-unfold-webm). - `globe/` — текстуры Земли (blue-marble + topology) + самолёт. ## 7. Грабли рендера - **Шрифты:** грузятся через `localFonts.ts` (FontFace + один делей-хендл, таймаут-страховка 12с/шрифт). - **Глобус (three.js):** только с `--gl=angle --concurrency=1`. Дольше рендерится. - **Прозрачный webm:** при проверке декодировать с `-c:v libvpx-vp9` перед `-i` (нативный vp9 молча теряет альфу). - **Reset:** свой минимальный (`index.css`), НЕ tailwind. Если добавляете `` — ставьте `maxWidth:"none"` при 3D-разрезе на полоски. ## 8. Интеграция в пайплайн (рендер из кода) CLI как выше, либо Node API (`@remotion/renderer` `renderMedia`) — прокинуть `composition` (id), `outputLocation`, `inputProps`. Для батча — цикл по id из каталога. Выход — mp4 1080×1920. Готово к вставке шотами в монтаж (CapCut/ffmpeg concat). --- Вопросы по конкретному шаблону — смотри комментарий в шапке его .tsx (там расписана механика). Автор ядра: система Тимура. Версия модуля 1.0.