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 объектов фаз:

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. На мобильных — текст может быть сокращён, проверяй адаптивность