Loading…
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
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.
Vertical milestones with a connecting rail. Each item reveals on scroll.
Framer + GSAP + Lenis providers, section catalog, site-builder skill.
Variable defs flow into brand-palette.css and motion CSS tokens.
SaaS, agency, and minimal typography templates for agent copy-paste.
Playwright snapshots at 375 / 768 / 1440 before deploy.
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
Ready for your Figma file
Paste a design URL in chat — motion, layout, and components land in this stack with matching easing and timing.