Загрузка…
Northline · 2026
A demo case study composed from Site Factory sections — replace with a real client story.
60fps
transform-only animations
a11y
prefers-reduced-motion
Figma
motion context MCP
Секция закрепляется при скролле; прогресс и шаги синхронизируются с Lenis + GSAP.
Шаг 1
Вёрстка, типографика и motion на одном artboard.
Шаг 2
Keyframes, easing и сниппеты через Figma MCP.
Шаг 3
Сопоставьте data-node-id, оберните в motion.* или GSAP timelines.
Шаг 4
Lenis, fallback при reduced motion, финальная полировка shadcn UI.
Вертикальные вехи с линией связи. Каждый пункт появляется при скролле.
Framer + GSAP + Lenis, каталог секций, site-builder skill.
Variable defs → brand-palette.css и motion CSS tokens.
Шаблоны SaaS, agency и minimal typography для агента.
Playwright-снимки 375 / 768 / 1440 перед деплоем.
Паттерны, которые можно перенести в клиентские проекты без переписывания motion с нуля.
“Мы заменили три библиотеки анимаций этим стеком. История по скроллу наконец стала цельной.”
Руководитель дизайна, Northline
“Motion context из Figma попал в React с тем же easing — keyframes больше не угадываем в DevTools.”
Фронтенд-разработчик, Forma Labs
“Синхрон Lenis и ScrollTrigger — недостающий кусок. Pin-секции работают с первого раза.”
Креативный разработчик, Pixel & Co
Готовы к вашему Figma-файлу
Вставьте URL дизайна в чат — motion, layout и компоненты попадут в этот стек с тем же easing и timing.