Magic UI, KokonutUI, Aceternity UI: готовые анимированные компоненты для сайта

Magic UI, KokonutUI и Aceternity UI — библиотеки готовых анимированных компонентов для React-проектов, работающие по принципу copy-paste. Копируешь исходный код компонента в свой проект, подключаешь зависимости (Framer Motion, Tailwind), адаптируешь под свои цвета и данные. Нет единого npm-пакета на всё — зато полный контроль над кодом без зависимости от апстрима.

Почему copy-paste, а не npm install?

Shadcn UI сделал этот паттерн стандартом, и все три библиотеки его переняли: ты владеешь кодом компонента целиком. Нет breaking changes при обновлении библиотеки, нет CSS-конфликтов с твоими стилями, нет ограничений апстрима. Скопировал — компонент твой, дорабатываешь как угодно. Цена: каждый компонент подключается отдельно.

Для большинства компонентов из всех трёх библиотек нужен Framer Motion и Tailwind CSS. Ставятся один раз на проект:

npm install framer-motion
npm install -D tailwindcss postcss autoprefixer

После этого большинство компонентов заработают без дополнительных зависимостей.

Magic UI — что там есть

Magic UI — крупнейшая из трёх по каталогу. Упор на элементы, которые встречаешь на современных SaaS-лендингах: анимированные градиентные фоны, текст с shimmer-эффектом, border beam, orbiting circles, marquee. Стиль нейтральный, без жёсткого характера — легко ложится на любую дизайн-систему.

Что там есть по категориям:

• Текстовые эффекты — shimmer, typing animation, blur reveal, word rotate, number ticker
• Фоны — dot pattern, grid, animated gradient, particles, meteor shower
• UI-элементы — border beam, animated beam, magic card с hover-эффектом, shine border
• Секции — bento grid, marquee, orbiting circles, globe

Pro-версия — 50+ готовых секций и 9+ шаблонов лендингов за $199 lifetime, живёт отдельно: pro.magicui.design.

Каждый компонент задокументирован с превью и полным исходным кодом. Если нужно быстро поднять дизайн — Magic UI первое место, где смотреть.

Чем KokonutUI отличается от Magic UI?

KokonutUI — меньше каталог, зато каждый компонент выглядит нестандартно. Там нет набора «я это видел на каждом втором SaaS-лендинге». Стиль экспериментальный: плавные переходы с характером, необычные hover-состояния, анимации, которые не выглядят сгенерированными по шаблону. Хорошо для портфолио, студий, продуктов где дизайн — часть сообщения.

Документация у KokonutUI устроена так же, как у Magic UI: страница компонента = превью + исходный код. Открываешь инспектор, смотришь как устроена анимационная кривая, копируешь что нужно.

Aceternity UI — когда нужен «вау»-эффект

Aceternity — самая визуально плотная из трёх. Компоненты рассчитаны на тёмный фон: 3D card effect, spotlight, background beams с коллизией, aurora, lens. Если Magic UI — нейтральный инструмент, то Aceternity — конкретный эстетический выбор. Подходит для strong first impression на лендинге или портфолио. Не подходит для утилитарного SaaS-дашборда — там это перегруз.

Большинство компонентов бесплатны, есть Pro-версия с расширенным набором. Зависимости те же: Framer Motion + Tailwind.

Как работать с этими библиотеками через Claude Code?

Без контекста Claude Code воспроизводит среднестатистический паттерн — именно то, от чего спасают эти библиотеки. Правило простое: дай Claude исходный код компонента, а не название библиотеки. Модель не ходит в интернет и не знает текущую версию Magic UI — зато с кодом на входе разберётся точно и не сломает анимационную логику.

Рабочий флоу:

1. Открой страницу нужного компонента на magicui.design или kokonutui.pro
2. Скопируй исходный код компонента целиком
3. Вставь в Claude Code с контекстом: «Вот компонент из Magic UI. Адаптируй под мою цветовую схему [цвета] и подключи к [компонент/страница в проекте]»
4. Claude адаптирует стили, сохраняя анимационную логику — не переписывает с нуля

Разница между «Claude пишет анимацию с нуля» и «Claude адаптирует готовый компонент» ощутимая. В первом случае получаешь ease-in там, где нужен ease-out, симметричные тайминги без характера. Во втором — анимация уже проверена на практике. Подробнее о том, почему easing важен и как его контролировать, писал в разборе дизайн-скиллов для Claude Code.

Frontend-design скилл для лучшего результата

Официальный скилл frontend-design из репозитория anthropics/skills (148k★) заставляет Claude задать стиль до генерации — интерфейсы перестают выглядеть машинными. Вместе с кодом из Magic UI или Aceternity это даёт двойной эффект: правильные компоненты плюс правильный контекст у модели.

git clone https://github.com/anthropics/skills ~/.claude/skills/anthropics-skills

Активация в Claude Code: /frontend-design. После этого скажи какую библиотеку используешь — Claude учтёт её стилистику при генерации связующего кода. Про другие способы перенести дизайн в код с Claude Code — в статье Google Stitch + Claude Code.

Какую библиотеку выбрать: сравнение Magic UI, KokonutUI и Aceternity

Все три решают одну задачу — готовые анимированные компоненты для React — разными акцентами. Magic UI ставит на объём и универсальность, KokonutUI на нестандартный визуал, Aceternity на тёмные плотные эффекты. Их можно миксовать: общая основа (Framer Motion + Tailwind) делает компоненты совместимыми без конфликтов.

Прозрачно: ссылки на magicui.design и kokonutui.pro в статье — партнёрские. Если оформишь план по ним, мне придёт процент; цена для тебя не меняется.

Источники

• Magic UI — библиотека анимированных React-компонентов на Framer Motion + Tailwind
• KokonutUI — библиотека компонентов с оригинальным визуальным стилем
• anthropics/skills — официальный репозиторий скиллов Claude Code (148k★), включая frontend-design