# Все ИИ — Brand Symbol & Loader · Frontend Pack

Brand `∞` (lemniscate Бернулли) + Liquid loader, готовые для интеграции в frontend.

## Что в архиве

```
loaders-assets/
  logos/                  ← 12 standalone SVG-вариантов знака ∞
    01-white-solid.svg
    02-outline.svg
    03-cyan-accent.svg
    04-liquid-glass.svg
    05-silver-gradient.svg
    06-glow.svg
    07-cyan-gradient.svg
    08-inverted.svg
    09-bichromatic.svg
    10-neon.svg
    11-wireframe.svg
    12-dotted.svg
  loader/
    loader.html           ← standalone HTML demo (открой в браузере)
    loader.css            ← pure CSS (импортируй / скопируй)
    LiquidLoader.tsx      ← React + TypeScript компонент
  README.md               ← этот файл
  manifest.json           ← список файлов с описаниями
```

## Использование SVG логотипов

Каждый SVG самодостаточен — `<svg>` 240×120, `viewBox="0 0 120 60"`, без external defs.
Любой scale через CSS. Внутри один path (48 cubic Bezier segments) + опциональные
gradient/filter если нужны.

```html
<!-- inline -->
<img src="logos/01-white-solid.svg" alt="Все ИИ" width="120" height="60">
```

```jsx
// как React component (vite + svgr или CRA + svg-react-loader):
import Logo from "./logos/01-white-solid.svg?react";
<Logo style={{ width: 120, height: 60 }} />
```

## Использование лоадера

### Vanilla HTML/CSS

1. Скопируй `loader/loader.css` в свои стили.
2. На странице один раз положи SVG defs (см. начало `loader/loader.html`).
3. Где нужен loader:

```html
<div class="vseii-loader t-normal size-inline">
  <div class="glass-bg"></div>
  <div class="liquid-clip">
    <svg class="wave" viewBox="0 0 200 100" preserveAspectRatio="none"><!-- wave path --></svg>
    <svg class="wave wave-2" viewBox="0 0 200 100" preserveAspectRatio="none"><!-- wave path --></svg>
  </div>
  <svg class="stroke" viewBox="0 0 120 60" preserveAspectRatio="none"><use href="#lemn-infinity"/></svg>
  <svg class="top-edge" viewBox="0 0 120 60" preserveAspectRatio="none"><use href="#lemn-infinity"/></svg>
</div>
```

Полный HTML со всем включённым — `loader/loader.html`.

### React + TypeScript

```tsx
// _app.tsx / root layout — один раз:
import { BrandSvgDefs } from "./LiquidLoader";
<BrandSvgDefs />

// где нужен:
import { LiquidLoader } from "./LiquidLoader";
<LiquidLoader size="inline" tempo="normal" />
```

Размеры: `chat` (36px) / `inline` (64px) / `splash` (140px).
Темпы: `slow` (idle) / `normal` (default) / `fast` (urgent).

## Технические детали

- Один master path (`#lemn-infinity`) переиспользуется через `<use>` для logo, icon, loader, splash.
- Loader = 4 слоя: glass-bg + 2 liquid waves внутри clip-path + outer stroke + top-edge gradient.
- Анимация — pure CSS keyframes (`@keyframes vseii-wave` + `vseii-wave-r`), 0 JS.
- Размер каждого SVG ≈ 2.5 KB (path + gradient).
- Loader CSS ≈ 1.8 KB.

## Brand colors

| Переменная | Hex | Использование |
|---|---|---|
| `--vseii-cyan` | `#54C4CE` | основной accent |
| `--vseii-cyan-bright` | `#7DDDE5` | hover / glow |
| `--vseii-cyan-dim` | `#2A6770` | gradient stop |
| `--vseii-glass-bg` | `rgba(255,255,255,0.04)` | glass base |
| `--vseii-glass-border` | `rgba(84,196,206,0.4)` | glass stroke |

## Шрифт

Брендовый — **Manrope** (Google Fonts). Веса 400/500/600/700/800/900.
Для кода/моно — **JetBrains Mono** 400/500/600/700.

```html
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
```

## Лицензия / использование

Внутренний brand-pack VSE AI Agency. Использование только в продуктах
компании.

## Полная страница со всеми вариантами

https://vse-ai-brandbook.pages.dev/loaders.html
