Девять готовых canvas-анимаций «думающего» AI вместо одного спиннера

Что показано

Автор коротко хвалит библиотеку с «думающими» орбами, крутит демо прямо на сайте и на экране телефона (там видно живые значки Solving/Thinking/Working), обещает в комментариях скинуть ссылку на GitHub и на сайт с документацией. В конце ролика мелькает твит-анонс самого разработчика библиотеки с примером кода и цифрами по охвату.

Почему это работает

Вместо одной универсальной затычки на все случаи (спиннер) библиотека даёт девять семантических анимаций под конкретные состояния AI-пайплайна, и всё это рисуется на чистом 2D canvas - без WebGL и без CSS-фильтров, поэтому одинаково ведёт себя в Chrome, Safari и Firefox и обходится дёшево даже на слабых устройствах. Плюс встроенный IntersectionObserver, который сам ставит анимацию на паузу, если элемент укатился за экран, и уважение к prefers-reduced-motion - вместо кручения рисуется статичный кадр. Это и есть настоящая инженерия под капотом, а не красивая картинка для скриншота.

Обычный спиннер говорит «жди», а девять разных орбов говорят «жди, я делаю вот это конкретно» - и именно эта разница удерживает внимание пользователя дольше пары секунд.

Как повторить

1. Откройте libraries.dev/orbs - это живой плейграунд со всеми девятью состояниями, вкладками React, React Native и Swift UI и кнопкой Copy prompt. Исходники лежат в монорепозитории github.com/Jakubantalik/Libraries.dev, папка packages/thinking-orbs. Старый отдельный репозиторий Jakubantalik/thinking-orbs и сайт orbs.jakubantalik.com больше не главные: сайт только отправляет на libraries.dev, а в репозитории последний коммит от 16 августа и нет iOS-порта.
2. Поставьте пакет в React-проект (нужен React 18+, зависимостей у пакета нет):

npm install thinking-orbs

3. Импортируйте компонент и передайте состояние и размер:

import { ThinkingOrb } from 'thinking-orbs';

<ThinkingOrb state="searching" size={64} />

state - одно из девяти: working, searching, solving, listening, connecting, weaving, composing, breathing, shaping. size - 64 для аватара в чате или 20 для инлайн-текста, это два отдельно нарисованных варианта, а не масштаб одного. Дополнительно есть speed (множитель скорости, по умолчанию 1), paused (заморозить кадр) и aria-label (своя подпись для скринридера); любые обычные пропсы canvas вроде className и style тоже проходят.

4. Тему отдельно настраивать не нужно: по умолчанию theme="auto" ищет у родителя атрибут data-theme или класс dark/light (как в Tailwind и shadcn), а если их нет, берёт системную тему и переключается вслед за ней. Закрепить можно вручную: theme="dark" даёт светлые точки для тёмного фона, theme="light" - тёмные для светлого.
5. Если у вас React Native: пакета в npm нет (на 25 сентября thinking-orbs-native в реестре отсутствует), поэтому команда с сайта не сработает. Возьмите код из packages/thinking-orbs/ports/react-native/thinking-orbs-native и подключите как локальный пакет. Ему нужны @shopify/react-native-skia и react-native-reanimated, а в Expo запускать надо через expo run:ios или expo run:android, потому что нужны нативные модули. Импорт и пропсы те же: import { ThinkingOrb } from 'thinking-orbs-native'.
6. Если у вас SwiftUI: Swift-пакет ThinkingOrbsKit лежит в packages/thinking-orbs/ports/ios/ThinkingOrbsKit (iOS 15+ и macOS 12+, без зависимостей). Склонируйте репозиторий, в Xcode выберите File > Add Package Dependencies… > Add Local… и укажите эту папку. Подключение по URL репозитория не сработает: файла Package.swift в корне нет. Код:

import ThinkingOrbsKit

ThinkingOrb(state: .searching, size: .px64)
ThinkingOrb(state: .breathing, size: .px20, theme: .light, speed: 1.5)

7. Короткий путь для любой платформы: на странице libraries.dev/orbs нажмите Copy prompt и вставьте текст в Claude Code, Cursor или Codex. По описанию сайта, в промпте уже лежат строка установки, пример использования и все пропсы, а агент подключает библиотеку под вашу тему.

Проверочный прогон

Смените проп состояния - анимация должна перерисоваться мгновенно, без перезагрузки страницы. Прокрутите так, чтобы орб ушёл за пределы экрана - анимация должна замереть (это IntersectionObserver, а не баг). Включите в системе «уменьшить движение» - должен остаться статичный кадр орба вместо анимации; если кружок продолжает крутиться, проверьте, что настройка реально включена в системе (или эмулируйте её в Chrome DevTools: Rendering > Emulate CSS media feature prefers-reduced-motion). Отдельный проп для этого не нужен, компонент реагирует на настройку сам.

Где это пригодится

Если у вас свой чат-бот, ассистент или любой интерфейс с AI-обработкой, где сейчас на все состояния висит один и тот же спиннер, - тут можно за вечер раскидать девять смысловых анимаций по пайплайну, и продукт сразу перестаёт выглядеть как студенческий пет-проект. Особенно заходит на голосовых и обрабатывающих сервисах, где пользователь реально не понимает, крутится оно или зависло насмерть: состояния listening, searching, composing ложатся на «слушаю», «ищу», «собираю ответ» почти напрямую.

Ссылки и ресурсы

• https://libraries.dev/orbs - плейграунд, код установки для React, React Native и SwiftUI, кнопка Copy prompt. Бесплатно.
• https://github.com/Jakubantalik/Libraries.dev - актуальный монорепозиторий проекта (MIT, около 3,7 тыс. звёзд, последние изменения 24 сентября). Порты лежат в packages/thinking-orbs/ports/. Бесплатно.
• https://www.npmjs.com/package/thinking-orbs - веб-пакет, версия 0.3.2 от 22 сентября, MIT, около 385 тыс. загрузок за неделю 15-21 сентября. Бесплатно.
• https://libraries.dev/pro - Pro и Studio. Платно и необязательно: $9 в месяц за одно место, $39 в месяц за команду из 5 мест (место сверх пяти $9), разово $149 для одного или $499 для команды. Оплата через Stripe.
• https://libraries.dev/terms.html - условия: библиотеки и всё, что настроено в Studio, можно использовать в неограниченном числе личных и коммерческих проектов, нельзя только перепродавать сами Pro-пресеты как свой набор компонентов.
• https://github.com/Jakubantalik/thinking-orbs - старый отдельный репозиторий (около 3,2 тыс. звёзд), не обновлялся с 16 августа, iOS-порта в нём нет. Для работы берите монорепозиторий выше.
• https://orbs.jakubantalik.com - прежний сайт, теперь заглушка «Thinking orbs moved to a new home» со ссылкой на libraries.dev.

Оговорки

• В описании поста заявлено, что библиотека «поддерживает и React(Native), и SwiftUI», и это правда, но с оговоркой про установку: оба порта живут в монорепозитории, ни один не опубликован (RN-пакета в npm нет, SwiftUI подключается только как локальный Swift-пакет). Добраться до iOS-порта можно только из Libraries.dev: в старом репозитории thinking-orbs, на который ведут прежние ссылки, его нет.
• В самой озвучке ролика про React Native и SwiftUI ни слова, это сказано только в описании поста. Автор ролика просит написать в комментариях «Orb», чтобы прислать ссылки, но ходить за ними не нужно: всё открыто и перечислено выше.
• В ролике показан репозиторий Libraries.dev с тегами beam, design, effect, glow, motion, product: это витрина сразу семи библиотек одного автора (Border beam, Thinking orbs, Gooey, Voice, Bot avatars, Metal, Image), а не отдельный репозиторий орбов. Платный слой Pro относится ко всем сразу и на бесплатные орбы не влияет.
• Порты React Native и SwiftUI я сверил по README и манифестам пакетов, но сам не собирал и на устройстве не запускал. Веб-пакет поставлен в чистый проект и импортируется, ThinkingOrb в нём есть.