# 🎨 Creative Direction — Stories Series

> **Статус:** Foundation v1.0 (2026-07-05)  
> **Проект:** Серия рекламных Stories-роликов (WhatsApp / Instagram / Telegram / VK)  
> **Формат:** Вертикальное видео 1080×1920 (9:16)  
> **Стиль:** Bauhaus + Apple Fusion — минимализм, функциональность, технологичность

---

## 1. BRAND DNA

### 1.1 Архетип бренда: The Architect / The Sage

> Строим системы. Не продаём услуги.  
> Наш бренд — это инженерная точность, структурная ясность, технологическая глубина.

**Характер:**
- Уверенный, но не хвастливый
- Говорит фактами, не эмоциями
- Решения, не обещания
- Прозрачность > мистификация

**Не:**
- Не "креативное агентство"
- Не "инновационные AI-решения"
- Не "трансформируем ваш бизнес"
- Не клише, не buzzwords

---

## 2. VISUAL IDENTITY

### 2.1 Цветовая система

| Роль | Hex | Usage |
|------|-----|-------|
| **Canvas** | `#050508` | Фон (deep space black) |
| **Surface** | `#0D0D14` | Карточки, панели |
| **Ink** | `#FFFFFF` | Основной текст |
| **Ink-muted** | `rgba(255,255,255,0.55)` | Вторичный текст |
| **Accent-primary** | `#0F62FE` | IBM Carbon B2 — CTA, акценты |
| **Accent-cyan** | `#00B8D4` | AI/tech elements |
| **Accent-purple** | `#8A2BE2` | Инновации, градиенты |
| **Warning** | `#E34850` | Pain-элементы, штрафы, ошибки |
| **Success** | `#18A55A` | Результаты, решения, метрики |
| **Divider** | `rgba(255,255,255,0.08)` | Линии, разделители |

**AI Gradient (для AI-продуктов):**
```
linear-gradient(135deg, #00B8D4 0%, #8A2BE2 50%, #0F62FE 100%)
```

**Gradient Warm (для ROI/money-контента):**
```
linear-gradient(135deg, #18A55A 0%, #0F62FE 100%)
```

### 2.2 Типографика

| Элемент | Шрифт | Вес | Размер | Tracking |
|---------|-------|-----|--------|----------|
| Hero Text | Inter | 900 (Black) | 110px | -0.03em |
| Headline | Inter | 800 | 68px | -0.02em |
| Subheadline | Inter | 700 (Bold) | 48px | -0.01em |
| Body | Inter | 500 (Medium) | 40px | 0 |
| Monospace (data) | JetBrains Mono | 400 | 32px | -0.02em |
| CTA Button | Inter | 800 | 52px | 0.05em uppercase |
| Small label | Inter | 600 | 28px | 0.08em uppercase |

### 2.3 Компоновка кадра (1080×1920)

```
┌──────────────────────────┐
│  ▄▄▄▄ SAFE ZONE 280px   │  ← Не трогать (WhatsApp/IG UI overlay)
│  [Logo / Brand mark]     │
│                          │
│                          │
│     ┌──────────────┐     │
│     │  HOOK TEXT   │     │  ← Hero 110px
│     │   (макс 2    │     │      Центр-верх
│     │    строки)    │     │
│     └──────────────┘     │
│                          │
│     ┌──────────────┐     │
│     │   BODY TEXT  │     │  ← Pain/Solution 40-48px
│     │   (макс 3    │     │      Центр
│     │    строки)    │     │
│     └──────────────┘     │
│                          │
│                          │
│  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  │  ← Не трогать (IG/Telegram UI)
│  [CTA Button]  [Link]    │      Низ 1240-1920px
└──────────────────────────┘
```

**Safe area:** Y=280px → Y=1540px (доступно 1260px высоты для контента)

### 2.4 Элементы дизайна

**Карточки данных:**
- Фон: `rgba(255,255,255,0.04)`
- Border: `1px solid rgba(255,255,255,0.08)`
- Border-radius: `16px`
- Padding: `40px`

**Графические маркеры:**
- Тонкие линии (1px `rgba(255,255,255,0.15)`)
- Точки/индикаторы (6px circles)
- Горизонтальные акцент-линии (2px accent)

**Декоративные элементы:**
- Минимальные сетки/линии на фоне (опционально)
- Градиентные блобы на заднем плане (opacity 0.03–0.06)
- Без текстур, без шумов, без паттернов

---

## 3. MOTION DESIGN

### 3.1 Анимационные принципы

1. **Функция > Форма** — каждая анимация должна помогать понимать контент
2. **Меньше = больше** — не более 2 одновременных анимаций на сцене
3. **Физика реального мира** — ease-in-out, инерция, вес
4. **Последовательность** — элементы появляются строго по таймлайну
5. **Читаемость > Красота** — если анимация мешает прочитать, убери анимацию

### 3.2 Библиотека анимаций

| Имя | Тип | Вход | Выход | Длительность | Easing |
|-----|-----|------|-------|-------------|--------|
| `fade-up` | Entrance | `opacity:0, y:60` | `opacity:1, y:0` | 0.6s | `power3.out` |
| `scale-up` | Entrance | `opacity:0, scale:0.8` | `opacity:1, scale:1` | 0.7s | `back.out(1.7)` |
| `slide-left` | Entrance | `opacity:0, x:80` | `opacity:1, x:0` | 0.5s | `power3.out` |
| `fade-in` | Entrance | `opacity:0` | `opacity:1` | 0.4s | `power2.out` |
| `count-up` | Entrance | `value:0` | `value:N` | 1.2s | `power2.inOut` |
| `pulse` | Hold | — | scale 1.0→1.05→1.0 | 0.8s | `sine.inOut` yoyo×2 |
| `wipe-out` | Exit | — | `opacity:0, y:-30` | 0.25s | `power2.in` |

### 3.3 Timing rules

- **Hook entrance:** 0.3s delay от начала сцены
- **Body entrance:** stagger +0.15s относительно предыдущего элемента
- **Scene transition:** crossfade 0.15s (предыдущая сцена уходит, новая появляется)
- **CTA hold:** минимум 2 секунды видимости
- **Total scene duration:** 3–5s (hook), 4–6s (solution), 3–4s (CTA)

---

## 4. CONTENT FRAMEWORK

### 4.1 Рубрикатор (контентные категории)

| Категория | Цель | Формула | Частота |
|-----------|------|---------|---------|
| 🔥 **Pain** | Попасть в боль | Факт/цифра/вопрос → узнавание | 40% |
| 💡 **Solution** | Показать продукт | Проблема → решение → выгода | 30% |
| 📊 **Proof** | Доверие | Цифра кейса → социальное доказательство | 15% |
| ⚡ **Quick Win** | Польза | Лайфхак/инсайт за 10s | 10% |
| 🎯 **Brand** | Позиционирование | Философия, миссия, видение | 5% |

### 4.2 Формула ролика (15s standard)

```
┌────────────────────────────────────────────────┐
│ 0–2s  HOOK     │ Цепляющий вопрос или факт    │ ← Остановка скролла
│ 2–7s  PAIN     │ Проблема, которую узнаёт ЦА  │ ← Эмоциональный крючок
│ 7–12s SOLUTION │ Продукт как ответ            │ ← Рациональное решение
│ 12–15s CTA     │ Конкретное действие           │ ← Что делать дальше
└────────────────────────────────────────────────┘
```

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

### 4.3 Template-система

**Template A — Pain/Agitate/Solve (15s)**
- Hook: Шокирующий факт/вопрос
- Pain: Проблема × контекст
- Solution: Продукт → выгода
- CTA: Действие

**Template B — How It Works (20s)**
- Hook: "Как [X] решает [Y]"
- Steps: 3 визуальных шага
- Result: Конкретная метрика
- CTA: Ссылка

**Template C — Before/After (15s)**
- Hook: "До / После"
- Before: Ручная рутина, потери
- After: Автоматизация, результат
- CTA: Попробуй

**Template D — Number Fact (10s)**
- Hook: Крупная цифра
- Context: Что она значит
- CTA: Узнай больше

---

## 5. PRODUCT MESSAGING

### 5.1 ROI24 — Автоматизация маркетинга

| Элемент | Текст |
|---------|-------|
| **Одно предложение** | Платформа автоматизации маркетинга на 7 площадках с AI-генерацией |
| **Hook (pain)** | "Сколько лидов утекает пока вы спите?" |
| **Solution** | "AI-боты обрабатывают лиды 24/7. Вы — только закрываете сделки." |
| **Proof** | "10 000+ компаний уже автоматизировали" |
| **CTA** | "Попробуй бесплатно →" |

### 5.2 Call24 — AI-аналитика звонков

| Элемент | Текст |
|---------|-------|
| **Одно предложение** | Каждый звонок — аналитика. Не мнение. |
| **Hook (pain)** | "Ваш менеджер врёт. И вы это знаете." |
| **Solution** | "AI анализирует 100% звонков. Реальные инсайты для роста продаж." |
| **Proof** | "Средний рост конверсии +34% после внедрения" |
| **CTA** | "Слушай демо →" |

### 5.3 152-fz Checker

| Элемент | Текст |
|---------|-------|
| **Одно предложение** | Проверка сайта на 152-ФЗ за 5 секунд. Не за 500K ₽. |
| **Hook (pain)** | "Штраф за 152-ФЗ: до 6 000 000 ₽ за один сайт" |
| **Solution** | "Автосканирование за 5 секунд. Полный чек-лист соответствия." |
| **Proof** | "500+ проверок в день. 0 пропущенных нарушений." |
| **CTA** | "Проверь свой сайт →" |

### 5.4 Локальный AI

| Элемент | Текст |
|---------|-------|
| **Одно предложение** | LLM на своём сервере. Данные не уходят в облако. |
| **Hook (pain)** | "Облачный ИИ — это данные третьей стороны." |
| **Solution** | "Qwen3.6 на своём железе. Полный контроль. API совместим с OpenAI." |
| **Proof** | "2×RTX 3080 Ti · 140 tok/s · Без подписок" |
| **CTA** | "Собери свой AI-кластер →" |

---

## 6. AUDIO STRATEGY

### 6.1 Звуковой дизайн

**Голос (TTS):**
- Если нарратив нужен: мужской, спокойный, уверенный тембр
- Скорость: 1.1× (чуть быстрее естественного — удерживает внимание)
- Акцент: нейтральный российский

**Музыка (BGM):**
- Mood: технологичный, минималистичный, не отвлекающий
- BPM: 90–110 (спокойный, не агрессивный)
- Инструменты: синтезаторы, ambient pads, минимальный beat
- Volume: -20dB относительно голоса (фон, не доминанта)

**SFX (звуковые эффекты):**
- Transition whoosh: мягкий, короткий (0.15s)
- Click/tap: для появления элементов (0.08s)
- Subtle bass drop: для акцентных моментов (1.2s)

### 6.2 Правила аудио

1. 85% Stories смотрятся БЕЗ звука → текст на экране обязателен
2. Если есть нарратив — дублировать субтитрами
3. Без звука ролик должен быть ПОЛНОСТЬЮ понятен
4. Музыка не должна перекрывать голос (sidechain compression)

---

## 7. PRODUCTION PIPELINE

### 7.1 Процесс создания ролика

```
1. BRIEF          → Выбрать рубрику + продукт + template
2. SCRIPT         → Написать текст по формуле (Hook/Pain/Solution/CTA)
3. STORYBOARD     → Описать визуал каждого кадра
4. FRAME DESIGN   → Создать HTML-композицию в HyperFrames
5. ANIMATION      → Настроить GSAP timeline
6. VALIDATE       → lint → validate → inspect → snapshot
7. DRAFT RENDER   → npx hyperframes render --quality draft
8. REVIEW         → Просмотр, правки, итерации
9. FINAL RENDER   → npx hyperframes render --quality high
10. OPTIMIZE      → Оптимизация под платформы (размер, битрейт)
11. PUBLISH       → Загрузка на платформы
```

### 7.2 Quality Gates

- [ ] `npx hyperframes lint` — 0 ошибок
- [ ] `npx hyperframes validate` — 0 console errors
- [ ] `npx hyperframes inspect` — 0 errors
- [ ] `npx hyperframes snapshot` — текст в safe zone
- [ ] Контраст текста ≥ 4.5:1
- [ ] Текст читаем при просмотре на телефоне (не меньше 36px)
- [ ] Нет ошибок в текстах (орфография, цифры, факты)
- [ ] CTA виден ≥ 2 секунды

### 7.3 Оптимизация для платформ

| Платформа | Max size | Bitrate | Codec |
|-----------|----------|---------|-------|
| Instagram Stories | 30s / 4GB | 8–12 Mbps | H.264 |
| WhatsApp Status | 16 MB | 6–8 Mbps | H.264 baseline |
| Telegram Stories | 10 MB | 6–8 Mbps | H.264 |
| VK Клипы | 5 min | 10–15 Mbps | H.264 |

**WhatsApp constraint** (самый ограничивающий): 16MB, ≤30s. Целимся ≤10MB для запаса.

---

## 8. CONTENT CALENDAR (План серии)

### Wave 1: Foundation (неделя 1–2)
| # | Продукт | Рубрика | Template | Цель |
|---|---------|---------|----------|------|
| 1 | ROI24 | Pain | A | Остановка скролла фактом |
| 2 | Call24 | Pain | A | Эмоциональный hook |
| 3 | 152-fz | Pain | D | Шоковая цифра |
| 4 | Local AI | Brand | B | Позиционирование |
| 5 | All | Solution | A | Общий охват |

### Wave 2: Proof (неделя 3–4)
| # | Продукт | Рубрика | Template | Цель |
|---|---------|---------|----------|------|
| 6 | ROI24 | Proof | C | Социальное доказательство |
| 7 | Call24 | Solution | B | Как это работает |
| 8 | 152-fz | Solution | A | Простота использования |
| 9 | Local AI | Proof | D | Технические метрики |
| 10 | All | Quick Win | D | Быстрая польза |

---

## 9. DESIGN TOKENS (для повторного использования)

```yaml
# Colors
canvas: "#050508"
surface: "#0D0D14"
ink: "#FFFFFF"
ink-muted: "rgba(255,255,255,0.55)"
accent-primary: "#0F62FE"
accent-cyan: "#00B8D4"
accent-purple: "#8A2BE2"
warning: "#E34850"
success: "#18A55A"
divider: "rgba(255,255,255,0.08)"

# Gradients
ai-gradient: "linear-gradient(135deg, #00B8D4, #8A2BE2, #0F62FE)"
warm-gradient: "linear-gradient(135deg, #18A55A, #0F62FE)"

# Typography
font-primary: "Inter"
font-mono: "JetBrains Mono"
hero-size: "110px"
headline-size: "68px"
body-size: "40px"
small-size: "28px"

# Layout
safe-top: "280px"
safe-bottom: "380px"
content-height: "1260px"
card-radius: "16px"
card-padding: "40px"

# Animation
ease-out: "power3.out"
ease-in: "power2.in"
ease-back: "back.out(1.7)"
ease-sine: "sine.inOut"
transition-duration: "0.6s"
stagger: "0.15s"
```

---

*Creative Direction Foundation — living document. Обновляется по мере разработки роликов и получения данных о вовлечённости.*