К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

lottie-bodymovin — скилл для Claude Code: что делает и как установить

Помогает переносить 12 принципов диснеевской анимации в векторные Lottie-ролики. Связывает формулы After Effects с управлением через JavaScript.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add calesthio/OpenMontage --skill lottie-bodymovin -a claude-code
Открыть на GitHub

Что делает lottie-bodymovin

Скилл содержит правила переноса классических принципов анимации в векторную графику для веба. Внутри собраны рекомендации по подготовке композиций в After Effects и управление готовым JSON-файлом в коде.

Для каждого принципа даны математические выражения After Effects или фрагменты кода плеера. Есть формула затухающих колебаний для овершута и обратная пропорция масштабирования по осям. Во фронтенде анимация контролируется вызовами setSpeed, goToAndStop или переключением сегментов через playSegments.

Без точной настройки композиции в After Effects эти инструкции бесполезны. Код в браузере лишь меняет скорость воспроизведения и порядок кадров. Траектории движения и задержки слоёв нужно закладывать заранее.

Какие задачи решает

  • связать параметры сжатия и растяжения в After Effects с кодом плеера
  • разделить воспроизведение на фазы замаха и действия через playSegments
  • настроить затухающие колебания с помощью математических выражений в слоях
  • синхронизировать вторичные движения по событиям кадров lottie-react

Примеры запросов агенту

  • Покажи выражение для After Effects, чтобы сделать эффект перелёта при вращении в Lottie
  • Как запустить вторую анимацию после завершения первой в lottie-react?

Как установить lottie-bodymovin

1Через Skills CLI (Vercel)

npx skills add calesthio/OpenMontage --skill lottie-bodymovin -a claude-code

2Вручную: положить файлы

~/.claude/skills/lottie-bodymovin/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/lottie-bodymovin/

Из того же набора28

Весь набор →
video-understand calesthio Скилл извлекает кадры из видео и расшифровывает аудио локально через ffmpeg и Whisper. Подходит для анализа роликов без API-ключей. Claude Code CX Codex Cursor +1 1 300установок remotion calesthio Скилл для вёрстки видео в Remotion с библиотекой переходов и правилами сборки сцен при 30 кадрах в секунду. Claude Code CX Codex Cursor +1 1 200установок video-download calesthio Скачивает видео, аудио и субтитры по URL через yt-dlp. Пригодится для получения файла, выбора качества или просмотра метаданных без загрузки. Claude Code CX Codex Cursor +1 1 200установок create-video calesthio Скилл превращает описание в готовый видеоролик: пишешь, что хочешь видеть, а HeyGen генерирует сценарий, выбирает аватара, озвучивает и монтирует. Подходит для быстрого создания демо, объяснялок и промо без лишних настроек. Claude Code CX Codex Cursor +1 1 100установок video-toolkit calesthio Автоматизирует создание видео: генерирует закадровый голос, музыку, анимирует говорящие головы, компонует сцены через Remotion. Нужны Node.js, Python3, ffmpeg и доступ к облачным GPU (Modal или RunPod). Claude Code CX Codex Cursor +1 1 100установок text-to-speech calesthio Генерирует аудио из текста через HeyGen Starfish, подбирая голос, скорость и тон. Пригодится для озвучки, дикторского текста и подкастов. Claude Code CX Codex Cursor +1 1 100установок bfl-api Black Forest Labs Скилл помогает подключать BFL FLUX API для генерации и редактирования изображений. Нужен для асинхронных запросов, polling и вебхуков. Claude Code CX Codex Cursor +1 1 000установок threejs-textures calesthio Скилл для работы с текстурами Three.js: загрузка изображений, UV-координаты, кубмапы, HDR-среды и оптимизация. Пригодится при создании 3D-сцен с материалами, скайбоксами и отражениями окружения. Claude Code CX Codex Cursor +1 1 000установок

Похожие

design-guide paperclipai Скилл задаёт правила Paperclip для UI-компонентов, токенов, типографики и статусов. Пригодится при создании страниц и изменении фронтенда. Claude Code CX Codex Cursor +1 362установок hairline-create lucasmarkes Генерирует интерактивную изометрическую векторную фигуру в стиле движка Hairline и упаковывает её в один автономный HTML-файл. Claude Code CX Codex Cursor +1 5 000установок fullstack-dev MiniMax-AI Пошаговый регламент для создания фулстек-приложений и интеграции бекенда с фронтендом. Задаёт архитектурный чек-лист от сбора требований до проверки сборки. Claude Code CX Codex Cursor +1 3 400установок paseo-plugin getpaseo Скилл помогает создавать и настраивать локальные плагины для Paseo: от интерфейсных панелей и слэш-команд до RPC и хуков жизненного цикла агентов. Claude Code CX Codex Cursor +1 1 400установок gpui-kit longbridge Скилл обучает ИИ-агентов правилам разработки десктопных приложений на Rust через крейт gpui-kit. Помогает собирать интерфейсы, настраивать фокус, темы и писать тесты. Claude Code CX Codex Cursor +1 1 000установок frontend-dev MiniMax-AI Скилл проектирует страницы с анимациями, медиафайлами от MiniMax и готовым текстом. Помогает собирать промо-сайты, витрины и дашборды. Claude Code CX Codex Cursor +1 3 200установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о lottie-bodymovin

Как установить lottie-bodymovin в Claude Code?

Выполните команду npx skills add calesthio/OpenMontage --skill lottie-bodymovin -a claude-code. Также можно вручную сохранить файл по пути ~/.claude/skills/lottie-bodymovin/SKILL.md.

Что делает скилл lottie-bodymovin?

Он описывает перенос 12 принципов диснеевской анимации в формат Lottie. В инструкции сопоставляются выражения для After Effects с методами управления плеером в JavaScript.

Какая библиотека используется для интеграции с React?

В примерах используется lottie-react для встраивания компонентов и lottie-interactivity для интерактивного управления.

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором