[{"data":1,"prerenderedAt":528},["ShallowReactive",2],{"docs-article-\u002Fdocs\u002Fsite-builder\u002Fanimated-backgrounds":3,"docs-all":350},{"id":4,"title":5,"body":6,"category":338,"categoryLabel":339,"description":340,"extension":341,"meta":342,"navigation":343,"order":344,"path":345,"pro":343,"seo":346,"stem":347,"updated":348,"__hash__":349},"docs\u002Fdocs\u002Fsite-builder\u002Fanimated-backgrounds.md","Анимированные фоны (Pro)",{"type":7,"value":8,"toc":322},"minimark",[9,13,17,22,27,30,65,68,72,75,119,122,126,129,179,182,186,197,200,204,207,224,227,231,238,241,245,248,268,280,284,295,302,306],[10,11,5],"h1",{"id":12},"анимированные-фоны-pro",[14,15,16],"p",{},"В Misea есть 60+ анимированных фонов для блока Hero (и опционально для других блоков). Они превращают плоский сайт в живой лендинг: текстуры «дышат», плазма переливается, частицы реагируют на курсор.",[18,19,21],"h2",{"id":20},"три-группы-фонов","Три группы фонов",[23,24,26],"h3",{"id":25},"_1-кастомные-разработаны-нами","1. Кастомные (разработаны нами)",[14,28,29],{},"Идеально интегрированы в палитру Misea:",[31,32,33,41,47,53,59],"ul",{},[34,35,36,40],"li",{},[37,38,39],"strong",{},"Aurora Mesh"," — мягкие перетекающие градиенты в Primary \u002F Accent.",[34,42,43,46],{},[37,44,45],{},"Orb Follow"," — светящийся шар следует за курсором.",[34,48,49,52],{},[37,50,51],{},"Wave Layers"," — наложенные волны в тонах бренда.",[34,54,55,58],{},[37,56,57],{},"Geo Grid"," — тонкая сетка с движущимися точками-пересечениями.",[34,60,61,64],{},[37,62,63],{},"Gradient Flow"," — бесшовный переход между 4 цветами палитры.",[14,66,67],{},"Эти фоны выглядят «родными» — автоматически подстраиваются под ваши цвета.",[23,69,71],{"id":70},"_2-vanta-ported","2. Vanta-ported",[14,73,74],{},"Портированные из библиотеки Vanta.js (WebGL-эффекты):",[31,76,77,83,89,95,101,107,113],{},[34,78,79,82],{},[37,80,81],{},"Birds"," — стая птиц.",[34,84,85,88],{},[37,86,87],{},"Cells"," — клеточная текстура с пульсацией.",[34,90,91,94],{},[37,92,93],{},"Clouds"," — облака, движущиеся сверху-вниз.",[34,96,97,100],{},[37,98,99],{},"Fog"," — туманная дымка.",[34,102,103,106],{},[37,104,105],{},"Globe"," — 3D-глобус.",[34,108,109,112],{},[37,110,111],{},"Net"," — соединённые узлы с линиями (популярный «tech» стиль).",[34,114,115,118],{},[37,116,117],{},"Topology"," — топологическая карта с траекториями.",[14,120,121],{},"Вспомните сайты технологических стартапов 2019–2021 — это они.",[23,123,125],{"id":124},"_3-reactbits-ported","3. ReactBits-ported",[14,127,128],{},"Современные эффекты 2024–2025:",[31,130,131,137,143,149,155,161,167,173],{},[34,132,133,136],{},[37,134,135],{},"Silk"," — шёлковые волны, медитативно.",[34,138,139,142],{},[37,140,141],{},"Threads"," — плетёные нити, светящиеся.",[34,144,145,148],{},[37,146,147],{},"Liquid Chrome"," — отражающая металлическая поверхность.",[34,150,151,154],{},[37,152,153],{},"Lightning"," — молнии, случайно прорисовывающиеся.",[34,156,157,160],{},[37,158,159],{},"Plasma"," — пульсирующая плазма.",[34,162,163,166],{},[37,164,165],{},"Radar"," — вращающийся радар с всплесками.",[34,168,169,172],{},[37,170,171],{},"Iridescence"," — переливчатый радужный эффект.",[34,174,175,178],{},[37,176,177],{},"Dark Veil"," — тёмный мраморный дым.",[14,180,181],{},"Эти фоны — для «wow-эффекта». Подходят для премиальных заведений, коктейль-баров, ночных клубов.",[18,183,185],{"id":184},"включение","Включение",[14,187,188,189,192,193,196],{},"В редакторе Hero-блока → ",[37,190,191],{},"Фон"," → ",[37,194,195],{},"Тип: Анимированный"," → выпадающий список с 60+ вариантами.",[14,198,199],{},"Превью проигрывается прямо в окне выбора — можно перебрать и найти подходящий.",[18,201,203],{"id":202},"переопределение-цветов","Переопределение цветов",[14,205,206],{},"У большинства фонов есть собственные параметры цвета. По умолчанию берутся из палитры Primary + Accent. Но вы можете задать свои:",[31,208,209,214,219],{},[34,210,211,213],{},[37,212,39],{}," → цвет 1 \u002F 2 \u002F 3 \u002F 4.",[34,215,216,218],{},[37,217,81],{}," → цвет птиц и фона.",[34,220,221,223],{},[37,222,159],{}," → основной + акцентный цвет.",[14,225,226],{},"Полезно, когда фон должен отличаться от общей палитры (например, тёмный hero на светлом сайте).",[18,228,230],{"id":229},"reduce-motion","Reduce motion",[14,232,233,234,237],{},"Галочка ",[37,235,236],{},"Уважать настройку «Reduce motion»"," (по умолчанию включена). Если пользователь установил в ОС «уменьшить движение» — анимация автоматически отключится и фон заменится статичным градиентом.",[14,239,240],{},"Важно для accessibility — некоторые люди страдают от укачивания из-за сильных анимаций.",[18,242,244],{"id":243},"производительность","Производительность",[14,246,247],{},"Анимированные фоны — это WebGL \u002F Canvas. Нагружают GPU. Соответственно:",[31,249,250,256,262],{},[34,251,252,255],{},[37,253,254],{},"На современном iPhone \u002F Android (2022+)"," — плавно 60 FPS.",[34,257,258,261],{},[37,259,260],{},"На старых устройствах (2017–2019)"," — может просесть до 30 FPS.",[34,263,264,267],{},[37,265,266],{},"На совсем древних \u002F бюджетных"," — Misea автоматически отключает анимацию, показывая статичную версию.",[14,269,270,271,275,276,279],{},"Детектор работает по ",[272,273,274],"code",{},"navigator.hardwareConcurrency"," + ",[272,277,278],{},"navigator.deviceMemory",". Если у гостя ≤ 2 ядра или ≤ 2 ГБ RAM, включается fallback.",[18,281,283],{"id":282},"когда-не-использовать","Когда не использовать",[31,285,286,289,292],{},[34,287,288],{},"На странице с длинным скроллом — анимация в hero, далее статика. Иначе GPU страдает.",[34,290,291],{},"Если фоновая картинка важнее (еда крупным планом) — обычная картинка сильнее.",[34,293,294],{},"На целевых страницах «проверь статус заказа» — анимация отвлекает.",[14,296,297,298,301],{},"Для производственных сайтов (массовые заказы) мы обычно рекомендуем ",[37,299,300],{},"кастомные"," фоны (Aurora Mesh, Gradient Flow) — красиво и экономично. ReactBits-ported — для имиджевых лендингов.",[18,303,305],{"id":304},"следующие-шаги","Следующие шаги",[31,307,308,316],{},[34,309,310,315],{},[311,312,314],"a",{"href":313},"\u002Fdocs\u002Fsite-builder\u002Flayout-variant-padding","Подложки блоков и отступы",".",[34,317,318,315],{},[311,319,321],{"href":320},"\u002Fdocs\u002Fsite-builder\u002Fseo-meta","SEO — мета-теги",{"title":323,"searchDepth":324,"depth":324,"links":325},"",2,[326,332,333,334,335,336,337],{"id":20,"depth":324,"text":21,"children":327},[328,330,331],{"id":25,"depth":329,"text":26},3,{"id":70,"depth":329,"text":71},{"id":124,"depth":329,"text":125},{"id":184,"depth":324,"text":185},{"id":202,"depth":324,"text":203},{"id":229,"depth":324,"text":230},{"id":243,"depth":324,"text":244},{"id":282,"depth":324,"text":283},{"id":304,"depth":324,"text":305},"site-builder",null,"60+ эффектов — кастомные, Vanta-ported, ReactBits-ported. Переопределение цветов, reduce motion, производительность.","md",{},true,13,"\u002Fdocs\u002Fsite-builder\u002Fanimated-backgrounds",{"title":5,"description":340},"docs\u002Fsite-builder\u002Fanimated-backgrounds","2026-04-23","qE2RtcRJn00beqeofi-3UiZ0UkapTI186rEg-wd_4cg",[351,358,363,368,373,378,383,387,391,395,399,403,407,411,415,420,424,428,432,437,441,445,450,455,460,465,470,475,476,479,483,488,493,498,503,508,513,516,519,522,525],{"path":352,"title":353,"description":354,"category":355,"order":356,"pro":357},"\u002Fdocs\u002Fcatalog\u002Fadd-dish","Как добавить блюдо в меню","Пошагово — фото, цена, категория, модификаторы и опции. Что важно, а что можно пропустить.","catalog",1,false,{"path":359,"title":360,"description":361,"category":362,"order":356,"pro":357},"\u002Fdocs\u002Ffaq\u002Ftroubleshooting","Чеклист — частые проблемы и как их решить","Не приходят заказы, не открывается QR-меню, гость не видит блюдо — 10 типичных ситуаций с решениями.","faq",{"path":364,"title":365,"description":366,"category":367,"order":356,"pro":357},"\u002Fdocs\u002Fgetting-started\u002Ffirst-login","Первый вход и создание заведения","Как зарегистрироваться в admin.misea.ru, добавить юрлицо и создать первую локацию за 5 минут.","getting-started",{"path":369,"title":370,"description":371,"category":372,"order":356,"pro":357},"\u002Fdocs\u002Forders\u002Forders-feed","Как читать ленту заказов","Статусы, фильтры, звуковые уведомления, чтобы ничего не пропустить.","orders",{"path":374,"title":375,"description":376,"category":377,"order":356,"pro":357},"\u002Fdocs\u002Fqr-tables\u002Ftables-and-locations","Столы и локации","Разница между локацией и столом, как добавить новую точку или новый QR-стол, что меняется при нескольких филиалах.","qr-tables",{"path":379,"title":380,"description":381,"category":382,"order":324,"pro":357},"\u002Fdocs\u002Fbilling\u002Fhow-to-pay-pro","Как оплатить Pro","Шаги оплаты через YooKassa, промокоды (−10%\u002F−20%), ежемесячная vs годовая подписка, чек.","billing",{"path":384,"title":385,"description":386,"category":355,"order":324,"pro":357},"\u002Fdocs\u002Fcatalog\u002Fcategories","Категории и подкатегории меню","Как сгруппировать блюда, задать порядок, скрыть категорию или сделать её пустой-заглушкой.",{"path":388,"title":389,"description":390,"category":372,"order":324,"pro":357},"\u002Fdocs\u002Forders\u002Fcancel-refund","Отмена и возврат заказа","Когда отменять, а когда делать возврат в YooKassa. Полный vs частичный возврат, шаги, типовые кейсы.",{"path":392,"title":393,"description":394,"category":377,"order":324,"pro":357},"\u002Fdocs\u002Fqr-tables\u002Fqr-codes","Как сгенерировать и распечатать QR-коды","Где взять QR-код для стола, какой размер распечатать, куда клеить и что увидит гость после сканирования.",{"path":396,"title":397,"description":398,"category":382,"order":329,"pro":357},"\u002Fdocs\u002Fbilling\u002Fpro-expiration","Что происходит после окончания оплаты Pro","Grace-period 3 дня, что отключается сразу, что сохраняется навсегда, как восстановить Pro.",{"path":400,"title":401,"description":402,"category":355,"order":329,"pro":357},"\u002Fdocs\u002Fcatalog\u002Fmodifiers","Модификаторы — размеры, молоко, добавки","Как настроить варианты блюда с доплатой (S\u002FM\u002FL, растительное молоко, двойная порция) через шаблоны модификаторов.",{"path":404,"title":405,"description":406,"category":367,"order":329,"pro":357},"\u002Fdocs\u002Fgetting-started\u002Fadmin-overview","Обзор админ-панели за 3 минуты","Карта всех разделов админки Misea — что где лежит, с чего начинать, куда смотреть ежедневно.",{"path":408,"title":409,"description":410,"category":372,"order":329,"pro":357},"\u002Fdocs\u002Forders\u002Ftelegram-notifications","Уведомления о заказах в Telegram","Как подключить бота к чату персонала, кому приходят уведомления, что настраивается.",{"path":412,"title":413,"description":414,"category":338,"order":329,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fdraft-vs-published","Черновик vs публикация","Что сохраняется локально, что на сервере, что видят гости. Как работает автосохранение и кнопка «Опубликовать».",{"path":416,"title":417,"description":418,"category":382,"order":419,"pro":357},"\u002Fdocs\u002Fbilling\u002Frefunds-plan-change","Возврат средств и смена тарифа","Политика возвратов, как перейти с месяца на год (или наоборот), когда возврат невозможен.",4,{"path":421,"title":422,"description":423,"category":355,"order":419,"pro":357},"\u002Fdocs\u002Fcatalog\u002Foptions","Опции блюда — острота, прожарка, без чего","Когда нужна опция, а когда модификатор. Как настроить варианты без доплаты.",{"path":425,"title":426,"description":427,"category":367,"order":419,"pro":357},"\u002Fdocs\u002Fgetting-started\u002Finvite-colleague","Как пригласить коллегу в админку","Роли admin, manager, waiter, kitchen, courier — что каждый видит и может, как добавить нового сотрудника.",{"path":429,"title":430,"description":431,"category":338,"order":419,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fhistory-undo","История изменений (Undo\u002FRedo)","12 снапшотов на страницу, Ctrl+Z и Ctrl+Shift+Z. Как откатить удалённый блок или неудачное редактирование.",{"path":433,"title":434,"description":435,"category":355,"order":436,"pro":357},"\u002Fdocs\u002Fcatalog\u002Fbulk-import","Массовый импорт меню из Excel","Формат файла, обязательные и опциональные поля, типичные ошибки при импорте 50+ позиций.",5,{"path":438,"title":439,"description":440,"category":367,"order":436,"pro":357},"\u002Fdocs\u002Fgetting-started\u002Fbrand-setup","Бренд — логотип, цвета, контакты","Где настроить название заведения, логотип, контактные данные и первичные цвета, которые подтянутся в QR-меню и на сайт.",{"path":442,"title":443,"description":444,"category":338,"order":436,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fhero-block","Блок Hero — баннер первого экрана","Заголовок, подзаголовок, фон-картинка, CTA-кнопка. Как сделать сильный первый экран, куда вести кнопку.",{"path":446,"title":447,"description":448,"category":338,"order":449,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fmenu-block","Блок Меню (каталог товаров)","Макеты сетка\u002Fсписок\u002Fкарточки, карточек в ряд, slider категорий, что прятать-показывать. Главный блок любой витрины.",6,{"path":451,"title":452,"description":453,"category":338,"order":454,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Ftext-image-gallery","Блоки Текст, Изображение, Галерея","Markdown-редактор с жирным\u002Fкурсивом\u002Fпереносами, спецварианты (часы работы, скидки), галерея-список.",7,{"path":456,"title":457,"description":458,"category":338,"order":459,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fcontacts-block","Блок Контакты","Телефон, адрес, карта, соцсети. Как переопределить данные глобальных настроек для конкретной страницы или локации.",8,{"path":461,"title":462,"description":463,"category":338,"order":464,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fmap-block","Блок Карта","Автодополнение адреса через Яндекс-Nominatim, встройка карты, метки, масштаб.",9,{"path":466,"title":467,"description":468,"category":338,"order":469,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fservice-blocks","Карточка товара, Кнопка заказа и служебные блоки","Product Card, Order Button, Categories, Cart, Checkout, Search — когда и зачем ставить.",10,{"path":471,"title":472,"description":473,"category":338,"order":474,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Ffonts-buttons","Шрифты и стиль кнопок","10 шрифтовых семейств, размер 12–24 px, скруглённые vs прямые кнопки, тени и rpadding.",12,{"path":345,"title":5,"description":340,"category":338,"order":344,"pro":343},{"path":313,"title":314,"description":477,"category":338,"order":478,"pro":343},"layout_variant — section \u002F block \u002F empty. Как сделать блок на всю ширину или в виде карточки. Padding, border-radius, max-width.",14,{"path":320,"title":480,"description":481,"category":338,"order":482,"pro":343},"SEO — глобальные и страничные мета-теги","Site-SEO vs Page-SEO. Title, description, keywords. OG-превью для соцсетей. Рекомендуемая длина.",15,{"path":484,"title":485,"description":486,"category":338,"order":487,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Flogo-favicon-nav","Логотип, фавикон, название сайта и навигация","Загрузка логотипа (до 10 МБ), фавикон, site_name, nav_links (catalog \u002F page \u002F category \u002F url).",16,{"path":489,"title":490,"description":491,"category":338,"order":492,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fmedia-library","Медиа-библиотека","Папки и файлы (JPG \u002F PNG \u002F WebP \u002F GIF \u002F SVG до 10 МБ), загрузка, вставка в любой блок, public URL.",17,{"path":494,"title":495,"description":496,"category":338,"order":497,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fmulti-location","Конструктор для сети ресторанов (per-location)","Глобальные vs per-location настройки, переключатель в toolbar, подтверждение при несохранённых изменениях.",18,{"path":499,"title":500,"description":501,"category":338,"order":502,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fresponsive-preview","Responsive preview (Desktop \u002F Mobile)","Live-iframe с postMessage, переключение 1200px ↔ 390px, почему важно проверять оба режима.",19,{"path":504,"title":505,"description":506,"category":338,"order":507,"pro":343},"\u002Fdocs\u002Fsite-builder\u002Fcustom-domain","Собственный домен и поддомен","Настройка custom domain, subdomain fallback, TLS-сертификат. DNS-записи, проверка.",20,{"path":509,"title":510,"description":511,"category":339,"order":512,"pro":357},"\u002Fdocs\u002Fbilling\u002Ffree-vs-pro","Free vs Pro — что входит в каждый тариф","[object Object]",100,{"path":514,"title":515,"description":511,"category":339,"order":512,"pro":357},"\u002Fdocs\u002Fgetting-started\u002Ftrial-period","Что такое trial и что будет через 7 дней",{"path":517,"title":518,"description":511,"category":339,"order":512,"pro":357},"\u002Fdocs\u002Fqr-tables\u002Fguest-experience","Что видит гость после сканирования QR",{"path":520,"title":521,"description":511,"category":339,"order":512,"pro":357},"\u002Fdocs\u002Fsite-builder\u002Fcolor-palette","Цветовая палитра — 7 слотов, primary и secondary",{"path":523,"title":524,"description":511,"category":339,"order":512,"pro":357},"\u002Fdocs\u002Fsite-builder\u002Finterface","Интерфейс конструктора — 3 панели и toolbar",{"path":526,"title":527,"description":511,"category":339,"order":512,"pro":357},"\u002Fdocs\u002Fsite-builder\u002Fintroduction","Что такое конструктор витрины и зачем он нужен",1776913971893]