---
name: demo-animation
description: "Работа с анимированной демонстрацией пайплайна Davai в стилизованном VSCode-терминале. Используй при изменении сценария демо, добавлении/редактировании фаз анимации, настройке typewriter-эффекта, навигации по фазам или стилизации терминала."
---

# Demo Animation

Секция демо — ключевой элемент лендинга. Это стилизованный VSCode/терминал, показывающий 5 фаз пайплайна Davai.

## Архитектура

- **HTML**: div с классом терминала, моноширинный шрифт (JetBrains Mono), цветные span-ы для подсветки
- **CSS**: стилизация окна терминала (заголовок с кнопками, тёмный фон, скруглённые углы), анимации `@keyframes`
- **JS** (`demo.js`): оркестрация анимации, typewriter-эффект, навигация по фазам

## Сценарий демо — URL Shortener

Демо показывает создание сервиса коротких ссылок с аналитикой:

**Фаза 1 — Product Spec:**
- User: "Хочу сервис коротких ссылок с аналитикой"
- CEO спрашивает: "Для кого? Нужны ли кастомные алиасы?"
- User: "Для маркетологов, да, кастомные алиасы"
- Результат: спека готова, 4 must-have фичи

**Фаза 2 — Tech Stack:**
- CEO: "Рекомендую: Bun + Hono + PostgreSQL + Redis"
- Стек подобран с обоснованием

**Фаза 3 — Tools & Skills:**
- Подобраны скиллы: webapp-testing, API-design
- Настроен MCP для базы данных

**Фаза 4 — Architecture:**
- 10 задач: от схемы БД до деплоя
- Каждая с definition of done

**Фаза 5 — Security:**
- Защита от open redirect, rate limiting, валидация URL
- Davai сам продумал то, о чём пользователь бы не подумал

## Структура данных фаз

Массив из 5 объектов фаз:
```js
const phases = [
  {
    id: 1,
    titleKey: "demo.phase1.title",  // i18n-ключ
    lines: [
      { text: "CEO: Расскажите вашу идею...", type: "prompt", delay: 50 },
      { text: "User: Хочу сделать...", type: "user-input", delay: 30 },
      { text: "✓ Product spec ready", type: "success", delay: 0 }
    ],
    duration: 5000  // мс
  },
  // ... фазы 2-5
];
```

## Typewriter-эффект

Посимвольный вывод через `setTimeout` с настраиваемой задержкой (`delay` в мс на символ). Типы строк (`type`) определяют CSS-класс для цвета.

## Навигация по фазам

- Индикатор над демо показывает текущую фазу (1-5)
- Клик по индикатору фазы — переключает на неё (пропуск/перемотка)
- Автопереход на следующую фазу после завершения текущей
- Пауза при ручном переключении

## Изменение сценария

1. Отредактируй массив `phases` в `demo.js`
2. Строки переводов (`titleKey`) должны быть в `locales/*.json`
3. Тестируй каждую фазу отдельно — убедись, что тайминги комфортные
4. На мобильных — текст может быть сокращён, проверяй адаптивность