Концепции визуализаций для CalmTrader

Детальные концепции анимаций для 5 дыхательных техник

Содержание

1. Общие принципы
2. Physiological Sigh
3. Box Breathing
4. 4-7-8 Breathing
5. Coherent Breathing
6. Extended Exhale
7. Общие компоненты UI

---

Общие принципы

Цветовая схема (из A4A-72)

:root {
  --bg-primary: #0D1B2A;      /* Deep navy */
  --bg-secondary: #1B2838;    /* Lighter navy */
  --accent-primary: #4A9B9B;  /* Teal */
  --accent-glow: #7FDBFF;     /* Cyan glow */
  --text-primary: #E0E6ED;
  --text-secondary: #8892A0;
  --inhale-color: #5DADE2;    /* Light blue */
  --exhale-color: #48C9B0;    /* Mint */
  --hold-color: #7B68EE;      /* Purple */
}

Структура экрана

┌─────────────────────────────────┐
│  ← Назад        Настройки ⚙️    │  Header (скрыт во время сессии)
├─────────────────────────────────┤
│                                 │
│                                 │
│         [ВИЗУАЛИЗАЦИЯ]          │  Main Area (центр)
│                                 │
│                                 │
├─────────────────────────────────┤
│     "Вдох" / "Выдох"            │  Phase Label
│     Цикл 3 из 6                 │  Progress
│     ━━━━━━━━━━━○━━━━━━━━━       │  Timeline
└─────────────────────────────────┘

---

1. Physiological Sigh

Характеристика техники

• Паттерн: Вдох → Довдох → Длинный выдох
• Timing: ~2s + ~1s + ~6-8s
• Особенность: Два последовательных вдоха (double inhale)
• Эффект: Быстрое снижение стресса за 1-3 цикла

Визуальная концепция: "Двойная волна"

Идея: Два концентрических круга, показывающих двойной вдох, затем плавное сжатие.

Фаза 1: Первый вдох (2 сек)
┌─────────────────────────┐
│                         │
│      ┌─────────┐        │
│      │  ○○○○○  │        │  Внутренний круг
│      │  ○   ○  │        │  расширяется
│      │  ○○○○○  │        │
│      └─────────┘        │
│                         │
│       "Вдох..."         │
└─────────────────────────┘

Фаза 2: Довдох (1 сек)
┌─────────────────────────┐
│    ┌─────────────┐      │
│    │  ┌───────┐  │      │  Второй круг
│    │  │ ○○○○○ │  │      │  появляется снаружи
│    │  │ ○   ○ │  │      │  + пульсация
│    │  │ ○○○○○ │  │      │
│    │  └───────┘  │      │
│    └─────────────┘      │
│     "...ещё вдох"       │
└─────────────────────────┘

Фаза 3: Выдох (6-8 сек)
┌─────────────────────────┐
│                         │
│                         │
│          ●              │  Оба круга медленно
│                         │  сжимаются к центру
│                         │
│                         │
│    "Выыыыдооох..."      │
└─────────────────────────┘

Детали анимации

const physiologicalSigh = {
  phases: [
    {
      name: 'inhale1',
      duration: 2000,
      animation: {
        type: 'scale',
        from: 0.5,
        to: 0.8,
        easing: 'ease-out',
      },
      label: 'Вдох...',
      haptic: 'light',
    },
    {
      name: 'inhale2',
      duration: 1000,
      animation: {
        type: 'scale',
        from: 0.8,
        to: 1.0,
        easing: 'ease-out',
        addSecondCircle: true,  // Появляется внешний круг
      },
      label: '...ещё вдох',
      haptic: 'light',
    },
    {
      name: 'exhale',
      duration: 7000,
      animation: {
        type: 'scale',
        from: 1.0,
        to: 0.3,
        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
        mergeCircles: true,  // Круги сливаются
      },
      label: 'Выыыдох...',
      haptic: 'medium',
    },
  ],
  cycles: 3,  // Достаточно 1-3 циклов
  totalDuration: 30000,  // ~30 сек на 3 цикла
};

CSS Sketch

.physiological-sigh {
  .circle-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow), var(--accent-primary));
    transition: transform var(--phase-duration) ease-out;
  }

  .circle-outer {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 3px solid var(--accent-glow);
    border-radius: 50%;
    opacity: 0;
    transition: all 1s ease-out;
  }

  &.inhale2 .circle-outer {
    opacity: 0.7;
    transform: scale(1.2);
  }

  &.exhale {
    .circle-inner,
    .circle-outer {
      transform: scale(0.3);
      opacity: 0.5;
    }
  }
}

---

2. Box Breathing

Характеристика техники

• Паттерн: Вдох → Задержка → Выдох → Задержка
• Timing: 4-4-4-4 (равные фазы)
• Особенность: 4 равные стороны = квадрат
• Эффект: Баланс симпатической/парасимпатической системы

Визуальная концепция: "Путь по квадрату"

Идея: Светящаяся точка движется по периметру квадрата. Каждая сторона = одна фаза.

          ЗАДЕРЖКА (hold-in)
    ●━━━━━━━━━━━━━━━━━━━━●
    ┃                    ┃
    ┃                    ┃
    ┃     [ТАЙМЕР]       ┃
В   ┃       4            ┃   В
Д   ┃                    ┃   Ы
О   ┃    "Задержка"      ┃   Д
Х   ┃                    ┃   О
    ┃                    ┃   Х
    ┃                    ┃
    ●━━━━━━━━━━━━━━━━━━━━●
          ЗАДЕРЖКА (hold-out)

Точка движется: ↑ вдох → → задержка → ↓ выдох → ← задержка

Визуальные состояния

Вдох (4 сек)           Задержка (4 сек)
┌────────────────┐     ┌────────────────┐
│        ●→      │     │            ●   │
│  ┃         ┃   │     │  ┃━━━━━━━━━┃   │  Сторона подсвечена
│  ┃         ┃   │     │  ┃         ┃   │
│  ●↑        ┃   │     │  ┃         ┃   │
│  ━━━━━━━━━━    │     │  ━━━━━━━━━━    │
└────────────────┘     └────────────────┘

Выдох (4 сек)          Задержка (4 сек)
┌────────────────┐     ┌────────────────┐
│  ━━━━━━━━━━    │     │  ━━━━━━━━━━    │
│  ┃         ┃   │     │  ┃         ┃   │
│  ┃         ●↓  │     │  ┃         ┃   │
│  ┃         ┃   │     │  ●←━━━━━━━━┃   │  Сторона подсвечена
│            ●   │     │  ●             │
└────────────────┘     └────────────────┘

Детали анимации

const boxBreathing = {
  phases: [
    {
      name: 'inhale',
      duration: 4000,
      path: { from: 'bottom-left', to: 'top-left' },  // Движение вверх
      side: 'left',
      label: 'Вдох',
      color: 'var(--inhale-color)',
      haptic: 'light',
    },
    {
      name: 'holdIn',
      duration: 4000,
      path: { from: 'top-left', to: 'top-right' },  // Движение вправо
      side: 'top',
      label: 'Задержка',
      color: 'var(--hold-color)',
      haptic: null,
    },
    {
      name: 'exhale',
      duration: 4000,
      path: { from: 'top-right', to: 'bottom-right' },  // Движение вниз
      side: 'right',
      label: 'Выдох',
      color: 'var(--exhale-color)',
      haptic: 'medium',
    },
    {
      name: 'holdOut',
      duration: 4000,
      path: { from: 'bottom-right', to: 'bottom-left' },  // Движение влево
      side: 'bottom',
      label: 'Задержка',
      color: 'var(--hold-color)',
      haptic: null,
    },
  ],
  cycles: 4,
  totalDuration: 64000,  // 4 цикла × 16 сек
};

CSS Sketch

.box-breathing {
  .square {
    width: 200px;
    height: 200px;
    position: relative;
  }

  .side {
    position: absolute;
    background: var(--text-secondary);
    opacity: 0.3;
    transition: all 0.3s ease;

    &.active {
      background: var(--accent-primary);
      opacity: 1;
      box-shadow: 0 0 20px var(--accent-glow);
    }
  }

  .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-glow);
    box-shadow: 0 0 15px var(--accent-glow);
    position: absolute;
    /* Позиция анимируется через JS */
  }

  .corner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    position: absolute;
  }
}

Позиционирование точки

function getDotPosition(phase: string, progress: number): { x: number; y: number } {
  const size = 200;  // Размер квадрата

  switch (phase) {
    case 'inhale':    // Снизу вверх по левой стороне
      return { x: 0, y: size * (1 - progress) };
    case 'holdIn':    // Слева направо по верхней стороне
      return { x: size * progress, y: 0 };
    case 'exhale':    // Сверху вниз по правой стороне
      return { x: size, y: size * progress };
    case 'holdOut':   // Справа налево по нижней стороне
      return { x: size * (1 - progress), y: size };
  }
}

---

3. 4-7-8 Breathing

Характеристика техники

• Паттерн: Вдох → Задержка → Выдох
• Timing: 4-7-8 (разные длительности)
• Особенность: Длинная задержка + ещё более длинный выдох
• Эффект: Глубокое расслабление, подготовка ко сну

Визуальная концепция: "Три кольца"

Идея: Три концентрических progress-кольца, каждое для своей фазы. Заполняются последовательно.

┌─────────────────────────────────┐
│                                 │
│        ╭───────────────╮        │
│       ╱   ╭─────────╮   ╲       │  Внешнее: Выдох (8)
│      │   ╱  ╭─────╮  ╲   │      │  Среднее: Задержка (7)
│      │  │  │  4   │  │   │      │  Внутреннее: Вдох (4)
│      │  │  │ сек  │  │   │      │
│      │   ╲  ╰─────╯  ╱   │      │
│       ╲   ╰─────────╯   ╱       │
│        ╰───────────────╯        │
│                                 │
│          "Задержка"             │
│          ●●●●●●●○○○             │  Прогресс внутри фазы
└─────────────────────────────────┘

Визуальные состояния

Вдох (4 сек)              Задержка (7 сек)          Выдох (8 сек)
┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│   ╭─────────╮   │      │   ╭━━━━━━━━━╮   │      │   ╭━━━━━━━━━╮   │
│  ╱  ╭─────╮  ╲  │      │  ╱  ╭━━━━━╮  ╲  │      │  ╱  ╭━━━━━╮  ╲  │
│ │  ╱ ╭━━━╮ ╲  │ │      │ │  ╱ ╭━━━╮ ╲  │ │      │ │  ━ ╭━━━╮ ━  │ │
│ │ │ │ ●━ │ │  │ │      │ │ │ │ ━━━ │ │  │ │      │ │ ━ │ ━━━ │ ●  │ │
│ │  ╲ ╰───╯ ╱  │ │      │ │  ╲ ╰───╯ ╱  │ │      │ │  ━ ╰───╯ ━  │ │
│  ╲  ╰─────╯  ╱  │      │  ╲  ╰─────╯  ╱  │      │  ╲  ╰─────╯  ╱  │
│   ╰─────────╯   │      │   ╰─────────╯   │      │   ╰─────────╯   │
│    "Вдох"       │      │   "Задержка"    │      │    "Выдох"      │
└─────────────────┘      └─────────────────┘      └─────────────────┘
  Внутреннее               Среднее кольцо           Внешнее кольцо
  заполняется              заполняется              заполняется

Детали анимации

const breathing478 = {
  phases: [
    {
      name: 'inhale',
      duration: 4000,
      ring: 'inner',
      radius: 40,
      strokeWidth: 8,
      color: 'var(--inhale-color)',
      label: 'Вдох',
      haptic: 'light',
    },
    {
      name: 'hold',
      duration: 7000,
      ring: 'middle',
      radius: 60,
      strokeWidth: 8,
      color: 'var(--hold-color)',
      label: 'Задержка',
      haptic: null,
    },
    {
      name: 'exhale',
      duration: 8000,
      ring: 'outer',
      radius: 80,
      strokeWidth: 8,
      color: 'var(--exhale-color)',
      label: 'Выдох',
      haptic: 'medium',
    },
  ],
  cycles: 4,
  totalDuration: 76000,  // 4 цикла × 19 сек
};

SVG Implementation

<svg viewBox="0 0 200 200" class="breathing-478">
  <!-- Фоновые кольца (неактивные) -->
  <circle cx="100" cy="100" r="40" class="ring-bg" />
  <circle cx="100" cy="100" r="60" class="ring-bg" />
  <circle cx="100" cy="100" r="80" class="ring-bg" />

  <!-- Активные кольца (заполняются) -->
  <circle cx="100" cy="100" r="40" class="ring-progress inner"
          stroke-dasharray="251.2" stroke-dashoffset="251.2" />
  <circle cx="100" cy="100" r="60" class="ring-progress middle"
          stroke-dasharray="376.8" stroke-dashoffset="376.8" />
  <circle cx="100" cy="100" r="80" class="ring-progress outer"
          stroke-dasharray="502.4" stroke-dashoffset="502.4" />

  <!-- Таймер в центре -->
  <text x="100" y="105" class="timer">4</text>
</svg>

.breathing-478 {
  .ring-bg {
    fill: none;
    stroke: var(--bg-secondary);
    stroke-width: 8;
  }

  .ring-progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset linear;

    &.inner { stroke: var(--inhale-color); }
    &.middle { stroke: var(--hold-color); }
    &.outer { stroke: var(--exhale-color); }

    &.active {
      filter: drop-shadow(0 0 8px currentColor);
    }
  }
}

---

4. Coherent Breathing

Характеристика техники

• Паттерн: Вдох → Выдох (без задержек)
• Timing: 5-5 (равномерное)
• Особенность: Простой ритм, 6 циклов в минуту
• Эффект: Синхронизация с HRV, баланс нервной системы

Визуальная концепция: "Дышащая волна"

Идея: Плавная синусоида, которая движется как волна. Показывает непрерывность дыхания.

┌─────────────────────────────────────────┐
│                                         │
│     ╭──────╮         ╭──────╮           │
│    ╱        ╲       ╱        ╲          │
│───●          ╲─────╱          ╲─────    │  Волна движется ←
│               ╲   ╱            ╲        │
│                ╰─╯              ╰───    │
│                                         │
│              "Выдох"                    │
│          ━━━━━━━━━○━━━                  │
└─────────────────────────────────────────┘

Альтернатива: "Пульсирующий круг"

Простой расширяющийся/сжимающийся круг (как в Calm).

Вдох (5 сек)                    Выдох (5 сек)
┌───────────────────┐          ┌───────────────────┐
│                   │          │                   │
│    ╭─────────╮    │          │                   │
│   ╱           ╲   │          │      ╭───╮        │
│  │      ●      │  │   →→→    │     │  ●  │       │
│   ╲           ╱   │          │      ╰───╯        │
│    ╰─────────╯    │          │                   │
│                   │          │                   │
│     "Вдох"        │          │     "Выдох"       │
└───────────────────┘          └───────────────────┘

Детали анимации

const coherentBreathing = {
  phases: [
    {
      name: 'inhale',
      duration: 5000,
      animation: {
        type: 'scale',
        from: 0.5,
        to: 1.0,
        easing: 'cubic-bezier(0.4, 0, 0.6, 1)',  // Симметричный
      },
      label: 'Вдох',
      color: 'var(--inhale-color)',
      haptic: 'light',
    },
    {
      name: 'exhale',
      duration: 5000,
      animation: {
        type: 'scale',
        from: 1.0,
        to: 0.5,
        easing: 'cubic-bezier(0.4, 0, 0.6, 1)',
      },
      label: 'Выдох',
      color: 'var(--exhale-color)',
      haptic: 'light',  // Лёгкий, т.к. нет задержек
    },
  ],
  cycles: 6,  // 6 циклов = 1 минута
  totalDuration: 60000,
};

CSS Implementation (простой круг)

.coherent-breathing {
  .circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      var(--accent-glow) 0%,
      var(--accent-primary) 70%,
      transparent 100%
    );
    transition: transform 5s cubic-bezier(0.4, 0, 0.6, 1);

    &.inhale {
      transform: scale(1);
    }

    &.exhale {
      transform: scale(0.5);
    }
  }

  /* Внешнее свечение */
  .glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent-primary);
    filter: blur(30px);
    opacity: 0.3;
  }
}

---

5. Extended Exhale

Характеристика техники

• Паттерн: Вдох → Длинный выдох
• Timing: 4-8 (выдох в 2 раза длиннее)
• Особенность: Акцент на парасимпатику через длинный выдох
• Эффект: Быстрое успокоение, снижение тревоги

Визуальная концепция: "Асимметричные дуги"

Идея: Две дуги разной длины показывают асимметрию вдоха и выдоха.

┌─────────────────────────────────────┐
│                                     │
│         Вдох (4 сек)                │
│         ╭━━━━━╮                     │
│        ╱       ╲                    │
│       ●         │                   │
│                 │                   │
│                 │                   │
│                 │  Выдох (8 сек)    │
│                 │                   │
│                  ╲                  │
│                   ╲                 │
│                    ●                │
│                                     │
│       "Выдох" [=========>]          │
└─────────────────────────────────────┘

Альтернатива: "Расширяющийся круг с progress bar"

┌─────────────────────────────────┐
│                                 │
│         ╭─────────╮             │
│        ╱           ╲            │
│       │      ●      │           │  Круг (размер)
│        ╲           ╱            │
│         ╰─────────╯             │
│                                 │
│    ━━━━━━━━━━━━━━━●━━━━━━━━     │  Progress bar (время)
│    |←── вдох ──→|←── выдох ──→| │
│         4 сек        8 сек      │
│                                 │
│          "Выдох"                │
└─────────────────────────────────┘

Детали анимации

const extendedExhale = {
  phases: [
    {
      name: 'inhale',
      duration: 4000,
      animation: {
        type: 'scale',
        from: 0.4,
        to: 1.0,
        easing: 'ease-out',
      },
      progressBar: {
        segment: 1,  // Первая треть
        color: 'var(--inhale-color)',
      },
      label: 'Вдох',
      haptic: 'light',
    },
    {
      name: 'exhale',
      duration: 8000,
      animation: {
        type: 'scale',
        from: 1.0,
        to: 0.4,
        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',  // Медленное начало
      },
      progressBar: {
        segment: 2,  // Две трети
        color: 'var(--exhale-color)',
      },
      label: 'Выыыдох...',
      haptic: 'medium',
    },
  ],
  cycles: 5,
  totalDuration: 60000,  // 5 циклов × 12 сек
};

Visual: горизонтальный progress bar

.extended-exhale {
  .progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  .progress-segment {
    height: 100%;
    position: absolute;
    left: 0;
    transition: width linear;

    &.inhale {
      width: 0;
      background: var(--inhale-color);
      /* Анимируется до 33% за 4 сек */
    }

    &.exhale {
      width: 33%;
      background: var(--exhale-color);
      /* Анимируется до 100% за 8 сек */
    }
  }

  .marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background: var(--text-secondary);

    &.third { left: 33.33%; }  /* Граница вдох/выдох */
  }
}

---

Общие компоненты UI

Phase Label Component

interface PhaseLabelProps {
  phase: 'inhale' | 'hold' | 'exhale' | 'holdOut';
  locale: 'ru' | 'en';
}

const labels = {
  ru: {
    inhale: 'Вдох',
    hold: 'Задержка',
    exhale: 'Выдох',
    holdOut: 'Задержка',
  },
  en: {
    inhale: 'Breathe In',
    hold: 'Hold',
    exhale: 'Breathe Out',
    holdOut: 'Hold',
  },
};

Cycle Progress Component

<div class="cycle-progress">
  <span class="current">3</span>
  <span class="separator">из</span>
  <span class="total">6</span>
</div>

Session Timer Component

<div class="session-timer">
  <div class="time-remaining">2:45</div>
  <div class="progress-bar">
    <div class="progress" style="width: 45%"></div>
  </div>
</div>

Haptic Controller

class HapticController {
  private enabled: boolean = true;

  async phaseStart(phase: string): Promise<void> {
    if (!this.enabled) return;

    if (phase === 'inhale') {
      Telegram.WebApp.HapticFeedback.impactOccurred('light');
    } else if (phase === 'exhale') {
      Telegram.WebApp.HapticFeedback.impactOccurred('medium');
    }
    // hold фазы без haptic
  }

  async sessionComplete(): Promise<void> {
    if (!this.enabled) return;
    Telegram.WebApp.HapticFeedback.notificationOccurred('success');
  }

  setEnabled(enabled: boolean): void {
    this.enabled = enabled;
  }
}

---

Сводная таблица

Техника	Визуализация	Сложность	Уникальная фича
Physiological Sigh	Двойной круг	Средняя	Два вдоха подряд
Box Breathing	Квадрат + точка	Низкая	Путь по периметру
4-7-8 Breathing	Три кольца	Средняя	Progress rings
Coherent Breathing	Пульсирующий круг	Низкая	Простота, волна
Extended Exhale	Круг + progress bar	Низкая	Асимметричный timing

---

Приоритет реализации для MVP

1. Coherent Breathing — самый простой, базовый expanding circle
2. Box Breathing — узнаваемый паттерн, интересная механика
3. Extended Exhale — простой круг + progress bar
4. 4-7-8 Breathing — три кольца (чуть сложнее)
5. Physiological Sigh — уникальный double inhale (последний)

---

История изменений

Версия	Дата	Изменения
1.0	2024-12-02	Первоначальная версия

---

Документ подготовлен для задачи A4A-73