Loading…
Web Motion Starter
Next.js, Framer Motion, GSAP ScrollTrigger, Lenis, and shadcn-style UI — wired for Figma motion import.
60fps
transform-only animations
a11y
prefers-reduced-motion
Figma
motion context MCP
Trusted by teams shipping polished UI
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.
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.
0+
Motion presets
0ms
Median scroll latency
0%
Lighthouse accessibility
0k
Lines saved vs raw GSAP
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
Replace names and bios with your team — avatars use initials until photos are wired via next/image.
Creative direction
Leads visual language, Figma systems, and motion specs for client launches.
Full stack
Convex, Stripe, and form flows when the landing needs more than static pages.
Frontend & motion
Ships Next.js landings — Framer for UI, GSAP for scroll, Lenis for feel.
Design engineering
Bridges design tokens, shadcn UI, and accessibility reviews before deploy.
shadcn-style components (Base UI) with Framer Motion tab transitions.
FadeIn, StaggerChildren, and ScrollReveal live in src/components/motion/. Compose them with shadcn UI for polished sections.
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
Motion patterns and Figma → code tips. Stored in Convex — updates live.
Ready for your Figma file
Paste a design URL in chat — motion, layout, and components land in this stack with matching easing and timing.