r3f-animation — скилл для Claude Code: анимация объектов Three Fiber
Скилл для плавной анимации 3D-объектов в React Three Fiber через useFrame, damping и GLTF-клипы. Подходит для процедурного движения, переходов между состояниями и управления анимацией по запросу.
npx skills add EnzeD/r3f-skills --skill r3f-animation -a claude-codeЧто делает r3f-animation
Скилл предоставляет готовые паттерны анимации 3D-сцен: damping с возвратом в исходное состояние, синхронизация с физикой через Rapier, воспроизведение авторских GLTF-клипов через Drei. Пример с useFrame и MathUtils.damp показывает, как плавно интерполировать позицию объекта между целевыми значениями, перехватывая целевые состояния из React (активен, открыт) без привязки к частоте кадров.
В скилле объяснены ключевые различия: когда брать useFrame для непрерывных трансформов, когда — Drei useAnimations для готовых клипов, когда передавать управление физическому движку Rapier. Рассмотрены ловушки производительности: правильное использование дельта-времени при интеграции скорости, переиспользование векторов и кватернионов, явная пауза дорогих анимаций и уважение к prefers-reduced-motion.
Требует установленных Fiber 9, Drei и React 19 либо совместимых версий. Если в проекте уже есть spring-библиотека или другая система анимации, скилл советует проверить зависимости перед добавлением новых инструментов и не вводить менеджер состояния только для анимации меша.
Какие задачи решает
- Настроить плавное движение объекта между двумя состояниями без скачков
- Воспроизвести сохранённые GLTF-анимации для разных экземпляров модели
- Синхронизировать движение сетки с физическим движком вместо борьбы с симуляцией
- Оптимизировать анимацию: не выделять вектора каждый кадр, избежать пересчётов при изменении refresh rate
- Остановить дорогостоящую анимацию, когда объект скрыт или окно потеряло фокус
Примеры запросов агенту
- Добавь damping анимацию: объект должен плавно двигаться по оси X при смене состояния
- Настрой воспроизведение GLTF-клипов для двух экземпляров одной модели независимо
- Помоги синхронизировать анимацию движения с физикой Rapier вместо прямого изменения позиции
Как установить r3f-animation
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-animation -a claude-code2Вручную: положить файлы
~/.claude/skills/r3f-animation/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/r3f-animation/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-animation -a codex2Вручную: положить файлы
.agents/skills/r3f-animation/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-animation -a cursor2Вручную: положить файлы
.cursor/skills/r3f-animation/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-animation2Вручную: положить файлы
.github/skills/r3f-animation/SKILL.md1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-animation -a gemini-cli2Командой платформы
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-animationВручную: положить файлы
.devin/skills/r3f-animation/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-animation -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о r3f-animation
Как установить r3f-animation в Claude Code?
Выполни npx skills add EnzeD/r3f-skills --skill r3f-animation -a claude-code, затем укази путь ~/.claude/skills/r3f-animation/SKILL.md в конфиге Claude Code.
Что делает r3f-animation?
Предоставляет готовые паттерны для анимации 3D-объектов через useFrame с damping, воспроизведения GLTF-клипов и синхронизации с физическим движком. Включает примеры оптимизации производительности и советы по timing.
Какие версии Three Fiber требуются?
Примеры нацелены на Fiber 9 и React 19. Перед использованием проверь установленные версии; скилл подходит и для совместимых версий, но без гарантий для старых релизов.
