Motion system
Shared Framer variants and GSAP scroll primitives — one vocabulary across pages.
Aurora Labs
We design and ship scroll-driven sites, launch films, and conversion paths for teams who care how things feel — not just how they look.
60fps
transform-only animations
a11y
prefers-reduced-motion
Figma
motion context MCP
Bento layouts highlight one primary story block without breaking the motion stack underneath.
Shared Framer variants and GSAP scroll primitives — one vocabulary across pages.
Design context + motion context by node id.
Dialogs, sheets, tabs with accessible defaults.
Smooth wheel synced with ScrollTrigger pin sections.
Class-based theme with brand OKLCH tokens.
Scaffold from web-motion-starter, customize sections, run visual QA.
Tip: duplicate this section and swap cells content — grid spans stay in className.
Section pins while you scroll; progress and steps scrub with Lenis + GSAP.
Step 1
Layout, typography, and motion on the same artboard.
Step 2
Keyframes, easing, and snippets via Figma MCP.
Step 3
Match data-node-id, wrap with motion.* or GSAP timelines.
Step 4
Lenis scroll, reduced-motion fallbacks, shadcn UI polish.
Compose primitives instead of one-off animations in every file.
Declarative UI motion — stagger, layout, gestures, page transitions.
Pinned storytelling, scrub timelines, scroll-linked parallax.
Smooth scroll synced with GSAP; accessible dialogs, sheets, tabs.
Shared motion durations and easings in CSS + TypeScript.
get_design_context + get_motion_context merged by node id.
Strict TypeScript, eslint, static export friendly sections.
Patterns you can copy into client projects without rewriting motion from scratch.
“We replaced three animation libraries with this stack. Scroll storytelling finally feels cohesive.”
Design lead, Northline
“Figma motion context landed in React with matching easing — no more guessing keyframes in DevTools.”
Frontend, Forma Labs
“Lenis + ScrollTrigger sync was the missing piece. Pin sections work on the first try.”
Creative dev, Pixel & Co
Free starter to fork. Paid tiers use Stripe Checkout when env is configured.
Motion primitives and demo sections to fork.
Free
Figma MCP workflow and shadcn UI blocks.
$29/mo
Multi-page sites with ChatPRD alignment.
$99/mo
Ready for your Figma file
Paste a design URL in chat — motion, layout, and components land in this stack with matching easing and timing.