Framer Motion
Declarative UI motion — stagger, layout, gestures, page transitions.
Flowbase
ShipPLGlandingswithoutrebuildingmotion
Pricing, social proof, and scroll polish — preset-driven from the Site Factory stack so your team ships in days, not sprints.
60fps
transform-only animations
a11y
prefers-reduced-motion
Figma
motion context MCP
Trusted by teams shipping polished UI
Acme StudioNorthlinePixel & CoForma LabsStudio KArc TypeMono WorksField DesignAcme StudioNorthlinePixel & CoForma LabsStudio KArc TypeMono WorksField Design
Everythingforcomplexinterfaces
Compose primitives instead of one-off animations in every file.
GSAP ScrollTrigger
Pinned storytelling, scrub timelines, scroll-linked parallax.
Lenis + Base UI
Smooth scroll synced with GSAP; accessible dialogs, sheets, tabs.
Design tokens
Shared motion durations and easings in CSS + TypeScript.
Figma pipeline
get_design_context + get_motion_context merged by node id.
Production ready
Strict TypeScript, eslint, static export friendly sections.
Builtasacomposablegrid
Bento layouts highlight one primary story block without breaking the motion stack underneath.
Motion system
Shared Framer variants and GSAP scroll primitives — one vocabulary across pages.
Figma merge
Design context + motion context by node id.
shadcn UI
Dialogs, sheets, tabs with accessible defaults.
Lenis scroll
Smooth wheel synced with ScrollTrigger pin sections.
Dark mode
Class-based theme with brand OKLCH tokens.
Ship faster
Scaffold from web-motion-starter, customize sections, run visual QA.
Tip: duplicate this section and swap cells content — grid spans stay in className.
Builtforperformance
0+
Motion presets
0ms
Median scroll latency
0%
Lighthouse accessibility
0k
Lines saved vs raw GSAP
Simplepricing
Free starter to fork. Paid tiers use Stripe Checkout when env is configured.
Starter Free Motion primitives and demo sections to fork. | Pro $29/mo Figma MCP workflow and shadcn UI blocks. | Team $99/mo Multi-page sites with ChatPRD alignment. | |
|---|---|---|---|
| Framer + GSAP setup | Included | Not included | Not included |
| Lenis scroll | Included | Not included | Not included |
| 6 section templates | Included | Not included | Not included |
| Motion context import | Not included | Included | Not included |
| Dialog, sheet, tabs | Not included | Included | Not included |
| Scroll pin storytelling | Not included | Included | Not included |
| Priority patterns | Not included | Included | Not included |
| PRD → implementation | Not included | Not included | Included |
| Custom design tokens | Not included | Not included | Included |
| Team rules | Not included | Not included | Included |
Whatteamssay
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.”
Elena V.
Design lead, Northline
“Figma motion context landed in React with matching easing — no more guessing keyframes in DevTools.”
Marcus T.
Frontend, Forma Labs
“Lenis + ScrollTrigger sync was the missing piece. Pin sections work on the first try.”
Sofia R.
Creative dev, Pixel & Co
Frequentlyaskedquestions
Framer Motion for UI and React layout; GSAP ScrollTrigger for scroll timelines and pin sections; Lenis for smooth scroll. The starter wires them together.
Ready for your Figma file
Paste a design URL in chat — motion, layout, and components land in this stack with matching easing and timing.