Aurora Labs

Красивыйmotion—готовкпродакшену

Next.js, Framer Motion, GSAP ScrollTrigger, Lenis и shadcn UI — с импортом анимаций из Figma.

Начать

Компоненты

60 fps

анимации только transform

Доступность

режим reduced motion

Figma

MCP motion context

Собранокакcomposablegrid

Bento подсвечивает главный блок истории, не ломая motion-стек под ним.

Motion-система

Общие Framer variants и GSAP scroll primitives — один словарь на все страницы.

Merge из Figma

Design context + motion context по node id.

shadcn UI

Dialog, sheet, tabs с доступными дефолтами.

Lenis scroll

Плавный wheel, синхрон с ScrollTrigger pin-секциями.

Тёмная тема

Class-based theme с brand OKLCH tokens.

Быстрый запуск

Scaffold из web-motion-starter, кастом секций, visual QA.

Совет: дублируйте секцию и меняйте ячейки — grid spans остаются в className.

Историяпоскроллу

Секция закрепляется при скролле; прогресс и шаги синхронизируются с Lenis + GSAP.

Шаг 1

Дизайн в Figma

Вёрстка, типографика и motion на одном artboard.

Шаг 2

Экспорт motion context

Keyframes, easing и сниппеты через Figma MCP.

Шаг 3

Merge в React

Сопоставьте data-node-id, оберните в motion.* или GSAP timelines.

Шаг 4

Запуск

Lenis, fallback при reduced motion, финальная полировка shadcn UI.

Всёдлясложныхинтерфейсов

Собирайте лендинг из примитивов, а не из разовых анимаций в каждом файле.

Framer Motion

Декларативный UI-motion — stagger, layout, gestures, переходы страниц.

GSAP ScrollTrigger

Pin-секции, scrub-таймлайны, scroll-parallax.

Lenis + Base UI

Плавный скролл с GSAP; доступные dialog, sheet, tabs.

Дизайн-токены

Общие duration и easing в CSS и TypeScript.

Figma pipeline

get_design_context + get_motion_context по node id.

Готов к production

Strict TypeScript, ESLint, секции, дружелюбные к static export.

Чтоговоряткоманды

Паттерны, которые можно перенести в клиентские проекты без переписывания motion с нуля.

“Мы заменили три библиотеки анимаций этим стеком. История по скроллу наконец стала цельной.”

Елена В.

Руководитель дизайна, Northline

“Motion context из Figma попал в React с тем же easing — keyframes больше не угадываем в DevTools.”

Маркус Т.

Фронтенд-разработчик, Forma Labs

“Синхрон Lenis и ScrollTrigger — недостающий кусок. Pin-секции работают с первого раза.”

София Р.

Креативный разработчик, Pixel & Co

“Мы заменили три библиотеки анимаций этим стеком. История по скроллу наконец стала цельной.”

Елена В.

Руководитель дизайна, Northline

“Motion context из Figma попал в React с тем же easing — keyframes больше не угадываем в DevTools.”

Маркус Т.

Фронтенд-разработчик, Forma Labs

“Синхрон Lenis и ScrollTrigger — недостающий кусок. Pin-секции работают с первого раза.”

София Р.

Креативный разработчик, Pixel & Co

Простыетарифы

Бесплатный starter для форка. Платные тарифы — через оплату Stripe при настроенном env.

Старт

Motion-примитивы и demo-секции для форка.

Бесплатно

Framer + GSAP
Lenis scroll
6 шаблонов секций

Про

Figma MCP и shadcn UI блоки.

$29/мес

Импорт motion context
Dialog, sheet, tabs
Scroll pin-истории
Приоритетные паттерны

Команда

Мульти-страничные сайты с ChatPRD.

$99/мес

PRD → код
Кастомные design tokens
Правила команды

Частыевопросы

Framer Motion — для UI и layout; GSAP ScrollTrigger — для scroll-таймлайнов и pin-секций; Lenis — для плавного скролла. Стартер уже связывает их вместе.

Будьтевкурсе

Паттерны motion и Figma → code. Данные в Convex — обновления live.

Написать нам

Готовы к вашему Figma-файлу

Вставьте URL дизайна в чат — motion, layout и компоненты попадут в этот стек с тем же easing и timing.

Открыть в Cursor Документация Figma MCP

Aurora Labs

Красивыйmotion—готовкпродакшену

Next.js, Framer Motion, GSAP ScrollTrigger, Lenis и shadcn UI — с импортом анимаций из Figma.

Начать

Компоненты

60 fps

анимации только transform

Доступность

режим reduced motion

Figma

MCP motion context

Собранокакcomposablegrid

Bento подсвечивает главный блок истории, не ломая motion-стек под ним.

Motion-система

Общие Framer variants и GSAP scroll primitives — один словарь на все страницы.

Merge из Figma

Design context + motion context по node id.

shadcn UI

Dialog, sheet, tabs с доступными дефолтами.

Lenis scroll

Плавный wheel, синхрон с ScrollTrigger pin-секциями.

Тёмная тема

Class-based theme с brand OKLCH tokens.

Быстрый запуск

Scaffold из web-motion-starter, кастом секций, visual QA.

Совет: дублируйте секцию и меняйте ячейки — grid spans остаются в className.

Историяпоскроллу

Секция закрепляется при скролле; прогресс и шаги синхронизируются с Lenis + GSAP.

Шаг 1

Дизайн в Figma

Вёрстка, типографика и motion на одном artboard.

Шаг 2

Экспорт motion context

Keyframes, easing и сниппеты через Figma MCP.

Шаг 3

Merge в React

Сопоставьте data-node-id, оберните в motion.* или GSAP timelines.

Шаг 4

Запуск

Lenis, fallback при reduced motion, финальная полировка shadcn UI.

Всёдлясложныхинтерфейсов

Собирайте лендинг из примитивов, а не из разовых анимаций в каждом файле.

Framer Motion

Декларативный UI-motion — stagger, layout, gestures, переходы страниц.

GSAP ScrollTrigger

Pin-секции, scrub-таймлайны, scroll-parallax.

Lenis + Base UI

Плавный скролл с GSAP; доступные dialog, sheet, tabs.

Дизайн-токены

Общие duration и easing в CSS и TypeScript.

Figma pipeline

get_design_context + get_motion_context по node id.

Готов к production

Strict TypeScript, ESLint, секции, дружелюбные к static export.

Чтоговоряткоманды

Паттерны, которые можно перенести в клиентские проекты без переписывания motion с нуля.

“Мы заменили три библиотеки анимаций этим стеком. История по скроллу наконец стала цельной.”

Елена В.

Руководитель дизайна, Northline

“Motion context из Figma попал в React с тем же easing — keyframes больше не угадываем в DevTools.”

Маркус Т.

Фронтенд-разработчик, Forma Labs

“Синхрон Lenis и ScrollTrigger — недостающий кусок. Pin-секции работают с первого раза.”

София Р.

Креативный разработчик, Pixel & Co

“Мы заменили три библиотеки анимаций этим стеком. История по скроллу наконец стала цельной.”

Елена В.

Руководитель дизайна, Northline

“Motion context из Figma попал в React с тем же easing — keyframes больше не угадываем в DevTools.”

Маркус Т.

Фронтенд-разработчик, Forma Labs

“Синхрон Lenis и ScrollTrigger — недостающий кусок. Pin-секции работают с первого раза.”

София Р.

Креативный разработчик, Pixel & Co

Простыетарифы

Бесплатный starter для форка. Платные тарифы — через оплату Stripe при настроенном env.

Старт

Motion-примитивы и demo-секции для форка.

Бесплатно

Framer + GSAP
Lenis scroll
6 шаблонов секций

Про

Figma MCP и shadcn UI блоки.

$29/мес

Импорт motion context
Dialog, sheet, tabs
Scroll pin-истории
Приоритетные паттерны

Команда

Мульти-страничные сайты с ChatPRD.

$99/мес

PRD → код
Кастомные design tokens
Правила команды

Частыевопросы

Будьтевкурсе

Паттерны motion и Figma → code. Данные в Convex — обновления live.

Написать нам

Готовы к вашему Figma-файлу

Вставьте URL дизайна в чат — motion, layout и компоненты попадут в этот стек с тем же easing и timing.

Открыть в Cursor Документация Figma MCP

Красивыйmotion—готовкпродакшену

Собранокакcomposablegrid

Motion-система

Merge из Figma

shadcn UI

Lenis scroll

Тёмная тема

Быстрый запуск

Историяпоскроллу

Дизайн в Figma

Экспорт motion context

Merge в React

Запуск

Всёдлясложныхинтерфейсов

Framer Motion

GSAP ScrollTrigger

Lenis + Base UI

Дизайн-токены

Figma pipeline

Готов к production

Чтоговоряткоманды

Елена В.

Маркус Т.

София Р.

Елена В.

Маркус Т.

София Р.

Простыетарифы

Старт

Про

Команда

Частыевопросы

Какую библиотеку анимаций выбрать?

Как импортировать motion из Figma?

Как включить оплату через Stripe?

А доступность?

Форма подписки сохраняет данные?

Куда попадают подписки после оплаты?

Можно деплоить на Vercel?

Будьтевкурсе

Красивыйmotion—готовкпродакшену

Собранокакcomposablegrid

Motion-система

Merge из Figma

shadcn UI

Lenis scroll

Тёмная тема

Быстрый запуск

Историяпоскроллу

Дизайн в Figma

Экспорт motion context

Merge в React

Запуск

Всёдлясложныхинтерфейсов

Framer Motion

GSAP ScrollTrigger

Lenis + Base UI

Дизайн-токены

Figma pipeline

Готов к production

Чтоговоряткоманды

Елена В.

Маркус Т.

София Р.

Елена В.

Маркус Т.

София Р.

Простыетарифы

Старт

Про

Команда

Частыевопросы

Какую библиотеку анимаций выбрать?

Как импортировать motion из Figma?

Как включить оплату через Stripe?

А доступность?

Форма подписки сохраняет данные?

Куда попадают подписки после оплаты?

Можно деплоить на Vercel?

Будьтевкурсе