Web Motion Starter

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

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

Начать

Компоненты

60 fps

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

Доступность

режим reduced motion

Figma

MCP motion context

Нам доверяют команды с отполированным UI

Acme StudioNorthlinePixel & CoForma LabsStudio KArc TypeMono WorksField DesignAcme StudioNorthlinePixel & CoForma LabsStudio KArc TypeMono WorksField Design

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

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

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.

Собранокак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.

Сделанодляпроизводительности

Motion-пресетов

0ms

Медианная задержка скролла

Lighthouse: доступность

Строк экономии vs чистый GSAP

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

Секция закрепляется при скролле; прогресс и шаги синхронизируются с 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.

Дорожнаякарта

Вертикальные вехи с линией связи. Каждый пункт появляется при скролле.

Q1 2026

Starter и motion-примитивы

Framer + GSAP + Lenis, каталог секций, site-builder skill.

Q2 2026

Синхронизация Figma-токенов

Variable defs → brand-palette.css и motion CSS tokens.

Q3 2026

Эталонные сайты

Шаблоны SaaS, agency и minimal typography для агента.

Q4 2026

Визуальная регрессия

Playwright-снимки 375 / 768 / 1440 перед деплоем.

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

Паттерны, которые можно перенести в клиентские проекты без переписывания 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

Людизапроектом

Замените имена и био на свою команду — аватары с инициалами, пока не подключите next/image.

Alex Morgan

Creative direction

Leads visual language, Figma systems, and motion specs for client launches.

Chris Park

Full stack

Convex, Stripe, and form flows when the landing needs more than static pages.

Jordan Lee

Frontend & motion

Ships Next.js landings — Framer for UI, GSAP for scroll, Lenis for feel.

Samira Okonkwo

Design engineering

Bridges design tokens, shadcn UI, and accessibility reviews before deploy.

UI и motion

shadcn-style компоненты (Base UI) с Framer Motion tab transitions.

Motion-примитивы

FadeIn, StaggerChildren и ScrollReveal в src/components/motion/. Компонуйте с shadcn UI.

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

Бесплатный 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

Web Motion Starter

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

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

Начать

Компоненты

60 fps

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

Доступность

режим reduced motion

Figma

MCP motion context

Нам доверяют команды с отполированным UI

Acme StudioNorthlinePixel & CoForma LabsStudio KArc TypeMono WorksField DesignAcme StudioNorthlinePixel & CoForma LabsStudio KArc TypeMono WorksField Design

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

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

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.

Собранокак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.

Сделанодляпроизводительности

Motion-пресетов

0ms

Медианная задержка скролла

Lighthouse: доступность

Строк экономии vs чистый GSAP

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

Секция закрепляется при скролле; прогресс и шаги синхронизируются с 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.

Дорожнаякарта

Вертикальные вехи с линией связи. Каждый пункт появляется при скролле.

Q1 2026

Starter и motion-примитивы

Framer + GSAP + Lenis, каталог секций, site-builder skill.

Q2 2026

Синхронизация Figma-токенов

Variable defs → brand-palette.css и motion CSS tokens.

Q3 2026

Эталонные сайты

Шаблоны SaaS, agency и minimal typography для агента.

Q4 2026

Визуальная регрессия

Playwright-снимки 375 / 768 / 1440 перед деплоем.

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

Паттерны, которые можно перенести в клиентские проекты без переписывания 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

Людизапроектом

Замените имена и био на свою команду — аватары с инициалами, пока не подключите next/image.

Alex Morgan

Creative direction

Leads visual language, Figma systems, and motion specs for client launches.

Chris Park

Full stack

Convex, Stripe, and form flows when the landing needs more than static pages.

Jordan Lee

Frontend & motion

Ships Next.js landings — Framer for UI, GSAP for scroll, Lenis for feel.

Samira Okonkwo

Design engineering

Bridges design tokens, shadcn UI, and accessibility reviews before deploy.

UI и motion

shadcn-style компоненты (Base UI) с Framer Motion tab transitions.

Motion-примитивы

FadeIn, StaggerChildren и ScrollReveal в src/components/motion/. Компонуйте с shadcn UI.

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

Бесплатный 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—готовкпродакшену

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

Framer Motion

GSAP ScrollTrigger

Lenis + Base UI

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

Figma pipeline

Готов к production

Собранокакcomposablegrid

Motion-система

Merge из Figma

shadcn UI

Lenis scroll

Тёмная тема

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

Сделанодляпроизводительности

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

Дизайн в Figma

Экспорт motion context

Merge в React

Запуск

Дорожнаякарта

Starter и motion-примитивы

Синхронизация Figma-токенов

Эталонные сайты

Визуальная регрессия

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

Елена В.

Маркус Т.

София Р.

Елена В.

Маркус Т.

София Р.

Людизапроектом

Alex Morgan

Chris Park

Jordan Lee

Samira Okonkwo

UI и motion

Motion-примитивы

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

Старт

Про

Команда

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

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

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

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

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

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

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

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

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

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

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

Framer Motion

GSAP ScrollTrigger

Lenis + Base UI

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

Figma pipeline

Готов к production

Собранокакcomposablegrid

Motion-система

Merge из Figma

shadcn UI

Lenis scroll

Тёмная тема

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

Сделанодляпроизводительности

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

Дизайн в Figma

Экспорт motion context

Merge в React

Запуск

Дорожнаякарта

Starter и motion-примитивы

Синхронизация Figma-токенов

Эталонные сайты

Визуальная регрессия

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