Skip to main content

​
Обзор

Cabinet включает библиотеку из 15 анимированных фонов, работающих как полноэкранные визуальные эффекты за контентом. Фоны построены на основе компонентов Aceternity UI, оптимизированных для производительности в браузере и Telegram MiniApp.

15 эффектов

CSS, Canvas и SVG-анимации на выбор

Live-превью

Предпросмотр прямо в админке при настройке

Мобильная оптимизация

Автоматическое снижение нагрузки на мобильных устройствах

​
Доступные фоны

​
CSS-анимации

ТипОписаниеНастройки
AuroraГрадиентное свечение с плавными переливами3 цвета, скорость (медленно / нормально / быстро)
Gradient AnimationАнимированный многоцветный градиент5 цветов, интерактивность мышью, размер
GridСетка с анимациейРазмер ячейки, цвет
DotsТочечный паттернРазмер ячейки, размер точки
SpotlightДвигающийся луч светаЦвет, размер

​
Canvas-анимации

ТипОписаниеНастройки
SparklesМерцающие частицыПлотность, размер, скорость
VortexСпиральный вихрь частицКоличество, радиус, оттенок, скорость
Shooting StarsПадающие звёздыЦвет звёзд и хвоста, плотность, скорость
WavyВолновое искажениеСкорость, ширина волны, размытие, прозрачность
Background LinesПлавные линииКоличество, цвет, скорость, толщина
RippleРасходящиеся кругиЦвет, количество, скорость
BoxesВращающиеся кубики в сеткеСтроки, столбцы, цвет
MeteorsПадающие метеорыКоличество, цвет

​
SVG-анимации

ТипОписаниеНастройки
Background Beams50 лучей с градиентом cyan→purple→magentaТолько глобальные настройки
Beams CollisionЛучи со столкновениямиТолько глобальные настройки

​
Настройка через админку

Управление фонами доступно в Настройки → Фоны в админ-панели Cabinet.
1

Включите анимацию

Переключатель «Анимация включена» активирует фон для всех пользователей.
2

Выберите тип

Кнопки сгруппированы по категориям (CSS / Canvas / SVG). При выборе тип сразу применяется в превью.
3

Настройте параметры

Каждый тип имеет свои настройки: цвета, скорость, плотность частиц и другие. Изменения видны в live-превью.
4

Глобальные настройки

Для любого типа доступны общие параметры.

​
Глобальные параметры

ПараметрДиапазонПо умолчаниюОписание
Прозрачность0.1 – 1.01.0Общая прозрачность фона
Размытие0 – 20 px0Гауссово размытие поверх анимации
Снижение на мобильныхВкл / ВыклВклУрезает количество частиц и отключает интерактивность на мобильных

​
Производительность

Все фоны оптимизированы для работы без просадок:
  • GPU-ускорение — CSS-анимации используют transform и will-change для композиторного слоя
  • CSS containment — contain: strict изолирует перерисовки фона от остального UI
  • Lazy-загрузка — JS-чанк фона загружается отложенно через React.lazy
  • Предзагрузка — при повторных визитах чанк подгружается из localStorage-кэша ещё до рендера React
  • Мобильный режим — количество частиц уменьшается вдвое, интерактивные эффекты (отслеживание мыши) отключаются
  • prefers-reduced-motion — анимация полностью отключается при системной настройке «Уменьшить движение»

​
SVG Beams

Компонент Background Beams использует чистые CSS-анимации stroke-dashoffset без изменения opacity — это предотвращает перерисовку (repaint) всей страницы. Из 50 лучей одновременно анимируются только 17, остальные отображаются статически с минимальной прозрачностью.

​
API

МетодПутьОписание
GET/cabinet/branding/animation-configПолучить текущую конфигурацию
PATCH/cabinet/branding/animation-configОбновить конфигурацию (админ)
GET/cabinet/branding/animationПроверить, включена ли анимация
PATCH/cabinet/branding/animationВключить / выключить анимацию (админ)

​
Формат конфигурации

{
  "enabled": true,
  "type": "aurora",
  "settings": {
    "color1": "#00d2ff",
    "color2": "#7a2aff",
    "color3": "#ff0080",
    "speed": "normal"
  },
  "opacity": 1.0,
  "blur": 0,
  "reducedOnMobile": true
}

​
Кэширование

Конфигурация фона кэшируется в localStorage (cabinet_animation_config). При загрузке страницы Cabinet сначала использует кэш для мгновенного отображения, затем в фоне запрашивает актуальную конфигурацию с сервера. Это обеспечивает отображение фона без задержки даже при медленном соединении.

​
Отключение

Для полного отключения анимированных фонов:
  1. Через админку — выключите переключатель «Анимация включена» в разделе настроек
  2. Через API — PATCH /cabinet/branding/animation с {"enabled": false}
  3. Тип «none» — выберите тип «Без анимации» для явного отключения