Пятнадцать вариантов анимации логотипа 音

Всё началось с логотипа в шапке. Изначально внутри иероглифа 音 стояла маленькая amber-точка, которая мигала каждые полсекунды. Идея была хорошая — добавить визуальный «пульс» — но на тёмном navy-фоне шапки она выглядела как индикатор уведомления, а не как дыхание живого бренда.

Параллельно сам иероглиф 音 (yīn — «звук, интонация», когнат слога «in» в IQin) был окрашен в тусклый blue-градиент и почти сливался с фоном. На скриншоте было видно: логотип есть, но он не «горит». Решили убрать мигающую точку из header и favicon, а сам иероглиф сделать по-настоящему ярким — насыщенный neon blue с многослойным glow.

Вместо того чтобы оставить один вариант, решили сделать целую лабораторию. За один присест родилось шесть концептов анимации — все на чистом CSS, без единой строчки JS:

• • V1 · Breathing — плавное дыхание glow + zoom
• • V2 · Radar Sweep — вращающееся кольцо с точкой
• • V3 · Glitch RGB — RGB-сдвиг + микро-дрожание
• • V4 · Scan Sweep — световая полоса сверху вниз
• • V5 · Particle Burst — 8 частиц разлетаются наружу
• • V6 · Electric Pulse — мерцание + молнии по бордеру

Получилась сетка из шести карточек прямо в Hero-секции. Каждый мини-логотип 48×48px повторял геометрию шапочного: grid-фон, угловые скобки, центральная scan-линия и сам иероглиф. Жалко было удалять даже один — все получились живыми.

Шесть вариантов понравились все. Возникла естественная мысль: а что если их миксовать? Первым комбо стал V7 = V5 (Particle Burst) + V6 (Electric Pulse). Технически это оказалось просто: две анимации не конфликтуют, потому что V6 действует на box-shadow бордера и filter глифа, а V5 анимирует только дочерние .logo-particle элементы.

Получилось восемь частиц, разлетающихся наружу, на фоне плавно пульсирующего контура и гало. Сначала подсветили V7 золотым amber-рамкой и бейджем «NEW», но потом решили убрать — оставить визуально идентичным остальным. Все варианты равны.

После первых трёх итераций динамичных, но быстрых анимаций (циклы 0.6–2.4 секунды) пришло понимание: логотип не должен торопиться. Мерцание и резкие вспышки хороши для nightclub-эстетики или gaming-UI, но для платформы интеллектуальной собственности, где речь идёт о патентах, авторских правах и доверии — нужна другая динамика.

«Сделай как глубокое дыхание в Дзен медитации».

Эта фраза задала весь дальнейший тон. Все анимации замедлили до циклов 8–12 секунд — темп спокойного дыхания взрослого человека. V6 и V7 получили цикл по 16 секунд, потом ещё удвоили до 32 секунд — это уже не анимация, а дыхательная практика: 16 секунд вдох, 16 секунд выдох, чистая синусоида от минимума к максимуму и обратно.

Из CSS убрали все steps(2, end) (ступенчатые функции, дававшие жёсткое мерцание) и заменили на cubic-bezier(0.4, 0, 0.6, 1) — стандартный «ease-in-out» Tailwind. В keyframes для V6 оставили только три ключевых кадра: 0% → 50% → 100%. Никаких провалов 22%/62%, никаких резких «вкл/выкл». Плавная волна яркости, как настоящая пранаяма.

Когда дзен-темп был найден, стало ясно: это не просто анимация логотипа, это целый визуальный язык. Контраст двух миров: технологическая точность (Techno) — grid-фоны, угловые скобки, моноширинные шрифты, неоновые цвета, scan-линии — и медитативная плавность (Zen) — длинные циклы, мягкие переходы, дыхательный темп.

Этот стиль получил имя Zentex — от Zen + Tech. Это не просто эстетика, это принцип проектирования интерфейсов: технологии, которые дышат. Логотип 音 — первый и самый чистый артефакт этого стиля.

Логичным продолжением V7 (Burst + Electric) стал V8 = V3 (Glitch) + V4 (Scan) — редкие RGB-дрейфы пересекаются медленным сканирующим лучом. Технически это заняло один класс .logo-v-glitchscan, который применяет keyframes от обоих родителей. Получился «цифровой ритуал»: иногда по логотипу проходит лёгкая цифровая рябь (как мысль в медитации), а параллельно медленно спускается световой луч — как взгляд, скользящий по мандале.

Сразу после V8 стало понятно: два комбо (V7 и V8) уже существует, и естественный следующий шаг — собрать всё вместе. Но это потребовало решения нетривиальной технической задачи про конфликт CSS-анимаций.

Когда V7 (Burst + Electric) и V8 (Glitch + Scan) уже существовали, возник естественный вопрос: а что если объединить их все четыре? Получился V9 = V3 ⊕ V4 ⊕ V5 ⊕ V6 — частицы, сканирующий луч, RGB-дрейф и электрическое дыхание в одной синхронизации.

Технически это потребовало создания единого merged keyframe. V3 (glitch filter) и V6 (electric glow filter) оба анимируют свойство filter на .logo-glyph, а в CSS два animation на одном свойстве не складываются — последний перезаписывает предыдущий. Пришлось вручную объединить keyframes в logo-mega-glyph — 32-секундный цикл с синусоидой электрического дыхания и четырьмя RGB-всплесками за цикл (примерно каждые 8 секунд).

Получился самый плотный и одновременно самый спокойный вариант — все четыре эффекта работают, но ни один не доминирует.

После V9 последовательность “число-комбо” себя исчерпала — девятый вариант объединил все четыре базовых эффекта, и добавить к ним ещё что-то в рамках того же подхода уже невозможно. Тогда взгляд сместился с механики на семантику. Кто такой вообще этот 音 в визуальном смысле?

Иероглиф 音 (yīn — «звук, интонация», когнат слога «in» в IQin) по форме напоминает маяк: вертикальная черта-башня посередине, горизонтальные перекладины-платформы сверху и в середине, основание-фундаммент снизу. Если смотреть на него как на маяк, сразу хочется добавить вращающийся луч света, который бы обходил логотип по кругу — как настоящий маяк, ведущий корабли в порту сквозь туман.

Так появился V10 «Маяк»: conic-gradient с узким сектором яркого света (≈30°) вращается линейно с периодом 12 секунд — ровно один оборот, как маяк на мысе. Параллельно глиф дышит мягким 8-секундным glow-циклом — как лампа маяка, которая пульсирует в тумане. Луч выходит за пределы логотипа (inset: -40%), так что свет буквально освещает пространство вокруг. Техно-Зен: Zentex нашёл свою первую метафору — и она оказалась морской.

Сейчас в шапке сайта живёт V7. V8, V9 и V10 — экспериментальные. Остальные шесть вариантов ждут своих применений: возможно, V1 (Breathing) отправится в footer, V4 (Scan) — на лоадеры, V2 (Radar) — на индикаторы загрузки, а V10 (Маяк) — на страницу 404 или на "загрузочный" экран входа в личный кабинет.

V10 «Маяк» открыл семантическое направление: луч света как метафора иероглифа 音. Но одно наблюдение за ним показало физическую неточность. В V10 луч вращается в плоскости экрана — это плоское 2D-вращение вокруг Z-оси, как радар на топ-даун карте. Настоящий маяк работает иначе: его луч вращается вокруг вертикальной оси башни, и наблюдатель видит вспышку света только в тот момент, когда луч направлен на него. Половину цикла луч уходит за башню и становится невидимым.

Так появился V11 «Осевой маяк» — второй маяк, на этот раз с настоящим 3D-поведением. Технически это transform: perspective(500px) rotateY(0deg → 360deg) на дочернем элементе .logo-axial-beam — широком горизонтальном световом клине (300% ширины, 160% высоты родителя), центрированном на глифе. perspective(500px) даёт 3D-перспективу и эффект сокращения ширины при повороте;backface-visibility: hidden скрывает луч, когда он повёрнут обратной стороной к зрителю — ровно половина 16-секундного цикла луч невидим, как и должно быть у настоящего маяка.

Цикл — 16 секунд линейного оборота (механический темп маяка) плюс 16-секундная синусоида дыхания глифа, жёстко синхронизированная с лучом: пик яркости приходится на моменты, когда луч смотрит прямо на зрителя (0% и 100% цикла), минимум — когда луч уходит за глиф (50% цикла). Получается не просто вращение, а диалог света и наблюдателя: маяк дышит в темпе приходящих к нему вспышек. V10 и V11 теперь сосуществуют как две интерпретации одной метафоры — круговой обход (как в топ-даун радаре) и осевой оборот (как в настоящей башне). Техно-Зен: Zentex нашёл свою вторую метафору, и она оказалась глубже первой.

V11 «Осевой маяк» с его непрерывным 360°-оборотом и backface-visibility:hidden выявил новое наблюдение: половина цикла луч невидим, и зритель видит лишь вспышку, а не сам луч. Метафора физически точна, но педагогически неубедительна — невозможно увидеть, как луч расходится в стороны, потому что в боковых положениях он сокращается до нулевой ширины (edge-on, под углом 90° к зрителю). Третья интерпретация маяка должна была показать расхождение лучей явно — не как вспышку, а как удержание.

Так появился V12 «Три луча» — маяк-маятник. Вместо полного оборота луч колеблется в ограниченном диапазоне ±60° вокруг Y-оси, задерживаясь в трёх дискретных положениях с явными паузами: слева вбок (rotateY −60°) → на зрителя (rotateY 0°) → справа вбок (rotateY +60°) → обратно через центр к левой позиции. Цикл — 18 секунд, ритм маятника. Технически ключи-дубли в @keyframes logo-tribeam-sweep создают паузы: 0% и 10% оба содержат rotateY(−60°), 20% и 35% оба rotateY(0°), 45% и 60% оба rotateY(+60°) — между ними cubic-bezier(0.45, 0, 0.55, 1) плавно переводит луч от одного положения к следующему, как дыхательный переход между вдохом и выдохом.

Ключевое инженерное решение — угол ±60°, а не ±90°. При 90° луч foreshorten до нуля и снова становится невидимым (как в V11). При 60° он сохраняет около половины своей видимой ширины, аperspective(500px) делает ближний край луча крупнее дальнего — клин visibly сужается к одному концу и явно «расходится» в одну сторону. Без backface-visibility:hidden луч виден во всех трёх положениях. Glow глифа синхронизирован: два пика яркости за цикл — на каждом центральном положении (20–35% и 70–85%), мягкое боковое свечение в левой и правой позициях. Три маяка — V10, V11, V12 — теперь образуют три метафоры одного объекта: круговой обход, осевой оборот и маятник.

Три маяка (V10, V11, V12) исчерпали метафору «вращающегося луча» — три механические интерпретации одного образа. Следующий шаг был не добавить ещё одну анимацию, а убрать всё лишнее. V13 «Маяк минимал» стал первой попыткой: убрать внешнюю рамку, заменить градиентный glyph на чисто синий (без glow, без анимации дыхания), но сохранить вращающийся beacon, сетку, уголки и scan-line. Получилось спокойнее — но всё ещё шумно: translucent-фон заливал квадрат голубоватой полупрозрачной плёнкой, scan-line резал glyph пополам, а сетка просвечивала сквозь иероглиф. Glyph выглядел нечётко — эффект был не в самом glyph (он был статичным и плоским), а во всём, что его окружало.

V14 «Чистый минимал» — окончательная дистилляция. Слой за слоем: убрали beacon (нет никакого движения), убрали scan-line (горизонтальная полоса больше не режет glyph), убрали translucent-фон (теперь фон полностью прозрачный — тёмный сайт-фон просвечивает насквозь), убрали градиент и glow glyph'а (теперь это плоский синий цвет var(--in-blue) — тот же оттенок, что и у «in» в логотипе IQin.ru). Что осталось? Только три вещи: сам иероглиф 音, сетка 8×8 px и четыре неоновых уголка по краям квадрата. Всё. Никаких ключевых кадров, никаких @keyframes, никакого filter.

Этот вариант — кандидат на favicon, login-лоадер и 404-страницу: минимальный расход GPU (нулевая анимация, только статичные стили), идеально читается даже в 16×16 px, и при этом сохраняет фирменную HUD-эстетику Техно-Зен. Путь от V1 (первая мигающая точка) до V14 занял десять вечеров и привёл к парадоксу: самый «простой» вариант оказался самым сложным — потребовалось убрать тринадцать слоёв, чтобы оставить три. 音, сетка, уголки.

V14 был окончательной дистилляцией — три элемента и ни одного @keyframes. V15 возвращает движение, но делает это осторожно: берёт V14 как есть (плоский синий 音 на прозрачном фоне, сетка, четыре уголка) и добавляет один-единственный новый слой — тонкую вертикальную световую линию шириной 14 px, которая медленно скользит слева направо через весь квадрат логотипа за 8 секунд. Тот же темп, что у V4 «Scan Sweep», но другая геометрия: V4 сканировал по вертикали (полупрозрачная полоса сверху вниз), а V15 сканирует по горизонтали (узкая линия слева направо) — как лазерный сканер штрих-кода или проход рентгена.

Линия использует горизонтальный градиент с мягкими краями (rgba(147, 197, 253) → rgba(59, 130, 246) → rgba(147, 197, 253)),mix-blend-mode: screen для подсветки глифа при прохождении и drop-shadow glow в 4 px — ровно столько, чтобы линия читалась как свет, а не как цветной прямоугольник. Один слой движения, три слоя статики — ratio, обратный V9 «Mega Combo», где четыре эффекта наслаивались друг на друга. V15 — это не «больше», это «минимум + одна идея».

V15 сканировал глиф, но сам 音 оставался пассивным — линия проходила сквозь него, а иероглиф ничего не «чувствовал». V16 заставляет глиф отвечать на сканер. Две толстые полупрозрачные световые полосы (50% ширины квадрата, с ярким ведущим краём и мягким хвостом) проносят по глифу по очереди: сначала вертикальная — слева направо за 32 секунды, затем горизонтальная — сверху вниз за следующие 32 секунды. Цикл — 64 секунды, без перекрытия фаз — ультра-медитативный ритм, вдвое медленнее дзен-цикла V6 «Electric Pulse» (32 с): 32 секунды вдох + 32 секунды выдох.

Каждый раз, когда полоса пересекает центр глифа (≈14 с и ≈46 с от начала цикла), сам 音 вспыхивает: brightness(2.6) + двойной drop-shadow (белый 22 px + синий 38 px). Вспышка короткая — около 3% цикла, ≈2 с — с коротким нарастанием (1.0 → 1.3 → 2.6) и плавным затуханием (2.6 → 1.55 → 1.0). Между вспышками глиф остаётся плоско-синим, как в V14. Технически это первый вариант, где движение полосы и реакция глифа синхронизированы в одном тайминге: полоса приносит свет, глиф его отражает.

V16 сделал glyph активным — он вспыхивал в ответ на прохождение полосы. Но движение полос было всё ещё главной хореографией, а глиф лишь реагировал. Возник вопрос: что если убрать полосы совсем, но оставить «дыхание»? V17 возвращается к V14 как точке отсчёта и добавляет ровно один новый слой — мягкое радиальное гало вокруг иероглифа, которое дышит на 32-секундном дзен-цикле. Сам 音 остаётся плоско-синим, без glow, без анимации — как лампа в медитационном зале: пламя неподвижно, пульсирует только аура вокруг него.

Технически гало — это radial-gradient диаметром 160% от размера логотипа, с плавным затуханием от ярко-голубого центра (rgba(147, 197, 253, 0.55)) к прозрачным краям. blur(6px) смягчает край, mix-blend-mode: screen — складывает свет с фоном карточки, а не замещает его. Анимация комбинирует opacity (0.20 ↔ 0.85) и scale (0.80 ↔ 1.05) на одной синусоиде cubic-bezier(0.4, 0, 0.6, 1) — ровно тот же темп, что у V6 «Electric Pulse» (32 секунды), но там glow дышал на самом глифе, а здесь — вокруг него. Эстетика V14 сохранена полностью: прозрачный фон, сетка, четыре уголка, плоский 音. Единственное отличие — мягкий пульсирующий ореол за спиной иероглифа.

V17 разделил «дыхание» и «пламя»: гало пульсировало, глиф стоял неподвижно. V18 делает обратный эксперимент — убирает гало и заставляет сам иероглиф дышать. Никаких внешних слоёв: ни полос, ни гало, ни орбит, ни ряби. Только 音, который медленно становится ярче и тусклее на 32-секундном цикле — единственный движущийся элемент в кадре. Это самая тихая анимация в коллекции: всё внимание зрителя сосредоточено на самом иероглифе, потому что больше не на что смотреть.

Технически используется тот же logo-glyph-flash модификатор, что и в V16 — он сохраняет animation и filter доступными на глифе, позволяя родительскому классу .logo-v-glow запускать собственную синусоиду. Ключевые кадры простые: brightness(1.0) → brightness(1.5) → обратно, плюс двойной drop-shadow (14 px голубой + 22 px синий) в пике. Между V17 и V18 — философская развилка: первый гасит glyph и оживляет фон, второй гасит фон и оживляет glyph. V18 — это медитативная лампа в её самом чистом виде.

V17 и V18 исследовали «дыхание» — либо вокруг глифа, либо внутри него. V19 меняет метафору: вместо дыхания — сияние. За глифом медленно вращается большой conic-gradient с переходом между тремя оттенками синего и голубого: royal blue, cyan и indigo. Градиент вращается на 360° за 24 секунды и одновременно затухает opacity 0.15 ↔ 0.75 — получается эффект мягкого полярного сияния, плывущего за HUD-квадратом. Сам 音 остаётся плоско-синим и неподвижным, как силуэт на фоне северного неба.

Технически градиент — это inset: -20% (чуть больше родительского квадрата), blur(14px) (сильное размытие убирает жёсткие переходы между секторами конуса) и mix-blend-mode: screen (только складывается со светом, не замещает тёмный фон). Две одновременные анимации — logo-aurora-spin (linear 24s, механическое вращение) и logo-aurora-fade (cubic-bezier 24s, дыхательная синусоида) — складываются в сложный, но плавный ритм: сияние всегда движется, но его интенсивность приходит и уходит. 24-секундный цикл попадает ровно в середину Техно-Зен диапазона 8–32 с, между V15 (8 с) и V6/V17 (32 с).

После трёх «дышащих» вариантов (V17, V18, V19) захотелось вернуть механическое движение, но в принципиально новой геометрии — не линейное сканирование, не радиальное дыхание, а орбитальное вращение. V20 берёт V14 как базу и добавляет маленькую 4 px неоновую точку, которая вращается по эллиптической орбите вокруг иероглифа за 12 секунд — тот же темп, что у V10 «Маяк». Получается образ планеты со спутником: 音 — стабильный центр, точка — быстро движущийся наблюдатель. Тонкая орбитальная дорожка видна на 10% opacity, чтобы дать глазу опору — иначе траектория точки читалась бы как хаотичная.

Технически это .logo-orbit-ring — дочерний элемент 130% × 90% от родителя (чуть шире, чем выше — эллипс, а не круг), центрированный через translate(-50%, -50%). Сама точка — это ::after псевдо-элемент на правом краю кольца: 4 px диаметр,background: #DBEAFE (почти белый голубой), трёхслойный box-shadow создаёт мягкий trail (4 px + 10 px + 18 px нарастающего размытия). ::before рисует едва видимую орбитальную дорожку. Анимация — чистый linear 12s, без синусоиды: спутник движется с постоянной скоростью, как настоящее тело по кеплеровской орбите (без учёта второго закона Кеплера — упрощение ради чистоты эффекта).

V20 вернул механическое вращение. V21 возвращается к органической метафоре — но не дыханию, а волне. Тонкие концентрические кольца расходятся от центра глифа каждые 8 секунд, как круги на воде от упавшей капли. Три кольца со сдвигом 2.67 секунды между ними — поэтому новая рябь появляется примерно каждые 2.67 секунды, складываясь в непрерывный ритм. Каждое кольцо расширяется от 30% до 110% размера квадрата и одновременно затухает от 0.7 до 0.0 opacity — мягко исчезает к моменту, когда достигает углов.

Технически — три одинаковых <span class="logo-ripple"> элемента, каждый со своим --ripple-delay (0s / 2.67s / 5.33s). Кольцо — это border: 1.5px solid rgba(147, 197, 253, 0.7) с box-shadow: 0 0 6px rgba(59, 130, 246, 0.25) для лёгкого glow. Анимация logo-ripple-expand использует cubic-bezier(0.25, 0.1, 0.25, 1) — то же смягчение, что в V5 «Particle Burst», чтобы расширение замедлялось к концу. 8-секундный цикл совпадает с V4 «Scan Sweep» и V15 «Vertical Scan» — самый быстрый темп в дзен-диапазоне. Метафора — звук: иероглиф 音 (yīn, «звук, интонация») наконец-то получил визуальное воплощение своего значения. Он не издаёт звук — но он распространяет волну.

V21 завершил органическую метафору — рябь как звук. V22 возвращается к цифровой эстетике, но делает это минимально. Берёт V14 как есть (плоский синий 音, сетка, четыре уголка, прозрачный фон) и добавляет ровно один цифровой артефакт: раз в 7 секунд иероглиф на мгновение (~300 миллисекунд) расщепляется на magenta+cyan хроматический сдвиг ±2 пикселя по горизонтали, как будто видеосигнал на долю секунды потерял синхронизацию. Два таких глитча за 14-секундный цикл — на ~18% (≈2.5 с) и ~68% (≈9.5 с). В остальное время — 96% цикла — вариант неотличим от V14.

Технически это filter: drop-shadow(-2px 0 0 #F472B6) drop-shadow(2px 0 0 #60A5FA) на самом глифе — тот же приём что в V3 «Glitch», но в V3 glitch был постоянным (9-секундный sine-цикл с регулярными всплесками), а здесь он редкий — два острых пика на плоской базовой линии. Использует glyphFlash модификатор (как V16/V18), чтобы анимация и фильтр остались доступны на .logo-glyph, но ключевые кадры аккуратно вставлены между 15%–20% и 65%–70% цикла, оставляя длинные quiet-базовые сегменты. Метафора — помеха: логотип не дышит, не светится, не движется — но иногда, очень редко, он как будто моргнет цифровым шумом, напоминая что это всё-таки экран, а не гравюра. V22 — это компромисс между абсолютной статичностью V14 и постоянной активностью V3.

V18 «Glow Letter» сделал обратное от V17: в V17 дышит гало вокруг глифа, а сам 音 остаётся плоским; в V18 дышит сам глиф, а гало убрано. V23 делает третий ход в этой логике — дышит HUD-инфраструктура вокруг глифа, а сам 音 остаётся неподвижным. Сетка и четыре угловых скобки медленно меняют opacity от 0.35 до 1.0 и обратно на 16-секундном синусоидальном цикле. Минимум 0.35 (а не 0) выбран сознательно — сетка никогда полностью не исчезает, чтобы не было ощущения «квадрат пропал». Только плавное наполнение и угасание контура, как будто рамка «заряжается» и «разряжается».

Это первая инверсия в серии: до V23 во всех вариантах HUD-инфраструктура (сетка + уголки) была статичной константой, а двигались только «добавленные» элементы — линии, гало, орбиты, рябь. V23 ломает это правило: теперь движется именно «обрамление», а glyph становится единственным якорем покоя. Селектор .logo-v-pulse-grid > span:not(.logo-glyph) нацеливается на все дочерние span'ы родительского логотипа, кроме самого глифа — то есть на сетку и четыре угловых скобки одновременно. 16-секундный цикл попадает точно в дзен-диапазон 8–32 с, между V15 (8 с) и V17 (32 с), с тем же смягчением cubic-bezier(0.4, 0, 0.6, 1) что у V17/V18/V19. Метафора — пробуждение: рамка «оживает» первой, готовя место для неподвижного глифа.

Все эффекты от V15 до V23 были двухмерными — плоские скан-линии, плоские гало, плоская рябь. V24 ломает это ограничение: берёт V14 как есть и заставляет весь HUD-квадрат медленно покачиваться в 3D — rotateY от −8° до +8° и одновременно rotateX от −4° до +4° на 20-секундном синусоидальном цикле. Сам 音 остаётся плоско-синим внутри квадрата — он не вращается отдельно, а движется вместе с родительским контейнером. Эффект напоминает медитативно покачивающийся портрет или медленно поворачивающийся кристалл: лёгкое движение в пространстве, не отвлекающее от центра.

Технически — transform: perspective(600px) rotateY(±8deg) rotateX(±4deg) на родительском span логотипа. Perspective встроена прямо в transform, поэтому не нужен отдельный родительский wrapper с perspective свойством.transform-style: preserve-3d и backface-visibility: hidden предотвращают артефакты зеркального отражения на пиках вращения. 20-секундный цикл попадает между V19 (24 с) и V15 (8 с) — средний темп в дзен-диапазоне. Угол ±8° выбран сознательно минимальным: больше — отвлекало бы от глифа, меньше — движение читалось бы как случайный дрож. В пике цикла (50%) угол наклона достигает максимума, и глиф оказывается развёрнут на 8° вправо — это первое настоящее 3D-движение в истории логотипа 音. Метафора — присутствие: квадрат «дышит» не плоско, а в пространстве, напоминая что лого — это объект, а не только символ.

V22 уже возвращался к glitch-эстетике, но делал это «редко и резко». V25 идёт в другую сторону — плавно и тонко. Берёт V14 и добавляет два фантомных эха иероглифа 音, расположенных позади основного глифа. Левое эхо появляется на 35% цикла (смещение −2.5 px по горизонтали), правое — на 70% цикла (смещение +1.5 px). Каждое эхо — это контур (outline) глифа, а не его залитая копия: прозрачная заливка + 1px text-stroke голубого цвета, мягкий glow, mix-blend-mode: screen. Эхо читается как «призрак» буквы, как motion-blur от движения, которого на самом деле не было — основной глиф стоит на месте.

Технически — два <span class="logo-echo-trace"> элемента внутри variant.extra, рендерятся перед глифом в DOM, что автоматически помещает их ниже в z-stack. Каждый span использует ::before { content: "音" } псевдоэлемент, чтобы отрисовать иероглиф без дублирования в JSX. Z-index:0 у эха и z-index:1 у глифа гарантируют порядок наложения. 14-секундный цикл с тем же смягчением cubic-bezier(0.4, 0, 0.6, 1) что у V17/V18/V23 — дзен-синусоида. Метафора — память: glyph как будто оставляет след в воздухе, как будто он только что двигался, хотя он неподвижен. V25 — самый «поэтичный» вариант серии: вместо движения он показывает отзвук движения. В некоторых ракурсах эхо читается как дыхание, в других — как искажение фотоаппарата; смысл остаётся открытым.

V6 «Electric Pulse» дышит непрерывной синусоидой 32 с — плавный inhale-exhale на box-shadow. V17 «Halo Breath» делает то же самое с гало. V26 идёт в противоположную сторону — вместо непрерывного дыхания он излучает дискретные импульсы: три коротких вспышки box-shadow на 14-секундном цикле, примерно каждые 4.7 секунды (~14%, ~50%, ~86%). Каждая вспышка длится около 1 секунды: 400 мс нарастание, 200 мс пик, 600 мс спад. Между вспышками рамка абсолютно тихая — никакого свечения. Эффект читается как монитор пульса или маяк, передающий сигнал три раза за цикл.

Технически это @keyframes logo-frame-strobe на родительском span логотипа с linear easing — линейным, потому что все пики заданы точными процентами в ключевых кадрах (13% build-up → 14% peak → 15% hold → 17% trail → 18% baseline, и повторяется дважды с тем же паттерном на 49–53% и 85–89%). В пике box-shadow трёхслойный: 0 0 0 2px rgba(147,197,253,0.95) (контур) + 0 0 18px rgba(59,130,246,0.7) (ближний glow) + 0 0 36px rgba(59,130,246,0.4) (дальний halo). 14-секундный цикл — самый короткий в «световом» подмножестве (V17=32 с, V18=32 с, V19=24 с), но импульсный характер смягчает скорость: в каждой секунде цикла есть только ~0.07 секунды активности, остальные ~0.93 секунды — тишина. Метафора — сигнал: рамка не дышит, а передаёт — три коротких морзе-подобных вспышки, как пинг от радара или heartbeat от пульсометра. Сам 音 остаётся плоско-синим и неподвижным — он пассажир, а не водитель.