initial: ads-stories project with interesting theme

STORYBASE.md

@@ -0,0 +1,397 @@
+# 📐 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 и данных.*