Анимированные фоны (Pro)
60+ эффектов — кастомные, Vanta-ported, ReactBits-ported. Переопределение цветов, reduce motion, производительность.
Анимированные фоны (Pro)
В Misea есть 60+ анимированных фонов для блока Hero (и опционально для других блоков). Они превращают плоский сайт в живой лендинг: текстуры «дышат», плазма переливается, частицы реагируют на курсор.
Три группы фонов
1. Кастомные (разработаны нами)
Идеально интегрированы в палитру Misea:
- Aurora Mesh — мягкие перетекающие градиенты в Primary / Accent.
- Orb Follow — светящийся шар следует за курсором.
- Wave Layers — наложенные волны в тонах бренда.
- Geo Grid — тонкая сетка с движущимися точками-пересечениями.
- Gradient Flow — бесшовный переход между 4 цветами палитры.
Эти фоны выглядят «родными» — автоматически подстраиваются под ваши цвета.
2. Vanta-ported
Портированные из библиотеки Vanta.js (WebGL-эффекты):
- Birds — стая птиц.
- Cells — клеточная текстура с пульсацией.
- Clouds — облака, движущиеся сверху-вниз.
- Fog — туманная дымка.
- Globe — 3D-глобус.
- Net — соединённые узлы с линиями (популярный «tech» стиль).
- Topology — топологическая карта с траекториями.
Вспомните сайты технологических стартапов 2019–2021 — это они.
3. ReactBits-ported
Современные эффекты 2024–2025:
- Silk — шёлковые волны, медитативно.
- Threads — плетёные нити, светящиеся.
- Liquid Chrome — отражающая металлическая поверхность.
- Lightning — молнии, случайно прорисовывающиеся.
- Plasma — пульсирующая плазма.
- Radar — вращающийся радар с всплесками.
- Iridescence — переливчатый радужный эффект.
- Dark Veil — тёмный мраморный дым.
Эти фоны — для «wow-эффекта». Подходят для премиальных заведений, коктейль-баров, ночных клубов.
Включение
В редакторе Hero-блока → Фон → Тип: Анимированный → выпадающий список с 60+ вариантами.
Превью проигрывается прямо в окне выбора — можно перебрать и найти подходящий.
Переопределение цветов
У большинства фонов есть собственные параметры цвета. По умолчанию берутся из палитры Primary + Accent. Но вы можете задать свои:
- Aurora Mesh → цвет 1 / 2 / 3 / 4.
- Birds → цвет птиц и фона.
- Plasma → основной + акцентный цвет.
Полезно, когда фон должен отличаться от общей палитры (например, тёмный hero на светлом сайте).
Reduce motion
Галочка Уважать настройку «Reduce motion» (по умолчанию включена). Если пользователь установил в ОС «уменьшить движение» — анимация автоматически отключится и фон заменится статичным градиентом.
Важно для accessibility — некоторые люди страдают от укачивания из-за сильных анимаций.
Производительность
Анимированные фоны — это WebGL / Canvas. Нагружают GPU. Соответственно:
- На современном iPhone / Android (2022+) — плавно 60 FPS.
- На старых устройствах (2017–2019) — может просесть до 30 FPS.
- На совсем древних / бюджетных — Misea автоматически отключает анимацию, показывая статичную версию.
Детектор работает по navigator.hardwareConcurrency + navigator.deviceMemory. Если у гостя ≤ 2 ядра или ≤ 2 ГБ RAM, включается fallback.
Когда не использовать
- На странице с длинным скроллом — анимация в hero, далее статика. Иначе GPU страдает.
- Если фоновая картинка важнее (еда крупным планом) — обычная картинка сильнее.
- На целевых страницах «проверь статус заказа» — анимация отвлекает.
Для производственных сайтов (массовые заказы) мы обычно рекомендуем кастомные фоны (Aurora Mesh, Gradient Flow) — красиво и экономично. ReactBits-ported — для имиджевых лендингов.