neo/ads-stories
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
ads-stories/STORYBASE.md
T

21 KiB
Raw Permalink Blame History

📐 STORYBASE — База для серии Stories-роликов

Статус: Foundation Document v1.0 (2026-07-05)
Автор: Architect (Никита)
Назначение: Единый источник истины для всей серии вертикальных рекламных роликов (Stories/Reels/Shorts)
Формат: 1080×1920 (9:16) — универсально для WhatsApp Stories, Instagram, Telegram, VK

1. БИЗНЕС-ПРОФИЛЬ

1.1 Продуктовый портфель

# Продукт Тип Статус Описание
P1 ROI24 SaaS-платформа Production Автоматизация маркетинга: AI-генерация, чат-боты, рассылки, парсинг, упаковка
P2 Call24 SaaS-сервис Production AI-аналитика звонков: распознавание намерений, оценка менеджеров, инсайты
P3 152-fz checker Web-сервис Production Проверка сайтов и процессов на соответствие 152-ФЗ (персональные данные)
P4 Локальный AI Инфраструктура Production Развёртывание LLM на своём железе (Qwen3.6-35B-A3B, 2×RTX 3080 Ti)

1.2 Позиционирование

"Локальный AI-суверенитет для российского бизнеса"
Мы строим инфраструктуру: автоматизация, аналитика, защита данных, локальный ИИ.
Не консалтинг. Не аутсорс. Готовые продукты.

УТП:

  1. Полный контроль данных — локальное развёртывание, 152-ФЗ out-of-the-box
  2. Готовые продукты — не "интеграция под заказ", а SaaS, который работает сегодня
  3. Синергия экосистемы — ROI24 + Call24 + 152-fz + Local AI = полный цикл
  4. Техническая глубина — основано на реальном опыте (150+ ПК сеть, реальные GPU-кластеры)

1.3 Целевая аудитория (CVP — Customer Value Profile)

Primary: Владельцы бизнеса / CEO (60% фокуса)

  • Возраст: 30–50
  • Боль: "трачу на маркетинг, но не вижу возврата"
  • Язык: цифры, ROI, конкретика, без жаргона
  • Боли: потерянные лиды, неоптимизированные бюджеты, штрафы за 152-ФЗ
  • Мотивация: рост прибыли, контроль, конкурентное преимущество

Secondary: Технический директор / CTO (25% фокуса)

  • Возраст: 28–45
  • Боль: "зависимость от облаков, данные у третьих лиц"
  • Язык: архитектура, безопасность, масштабируемость, SLA
  • Боли: комплаенс, интеграции, производительность
  • Мотивация: независимость, контроль, предсказуемость

Tertiary: Маркетинг-директор (15% фокуса)

  • Возраст: 25–40
  • Боль: "инструменты не работают в связке"
  • Язык: метрики, конверсия, автоматизация
  • Боли: фрагментация каналов, ручная рутина, отсутствие сквозной аналитики
  • Мотивация: эффективность, автоматизация, data-driven решения

2. КОНТЕНТНАЯ СТРАТЕГИЯ

2.1 Рубрикатор

Рубрика Цель Формат Частота Продукт
🔥 Pain Попасть в боль ЦА 15s, контраст, шок-факт 40% Любая
💡 Solution Показать решение 15–20s, визуализация 30% P1–P4
📊 Social Proof Доверие, кейсы 15s, цифры, факты 15% Любая
⚡ Quick Win Быстрая польза 10–15s, лайфхак 10% Любая
🎯 Brand Позиционирование 15s, философия 5% Все

2.2 Контентный микс по продуктам

Продукт Рубрика Пример заголовка
ROI24 Pain "Сколько лидов утекает пока вы спите?"
ROI24 Solution "3 автоматизации, которые заменят 5 маркетологов"
Call24 Pain "Ваш менеджер врёт. И вы это знаете."
Call24 Solution "Каждый звонок — аналитика. Не мнение."
152-fz Pain "Штраф за 152-ФЗ: сколько стоит один клик"
152-fz Solution "Проверка сайта за 5 секунд. Не за 500K ₽"
Local AI Solution "LLM на своём сервере. Данные не уходят в облако."
Local AI Brand "ИИ, которому доверяют. Локальный, контролируемый, ваш."

2.3 Формула каждого ролика

0–2s   : HOOK — цепляющий вопрос/факт/число (остановка скролла)
2–7s   : PAIN — проблема, которую зритель узнает
7–12s  : SOLUTION — ваш продукт как ответ
12–15s : CTA — конкретное действие (ссылка в шапке профиля)

Правило 3-х секунд: Если нет хука до 3-й секунды — ролик не работает.

3. КРЕАТИВНАЯ НАПРАВЛЕННОСТЬ

3.1 Дизайн-система

Базовая: Bauhaus + Apple fusion (согласно AGENTS.md)

  • Минимализм, геометрия, функциональная эстетика
  • Много воздуха, чёткая типографика, отсутствие визуального шума
  • Вдохновение: Apple product pages, Bauhaus exhibition designs

Цветовая палитра:

  • Primary Dark: #050508 (фон, глубокий чёрный)
  • Primary White: #FFFFFF (текст, акцентный)
  • Accent Blue: #0F62FE (IBM Carbon B2 — кнопка, CTA)
  • Accent Cyan: #00B8D4 (технологичность, AI)
  • Accent Purple: #8A2BE2 (инновации, AI-градиент)
  • Gradient AI: #00B8D4 → #8A2BE2 → #0F62FE (AI-контент)
  • Warning: #E34850 (боли, штрафы, проблемы)
  • Success: #18A55A (решения, результаты)
  • Muted: rgba(255,255,255,0.5–0.7) (вторичный текст)

3.2 Типографика

  • Заголовки (Hero): Inter Bold/Black, 110–120px, tight tracking (-0.03em)
  • Подзаголовки: Inter SemiBold, 68–72px, tight tracking
  • Основной текст: Inter Regular/Medium, 42–48px, line-height 1.4
  • Моноширинный (для данных/кода): JetBrains Mono, 32px
  • CTA (кнопка): Inter Bold, 52px, uppercase, letter-spacing 0.05em

3.3 Движение и анимация

Принцип: Минимальные анимации, максимальная читаемость. Каждая анимация должна служить пониманию, а не украшательству.

Анимационный словарь:

  • fade-up — плавное появление снизу (основной entrance)
  • scale-up — появление с масштабированием (для CTA, цифр)
  • slide-left — сдвиг слева направо (для последовательных элементов)
  • fade-in — простое появление (для текста)
  • pulse — лёгкая пульсация (для CTA, акцентов)
  • count-up — анимация счётчика (для цифр, метрик)

Правила анимации:

  1. Время entrance: 0.5–0.8s, ease: power3.out
  2. Время exit: 0.25–0.35s, ease: power2.in
  3. Stagger между элементами: 0.1–0.15s
  4. Никаких бесконечных анимаций (repeat: -1 запрещён)
  5. Каждый элемент появляется и исчезает по таймлайну

3.4 Композиция кадра (1080×1920)

┌─────────────────────────┐
│  Safe zone (top 15%)    │  ← Логотип / Брэндинг (не тропаемый UI)
│                         │
│  ┌───────────────────┐  │
│  │    HERO TEXT      │  │  ← Hook (центр-верх)
│  │   (110px, bold)   │  │
│  └───────────────────┘  │
│                         │
│                         │
│  ┌───────────────────┐  │
│  │   BODY TEXT       │  │  ← Pain/Solution
│  │   (42-48px)       │  │
│  └───────────────────┘  │
│                         │
│  Safe zone (bottom 20%) │  ← CTA + кнопка (не перекрывается UI)
└─────────────────────────┘

Safe zones:

  • Верх: минимум 280px от верха (Instagram/WhatsApp UI overlay)
  • Низ: минимум 380px от низа (WhatsApp/Telegram UI overlay)
  • Безопасная область текста: Y=280px — Y=1540px (1260px высота для контента)

3.5 Tone of Voice

  • Уверенный, но не самонадеянный. Знает, но не давит.
  • Цифры > прилагательные. "Экономит 40 часов/мес" не "очень экономит".
  • Прямой, без воды. Как разговор с инженером, который решил проблему.
  • Технически точный. Нет "ИИ-волшебство", есть конкретные механизмы.
  • Российский контекст. Понимает локальные боли (152-ФЗ, импортозамещение, локальный ИИ).

4. ТЕХНИЧЕСКАЯ СПЕЦИФИКАЦИЯ

4.1 Формат и рендер

Параметр Значение
Разрешение 1080 × 1920 px (9:16)
Длительность 10–15 секунд (sweet spot для Stories)
FPS 30fps (достаточно для motion design)
Формат рендера MP4 (H.264, High Profile)
Bitrate 8–12 Mbps
Аудио Опционально, AAC 192kbps
Подписи Обязательно (85% Stories смотрятся без звука)

4.2 HyperFrames проект

ads-stories/
├── index.html              # Главная композиция (master timeline)
├── compositions/
│   └── scene-NN-*.html     # Фреймы-субкомпозиции (если нужны)
├── assets/                 # Логотипы, иконки, медиа
├── hyperframes.json        # Метаданные проекта
├── frame.md                # Дизайн-система (цвет, тип, layout)
├── STORYBOARD.md           # План роликов (shot-by-shot)
└── renders/                # Рендеры MP4

4.3 Технический стек

  • HyperFrames v0.7.33 — рендер видео из HTML
  • GSAP 3.14 — timeline-based анимации
  • Inter + JetBrains Mono — шрифты (Google Fonts)
  • FFmpeg 8.1 — финальная обработка, конвертация, оптимизация

4.4 Quality Gates (перед рендером)

  • npx hyperframes lint — 0 ошибок
  • npx hyperframes validate — 0 console errors
  • npx hyperframes inspect — 0 errors (warnings acceptable)
  • npx hyperframes snapshot --at <midpoints> — визуальная проверка
  • Текст в safe zone (не перекрывается UI)
  • Контраст текста ≥ 4.5:1 (WCAG AA)
  • Нет display/visibility в анимациях
  • Все data-composition-id уникальны
  • Все clip-элементы имеют class="clip"

4.5 Экспорт для платформ

Платформа Требования
Instagram Stories 1080×1920, MP4, ≤30s, ≤4GB
WhatsApp Status 1080×1920, MP4/H.264, ≤16MB, ≤30s
Telegram Stories 1080×1920, MP4, ≤10MB, ≤60s
VK Клипы 1080×1920, MP4, ≤5 мин

Оптимизация для WhatsApp (самый ограничивающий):

  • Размер файла: ≤16MB
  • Х264 baseline, ≤30fps
  • Аудио: AAC, ≤128kbps

5. СЛОВАРЬ ПРОДУКТОВ (для использования в роликах)

ROI24

  • Одно предложение: Платформа автоматизации маркетинга на 7 площадках с AI-генерацией контента и чат-ботами
  • Цифры: 10 000+ пользователей (рынок), ROI 3–5×
  • Ключевые фичи: AI-контент, чат-боты, рассылки, парсинг ВК, упаковка Avito/YouTube
  • Конкурентное преимущество: Все инструменты в одной платформе, не разрозненные сервисы

Call24

  • Одно предложение: AI-аналитика звонков: понимает каждый разговор, улучшает каждый вызов
  • Цифры: 100% звонков анализируются, не выборка
  • Ключевые фичи: Распознавание намерений, оценка менеджеров, инсайты для роста продаж
  • Конкурентное преимущество: Встроен в CRM, реальный time, не "замер"

152-fz checker

  • Одно предложение: Проверка сайта и процессов на соответствие 152-ФЗ за секунды, а не за сотни тысяч
  • Цифры: Штрафы до 6M ₽, проверка за 5 секунд
  • Ключевые фичи: Автосканирование, чек-лист соответствия, отчёт для регулятора
  • Конкурентное преимущество: Автоматизация того, что раньше делали юристы за 500K ₽

Локальный AI

  • Одно предложение: Развёртывание LLM на своём железе. Данные не уходят в облако.
  • Цифры: Qwen3.6-35B-A3B, 2×RTX 3080 Ti, ~140 tok/s
  • Ключевые фичи: Полная изоляция данных, API совместимый с OpenAI, без подписок
  • Конкурентное преимущество: Готовая инфраструктура, не "консультация как настроить"

6. БЛОК-ПЛАНЫ РОЛИКОВ (шаблоны)

Template A: Pain → Agitate → Solve (15s)

0–2s:  HOOK — Шокирующий факт или вопрос
2–7s:  PAIN — Проблема, с которой узнаёт зритель
7–12s: SOLUTION — Ваш продукт как ответ (кратко)
12–15s: CTA — Ссылка в шапке профиля / "Проверь бесплатно"

Template B: How It Works (20s)

0–3s:  HOOK — "Как [продукт] решает [проблему]"
3–10s: 3 шага (визуализация процесса)
10–17s: Результат (конкретная цифра/выгода)
17–20s: CTA

Template C: Comparison (15s)

0–2s:  HOOK — "До / После"
2–8s:  BEFORE — как было (рутина, потери, ошибки)
8–13s: AFTER — как стало (автоматизация, контроль, рост)
13–15s: CTA

Template D: Number Fact (10s)

0–3s:  HOOK — Крупная цифра + вопрос
3–8s:  Контекст (что значит эта цифра)
8–10s: CTA

7. ПРАВИЛА ПРОИЗВОДСТВА

7.1 Приоритеты контента

  1. Текст > Анимация — если анимация мешает прочитать, убери анимацию
  2. Цифры > Прилагательные — "−40% затрат" лучше "значительно снижает"
  3. Конкретика > Общие фразы — "152-ФЗ, штраф до 6M ₽" лучше "соблюдай закон"
  4. Одна мысль = один ролик — не смешивай ROI24 и Call24 в одном кадре
  5. CTA всегда видим — кнопка/призыв в нижней safe zone, не перекрывается

7.2 Запреты

  • ❌ Бесконечные анимации (repeat: -1, yoyo без явного конца)
  • ❌ display: none/block в анимациях (ломает seekability)
  • ❌ Текст за пределами safe zone
  • ❌ Шрифты меньше 36px для основного текста
  • ❌ Градиенты с контрастом < 3:1
  • ❌ Больше 2 анимаций одновременно на сцене
  • ❌ Использование Math.random() на рендере
  • ❌ Сетевые запросы из композиции

7.3 Процесс создания

1. Выбор рубрики из §2.1
2. Написание сценария по §2.3
3. Проверка по чек-листу §4.4
4. Рендер в draft (npx hyperframes render --quality draft)
5. Просмотр → правки → повтор
6. Рендер в final (npx hyperframes render --quality high)
7. Оптимизация для каждой платформы (размер файла)

8. БЮДЖЕТ И РЕСУРСЫ

8.1 Что уже есть

  • ✅ HyperFrames v0.7.33 (рендер)
  • ✅ FFmpeg 8.1 (обработка)
  • ✅ Node.js 20 (среды выполнения)
  • ✅ AMD Ryzen 7 7700X / 90GB RAM (производительность)
  • ✅ Дизайн-система (Bauhaus+Apple, Inter)
  • ✅ 4 готовых продукта для рекламы

8.2 Что нужно для production

  • Логотипы продуктов (SVG, прозрачный фон)
  • Favicon/brand mark (для watermark)
  • TTS-голос (если нужен нарратив)
  • Framerate: 30fps (достаточно для motion design, не 60fps)
  • Базовые звуковые эффекты (SFX) для переходов (опционально)

8.3 Rerender budget

  • ~15s ролик: 30–90 секунд локального рендера
  • ~5–10 секунд на кадр (30fps → 450 кадров)
  • Тестовый рендер → правки → финал

9. КРИТЕРИИ УСПЕХА

KPI для Stories-роликов

Метрика Target Измерение
Completion Rate ≥ 65% Instagram/Telegram insights
Swipe Up / Tap Rate ≥ 3% Ссылки в шапке профиля
Profile Visits +15% / ролик Insights за 24ч после публикации
Saves / Shares ≥ 1% Показатель viral-коэффициента
Re-engagement +10% Возвраты из Stories в сайт

Quality checklist для каждого ролика

  • Текст читается на 9:16 без зума
  • Цвета соответствуют палитре §3.1
  • Анимации ≤ 3 одновременных
  • CTA виден ≥ 3 секунды
  • Файл ≤ 16MB (WhatsApp constraint)
  • Safe zone соблюдена
  • Нет орфографических ошибок
  • Ролик имеет ONE чёткое послание

10. ИСТОРИЯ ВЕРСИЙ

Версия Дата Изменения Автор
v1.0 2026-07-05 Initial — полный фреймворк Architect

Этот документ — living document. Обновляй по мере появления новых продуктов, insights и данных.

Reference in new issue View Git Blame Copy Permalink