Scene и slide типы

Атомарные «кирпичики» компоновки для каруселей и explainer-видео. Carousel-слайды и explainer-сцены — это разные таксономии (разные движки, разные форматы), но единый подход: каждый тип задаёт композицию, обязательные поля и duration.

Часть 1 — Carousel slide types (10)

Используются в creative-carousel. Источник: ~/.claude/skills/creative-carousel/slide_types.yaml. На каждый тип есть свой Remotion TSX-компонент в remotion_template/src/slides/.

hook

Use case. Слайд 1. Scroll-stopper, основная задача — остановить свайп.

Composition. Massive headline на 50-60% canvas (Druk/Anton/Bebas-style display weight). Опционально small visual element (силуэт продукта / иконка) сверху или снизу. NO bullets, NO body text, NO badge.

Layout hints: headline ДОМИНИРУЕТ — 80-100pt; max 2-3 строки текста; single visual element или ничего; опционально swipe-cue стрелка в lower-right.

Required fields: headline. Optional: visual_hint.

problem

Use case. Слайды 2-3. Relatable pain point. Часто «before»-состояние, фрустрация, missed opportunity.

Composition. Empathetic statement headline (medium weight, 50-60pt). Subdued/desaturated палитра. Optional sub-text.

Layout hints: headline 50-60pt; muted/desaturated палитра для «before»; опционально 1-2 line supporting sentence.

Required: headline. Optional: supporting_text.

product

Use case. Hero-шот аппарата / устройства / услуги. Как product_hero_clean пресет, но в формате одного слайда.

Composition. Продукт 60-70% canvas. Clean brand-color градиент. Tiny model name caption (например «TESLA T608») в углу.

Layout hints: продукт по центру или rule-of-thirds; минимум текста — только model name; studio-softbox-result lighting (БЕЗ оборудования).

Required: visual_hint (опис продукта), product photo через --product-photo. Optional: headline (модель).

stats

Use case. Большая цифра — ROI / payback / monthly income / patient flow. Math-anchor одной dramatic статой.

Composition. ОДНА огромная цифра (200pt+) в brand-accent (gold/cyan). Tiny label снизу («дней до окупаемости», «млн ₸/мес»). Опционально supporting bar/arc.

Layout hints: number — THE hero, 200pt+; label small (24-32pt) снизу; high-contrast — тёмный bg + accent number.

Required: headline (число), subhead (label). Optional: visual_hint.

list

Use case. Features / benefits / steps. 3-5 items max с краткими описаниями.

Composition. Numbered 01/02/03 с brand-accent number, body справа. Каждый item — одна строка. Tight spacing. Без background shape за текстом.

Layout hints: max 5 items, идеально 3; numbers в accent color, body в white; left-aligned vertical stack.

Required: bullets (массив). Optional: headline.

process

Use case. 3-4 этапа «как работает». Стиль «купил → обучили → зарабатываешь».

Composition. Horizontal/vertical stepper со стрелками. Каждый шаг — number + 2-word label + tiny icon. Clean tech-diagram aesthetic.

Layout hints: 3-4 шага max; стрелки/connectors между шагами; consistent icon style (line-icons, не фото).

Required: bullets (3-4 шага). Optional: headline.

comparison

Use case. A/B — before vs after, your clinic vs competitor, with vs without.

Composition. 50/50 split с чётким divider. Левая сторона — problem (muted/red tint), правая — solution (brand color / green tint). Headers сверху каждой стороны.

Layout hints: vertical / diagonal split; clear visual contrast между сторонами; labels для каждой.

Required: headline, supporting_text с before/after данными.

proof

Use case. Testimonial / case study с конкретными числами. «Клиника X в Алматы окупила за 45 дней».

Composition. Quote-style layout с большой opening quotation mark. Quote text в italic или roman. Attribution снизу (name + role + city). Optional product-thumbnail / location pin.

Layout hints: большая quotation mark как декоративный элемент; quote 32-40pt italic; attribution 18-22pt smaller.

Required: headline (quote), subhead (attribution).

faq

Use case. Один Q&A. Снимает возражение. «А что если..?» / «Сколько займёт..?»

Composition. Question как headline (опц. с «?» иконкой), answer как body снизу. Calm reassuring tone. Опц. confidence badge («гарантия 12 мес»).

Layout hints: question 36-44pt; answer 24-30pt, более spacious; soft reassuring palette.

Required: headline (вопрос), supporting_text (ответ).

cta_swipe

Use case. ПОСЛЕДНИЙ слайд — invitation to act. НИКАКОЙ кнопки (Meta добавляет CTA автоматически через page connection). Текстовое action-message: «Пишите в WhatsApp», «Сохраните пост», «Свайп ↑».

Composition. Bold action headline + brand mark area (логотип Meta добавит сам). Опц. swipe-up arrow indicator (визуальный cue, не button). Brand-color background.

Layout hints: action headline 50-60pt; НЕТ button-rectangle — text-only invitation; swipe-cue стрелка только как визуал.

Required: headline. Optional: subhead.

Carousel templates (5)

Template	Slide chain	Когда
`product_launch`	hook → problem → product → stats → process → proof → cta_swipe	Запуск нового продукта/аппарата B2B (дефолт для медтехники)
`sale_promo`	hook → stats → comparison → list → cta_swipe	Акция / спецпредложение / распродажа
`case_study`	hook → problem → process → stats → proof → cta_swipe	Кейс одного клиента — глубокий разбор
`educational`	hook → list → process → faq → cta_swipe	Образовательный пост — учим чему-то полезному
`comparison_vs`	hook → comparison → list → stats → cta_swipe	Сравнение: ваш продукт vs альтернативы

Часть 2 — Explainer video scene types (9)

Используются в creative-explainer-video. Источник: ~/.claude/skills/creative-explainer-video/scene_types.yaml. На каждый тип есть свой Remotion TSX-компонент в remotion_template/src/scenes/.

Главное отличие от carousel-слайдов: у explainer-сцены всегда есть длительность (duration_seconds), которая заполняется ПОСЛЕ генерации VO. До этого она null. План сцены — это рецепт визуала + текст озвучки.

title_card

Use case. Intro или outro с одним big-statement по центру. Subtle motion (gentle zoom/fade) на фоне; text fades in с лёгкой scale-анимацией. Сцена 1 и (опционально) последняя.

Visual recipe: huge headline 100-140pt по центру, subtle motion bg, никакого clutter.

Duration: 3-5 сек.

Required: vo_text, on_screen_text. Optional: visual_hint.

bullet_list

Use case. 3-5 numbered bullet points с поэтапным reveal (staggered fade-in, 0.4с между айтемами). Каждый bullet — tiny number + bold short phrase.

Visual recipe: 01/02/03/04 numbered, left-aligned, ~32-40pt body.

Duration: 8-15 сек.

Required: vo_text, bullets. Optional: on_screen_text, visual_hint.

product_callout

Use case. Hero-шот продукта/аппарата с animated arrow + label callouts на конкретные фичи. Camera-like slow pan или zoom по продукту.

Visual recipe: продукт по центру 60% кадра, 2-3 callout-стрелки fade in.

Duration: 8-12 сек.

Required: vo_text, callouts, asset_ref. Optional: on_screen_text, visual_hint.

Заметка: callouts — массив {x: 0-100, y: 0-100, label: string}.

screen_record

Use case. Embed mp4 / gif экранки (UI demo, app walkthrough). Auto-zoom на курсор / highlighted region. Опц. лёгкие keyboard/click SFX.

Visual recipe: screen capture в 100% playback, brand-color caption strip снизу.

Duration: 10-30 сек.

Required: vo_text, asset_ref. Optional: on_screen_text, highlights, visual_hint.

Заметка: asset_ref должен лежать в public/assets/, например crm_demo.mp4.

chart_reveal

Use case. Animated bar chart, line chart или single big-number count-up. Числа тикают с 0 к target за 1.5-2 сек. Brand-accent цвет баров.

Visual recipe: centered chart с grid lines, value count-up animation.

Duration: 5-10 сек.

Required: vo_text, chart_data. Optional: on_screen_text, visual_hint.

Заметка: chart_data: {kind: 'bar'|'line'|'big_number', labels: [], values: [], unit: '₸'|'%'|...}.

lower_third

Use case. Talking-head video сегмент (mp4 в asset_ref) с name+title strip, который выезжает слева снизу.

Visual recipe: background video + opaque brand-color rectangle bottom-left с name/title.

Duration: 3-6 сек.

Required: vo_text, speaker_name, speaker_title. Optional: asset_ref, on_screen_text.

before_after

Use case. 50/50 split-screen с left=before, right=after. Опц. reveal slider анимируется через кадр для drama.

Visual recipe: split frame, «ДО / ПОСЛЕ» лейблы в верхних углах, опц. sweep-transition.

Duration: 6-10 сек.

Required: vo_text, before_asset, after_asset. Optional: before_label, after_label, on_screen_text.

quote_card

Use case. Большая italic-quote с attribution. Маленькое portrait-фото (round) спикера снизу-слева. Subtle paper texture или solid brand-color bg.

Visual recipe: huge quote mark, italic 48-60pt quote, name+title small снизу.

Duration: 6-12 сек.

Required: vo_text, quote_text, attribution. Optional: portrait_asset, on_screen_text.

outro_cta

Use case. Closing scene. Bold action-statement (НЕ кнопка) в brand-accent color, призыв swipe/visit/follow. НИКАКИХ clickable-looking элементов (Meta/IG добавляют свой CTA-bar).

Visual recipe: centered bold statement, brand-accent color, supporting line снизу.

Duration: 4-6 сек.

Required: vo_text, on_screen_text. Optional: supporting_text, visual_hint.

Explainer templates (4)

Template	Scene chain	Когда
`tutorial`	title_card → bullet_list → screen_record → screen_record → bullet_list → outro_cta	Пошаговый how-to («как установить T608»)
`case_study`	title_card → lower_third → bullet_list → chart_reveal → before_after → quote_card → outro_cta	Клиентский success-кейс с метриками («Клиника в Актобе — 2.4M ₸/мес»)
`product_demo`	title_card → product_callout → product_callout → screen_record → chart_reveal → outro_cta	Hero-разбор продукта с фичами («T608 deep dive»)
`onboarding`	title_card → bullet_list → screen_record → bullet_list → screen_record → outro_cta	Обучающее видео клиент/staff («как онбордить новую клинику»)

Соответствие между формами

Некоторые сущности концептуально перекликаются между carousel и explainer — но это разные компоненты в разных Remotion-приложениях. Не пытайся reuse'ить TSX между скиллами.

Carousel slide	Explainer scene-аналог	Отличие
`hook`	`title_card`	Carousel = static image; explainer = animated с motion bg + VO
`product`	`product_callout`	Carousel — статичный hero; explainer — добавляет animated arrows + pan
`stats`	`chart_reveal`	Carousel — финальная цифра; explainer — анимация count-up к ней
`proof`	`quote_card`	Carousel — текстовый layout; explainer — добавляет portrait + VO с озвучкой quote
`comparison`	`before_after`	Carousel — static split; explainer — может быть reveal-slider
`cta_swipe`	`outro_cta`	Концептуально одно: action statement без кнопки

Когда добавляешь новый тип — определи, это carousel-only, explainer-only или нужен везде. В каждый скилл добавляешь свой TSX. Зарегистрируй в соответствующем yaml-файле (slide_types.yaml / scene_types.yaml). orchestrator подхватит автоматически.