Repolode
Предложить
jeremy-prt

jeremy-prt/bloub

SVG- и Vue-реализация аватара бота x.ai: одна чёрная фигура меняет форму в 14 состояниях, а белые глаза анимируются независимо.

Открыть на GitHubСайт
Звёзды
1,834
Форки
221
Открытые issues
7
Последний коммит
2 месяца назад

Что это?

bloub воссоздаёт аватар бота x.ai с помощью набора SVG-фигур: это цельная залитая чёрным силуэтная фигура, которая меняет форму в 14 состояниях, и два белых глаза, движущихся независимо. Проект построен на Vue 3, Vite, TypeScript и Tailwind 4 и не использует библиотеку анимации.

В проекте есть небольшой редактор для выстраивания состояний в таймлайны с индивидуальной длительностью показа каждого состояния, панель настройки формы и цвета тела, а также выражения лица в состоянии покоя. Экспорт доступен в SVG, PNG, анимированный GIF и MP4 для таймлайнов. Для статичных форматов дополнительные библиотеки не нужны, а видеокодировщик загружается только при первом запросе.

Движок анимации в src/bot/ не зависит от фреймворков и систем отсчёта времени: при заданном времени он всегда возвращает один и тот же кадр, поэтому легко создавать статичные рендеры и писать тесты. Числовые константы получены на основе измерений в эталонном видео, а в проекте описан процесс их извлечения.

Ключевые возможности

  • 01Преобразует одну SVG-фигуру тела в 14 состояний без библиотеки анимации.
  • 02Анимирует два белых глаза независимо от тела.
  • 03Предлагает 8 форм тела, 12 цветов и 16 выражений лица в состоянии покоя.
  • 04Включает редактор таймлайнов для последовательности состояний с настройкой длительности показа каждого из них.
  • 05Экспортирует изображения в SVG, PNG и анимированный GIF, а таймлайны — в MP4.
  • 06Детерминированно рендерит кадр для любого момента времени; это удобно для тестов и миниатюр.

Сценарии использования

  • Добавление анимированного аватара бота в приложение на Vue без подключения библиотеки анимации.
  • Изучение того, как реализовать изменение формы на основе измерений с помощью обычного SVG.
  • Создание анимированных роликов с аватаром в формате GIF или MP4 для презентаций и публикаций в соцсетях.
  • Создание галереи статичных состояний аватара для обсуждения дизайна.

Быстрый старт

  1. 1

    Установите зависимости с помощью pnpm

    pnpm install
  2. 2

    Запустите сервер разработки, затем откройте localhost:5190

    pnpm dev

Что важно знать

  • Используемый дизайн аватара бота x.ai имитирует сторонний бренд, поэтому проект не связан с x.ai.
  • Код распространяется по лицензии MIT, но имитируемый дизайн этой лицензией не покрывается.

Темы

#svg#svg-animation#morphing#avatar#vue#typescript#animation

Частые вопросы

Что такое bloub?
SVG- и Vue-реализация аватара бота x.ai: одна чёрная фигура меняет форму в 14 состояниях, а белые глаза анимируются независимо. bloub воссоздаёт аватар бота x.ai с помощью набора SVG-фигур: это цельная залитая чёрным силуэтная фигура, которая меняет форму в 14 состояниях, и два белых глаза, движущихся независимо. Проект построен на Vue 3, Vite, TypeScript и Tailwind 4 и не использует библиотеку анимации.
bloub можно использовать бесплатно? Какая у него лицензия?
bloub распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
bloub всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в bloub — 17 авг. 2026 г..
Для чего можно использовать bloub?
Добавление анимированного аватара бота в приложение на Vue без подключения библиотеки анимации. Изучение того, как реализовать изменение формы на основе измерений с помощью обычного SVG. Создание анимированных роликов с аватаром в формате GIF или MP4 для презентаций и публикаций в соцсетях. Создание галереи статичных состояний аватара для обсуждения дизайна.
Как установить bloub?
Установите зависимости с помощью pnpm: pnpm install Запустите сервер разработки, затем откройте localhost:5190: pnpm dev
Где скачать bloub?
Исходный код и инструкции по установке — на GitHub: https://github.com/jeremy-prt/bloub

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты