Добавить желание
Добавить желание

Капи Пачи и Квики

Концепт · этап 45

Не картинки, а живые жители сайта: гуляют по краю окна, засыпают, радуются вашим делам, подсказывают, где что лежит. И никогда не мешают.

  • Двое, у каждого своя работа. Капи Пачи — спокойный питомец, Квики — шустрый помощник.
  • Только по согласию. При знакомстве человек выбирает: выключить, только подсказки или питомец.
  • Без наказаний. Не болеют и не исчезают — только грустят или спят. Уход — от полезных дел на сайте.
  • Наряжаются. Четыре слота, вещи за бейджи и сезонные игры, костюмы к каждому сезону.
  • Финал — Rive. Скелетная анимация и state machine, персонаж — до 90 КБ. Здесь — прототип на SVG.
Живая главнаяДокумент и ТЗ

Как они уживаются

Вариант А

Один на выбор

Человек выбирает Капи Пачи или Квики, и он делает всё: гуляет, подсказывает, просит ухода.

  • Проще для аниматора и для сайта: один персонаж, один файл
  • Меньше движения на экране
  • Роли смешиваются: питомец, который бегает к кнопкам, — суетливый питомец
  • Капибара плохо показывает на кнопки, киви плохо «дзенит»

Вариант Б · советуем

Пара: питомец и помощник

Капи Пачи живёт медленно и любит уход. Квики бегает, приносит подсказки и показывает клювом. В «Только подсказки» остаётся один Квики.

  • Каждый делает то, что ему идёт: характеры не спорят
  • Режимы получаются сами: подсказки = Квики, питомец = оба
  • Есть сценки вдвоём — это и делает их живыми
  • Два персонажа у аниматора — два файла .riv, но одна схема состояний
Капи Пачи · питомецХодит медленно, садится, дремлет, жуёт. Любит, когда гладят, ванночку и мандаринку на голове. На подсказки не бегает.
Квики · помощникСеменит, подпрыгивает, наклоняет голову, показывает клювом и крылышком. Прячется за край и выглядывает. Взлететь не может — но пытается.

Сценки вдвоём

  • Квики подбегает к Капи Пачи, подпрыгивает и садится рядом
  • На простое оба засыпают рядом: Капи Пачи сидя, Квики — клюв под крыло
  • Квики пытается взлететь — Капи Пачи смотрит и не двигается (это и смешно)
  • На радость сайта — оба: Квики прыгает, Капи Пачи машет лапой
  • Поиграть: бантик летит, Квики приносит, Капи Пачи провожает взглядом

Капибара · Питомец

Капи Пачи

Само спокойствие, никуда не спешит. Гуляет вразвалку, садится, дремлет, жуёт. Любит, когда гладят, ванночку и мандаринку на голове — узнаваемая картинка из мемов про капибар.

  • ходит медленно, часто садится
  • дремлет на простое
  • «дзен»: глаза закрыты, мандаринка на голове
  • на подсказки не бегает — только носом укажет, если живёт без Квики

Лист состояний · Капи Пачи

Каждая плитка — живая: тот же скелет, что на сайте. Названия состояний — как в state machine у Rive.

Стоитдышит, моргает, следит за курсором
Идётмедленно, вразвалку, по нижнему краю
Сидитотдыхает между прогулками
Спит60 с без движения — засыпает
Дзенмандаринка на голове, глаза закрыты
Радуетсяжелание добавлено, список отправили
Груститдавно не гладили и не кормили
Жуётугостили мандаринкой
Гладятклик или тап по Капи Пачи
Машетздоровается, когда вы пришли
Показывает носомкогда живёт без Квики
Выглядываетпосле быстрой прокрутки
Ванночкауход: восстанавливает энергию

Птичка киви · Помощник

Квики

Сплошное любопытство и скорость. Семенит по краю окна, наклоняет голову, показывает клювом и крылышком, где что лежит. Летать не умеет — но иногда очень старается.

  • семенит быстро, подпрыгивает
  • прячется за край и выглядывает
  • показывает клювом на кнопку
  • «пытается вспорхнуть» — машет крылышками и плюхается обратно

Лист состояний · Квики

Каждая плитка — живая: тот же скелет, что на сайте. Названия состояний — как в state machine у Rive.

Стоитнаклоняет голову, моргает
Семенитбыстро бежит к подсказке
Сидитна краю карточки или рядом с Капи Пачи
Спитклюв под крылом
Подпрыгиваетрадуется вместе с вами
Груститредко: подсказку закрыли «Не подсказывать»
Клюётугостили ягодкой
Гладятраспушается
Машет крылышкомпривет и пока
Показывает клювомподсказка к кнопке или полю
Выглядываетиз-за края окна или карточки
Пытается взлететьна простое, просто так

Гардероб: слоты и сезонные костюмы

1234
Капи Пачи: колпак, шарф, очки, подарочек
1234
Квики: тыква, бабочка, тёмные очки, лупа в клюве
  1. 🎩 Головау Капи Пачи главный слот: мандаринка, колпак, тыква
  2. 🧣 Шеяшарф, бабочка, гирлянда
  3. 👓 Лицоочки, маска
  4. 🎀 В лапаху Квики — в клюве
  5. Каждая вещь — свой слой в Rive, крепится к кости слота и двигается вместе с ней. Включается входом outfit_<слот> (номер вещи), поэтому новые вещи не требуют новой анимации.

Сезонные костюмы — по темам сайта

Хеллоуинсейчас, до 2 ноября
Осеньсентябрь — ноябрь
Новый годс 1 декабря
Зимадекабрь — февраль
14 февраля10–15 февраля
23 февраля20–24 февраля
8 марта5–9 марта
Веснамарт — май
Летоиюнь — август

Как открываются вещи: бейджи («Первый подарок», «Книголюб»), сезонные игры («Охота на тыквы», «Огоньки»), дни ухода и праздники. Закрытые вещи можно примерить — под ними написано условие. Покупок за деньги нет.

Где гуляют и как себя ведут

Смотрят за курсоромГлаза и голова следят, курсор сзади — поворачиваются.
Прячутся при быстрой прокруткеНыряют за край, после остановки выглядывают и выходят.
Засыпают через 60 с простояКапи Пачи садится и спит, Квики спит рядом. Двинули мышью — проснулись и потянулись.
Радуются вашим деламЖелание добавлено, список отправили, «Спасибо» — прыжок, искры, облачко на 2 секунды.
Не закрывают кнопкиНе встают на кнопки, поля, ссылки и текст. Над кнопкой — полупрозрачные и пропускают нажатия.
Отходят от курсора над кнопкойНавели на маскота, а под ним кнопка — он уходит в сторону.
На телефоне — в уголкеМеньше, реже, только угол над нижней панелью.
Меньше движенияПри системной настройке не гуляют: сидят, позы меняются раз в 20 секунд.

Подсказки

Вставьте ссылку из магазина — я заполню название, цену и картинку.

Вставить ссылкуПозжеНе подсказывать
  • Квики подбегает к элементу или выныривает рядом с ним, показывает клювом, вокруг элемента — мягкое кольцо
  • Не чаще одной подсказки за визит. Одна и та же — не чаще раза в неделю
  • «Позже» — до следующего визита, «Не подсказывать» — выключает совсем (вернуть — в настройках)
  • Только к тому, что видно на экране: страницу за человека не крутим
  • Что подсказываем: пустой список, список без даты, «Поделиться», скоро ДР друга, знакомство новичка (4 шага)

Режимы — выбирает человек

Где переключать

  • При первом знакомстве — карточка с выбором (экран)
  • Меню профиля → «Капи Пачи и Квики»: режим и «Спрятать на этой странице»
  • Настройки → Внешний вид: режим, кто живёт, подсказки, звук, телефон (экран)

Mini App: только подсказки

По умолчанию в Telegram — маленький Квики с подсказками, без прогулок и ухода; выключили на сайте — выключено и там. Экран маленький, у Telegram своя кнопка внизу, заходят на минуту ради одного дела, а новичкам из бота подсказка как раз нужна. Экраны

Телефон: тихо в уголке

В 1,5 раза меньше, сидят в левом углу за краем нижней панели, двигаются в 2–3 раза реже, по шапке и карточкам не ходят. Экраны

Что им нельзя

✕ Закрывать кнопки и поляНи на секунду не перехватывают нажатие. Стоят только на пустом месте.
✕ Мешать читатьНе стоят на тексте, не садятся на статьи и документы. На страницах-документах их нет.
✕ ШуметьЗвук выключен, пока его не включат. Никаких звуков без действия человека.
✕ НаказыватьНе болеют, не умирают, не убегают. Никаких «вы бросили питомца».
✕ НавязыватьсяПодсказка — раз за визит, напоминание — раз в день и только если включено.
✕ Лезть в важноеНет их в окнах оплаты, входа, при вводе пароля, в модальных окнах и листах.
✕ Тормозить сайтРантайм грузится после страницы и только если маскоты включены. Вкладка скрыта — анимация стоит.
✕ Мешать незрячимДля экранных дикторов маскоты не существуют; облачка подсказок — обычный текст с кнопками.

Технология

RiveвыборСкелет + state machine, входы из кода (настроение, голод, взгляд, одежда), по файлу .riv на персонажа: Квики до 70 КБ, Капи Пачи до 90 КБ. Рантайм грузится после страницы и только если маскоты включены.
LottieХорош для коротких роликов, но без state machine: переходы, взгляд и одежду пришлось бы собирать в коде из десятков файлов.
SpineМощный скелет для игр, но платная лицензия на рантайм и тяжелее для веба.
СпрайтыКаждое состояние × каждая вещь — свои кадры: гардероб умножает вес в разы.
SVG + CSS/JSпрототипКак на этих экранах: быстро проверить поведение. Для «детально анимированных» — мало: нет мягких деформаций.

Готовые персонажи со стоков не подходят: нет полного набора состояний в одном стиле, нет слотов одежды, чужой бренд и лицензия, которая обычно не разрешает делать из персонажа маскота сервиса. Документ, ТЗ аниматору и риски — в _MASCOT_CONCEPT_2026-10-19.md.

Экраны этапа

Живая главнаяГуляют, спят, прячутся, радуются. Служебная панель — событияОткрыть →Свой список с подсказкамиПустой, без даты, «Поделиться», ДР другаОткрыть →УходШкалы, погладить, поиграть, ванночкаОткрыть →ГардеробСлоты, закрытые вещи, костюмы, примеркаОткрыть →ЗнакомствоВыбор режима и 4 шагаОткрыть →НастройкиВнешний вид: режим, подсказки, звукОткрыть →ТелефонВ уголке над нижней панельюОткрыть →Mini AppТолько подсказки маленьким КвикиОткрыть →