AIKraft/AI/Войти
AIKraft/Skills/Аниматор Framer Motion

Аниматор Framer Motion

Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request

patricio0312rev official Дизайн

Что делает навык

Навык создаёт плавные анимации и микровзаимодействия в React с использованием библиотеки Framer Motion. Он поддерживает переходы между страницами, жесты, анимации на основе прокрутки и оркестрированные последовательности.

Когда применять

  • Создание анимаций появления, исчезновения и наведения (hover/tap) для UI-элементов.
  • Реализация переходов между страницами в Next.js App Router.
  • Добавление интерактивных жестов, таких как перетаскивание (drag) и свайп для удаления.
  • Создание параллакс-эффектов и прогресс-баров, реагирующих на прокрутку страницы.
  • Оркестрация сложных последовательностей анимаций с использованием stagger и parent-child связей.

Как работает

  1. Установить пакет framer-motion через npm install framer-motion.
  2. Импортировать необходимые хуки и компоненты (motion, AnimatePresence, useInView, useScroll и др.).
  3. Определить параметры анимации (initial, animate, exit) или использовать паттерн Variants для сложных сценариев.
  4. Настроить переходы (transitions) с указанием длительности, easing или пружинной физики (spring physics).
  5. Применить анимации к компонентам, используя свойства GPU-ускорения (opacity, transform) для оптимизации.
  6. При необходимости использовать хуки useAnimate, useMotionValue или useTransform для императивного управления и сложных связей.

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

Создай компонент модального окна с плавным появлением и исчезновением, используя AnimatePresence.
Реализуй анимацию списка элементов, которые появляются с задержкой (stagger) при загрузке страницы.
Добавь эффект параллакса для заголовка на главном экране, который движется медленнее фона при прокрутке.

Что понадобится

  • npm install framer-motion

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «framer-motion-animator» из репозитория: # https://github.com/patricio0312rev/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r framer-motion-animator/ ~/.claude/skills/framer-motion-animator/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.