Cinekit

WebGL that serves the story

Narrative hero scenes (shader-grain / scroll-camera), timeline scrub, optional SoundCue — mobile falls back to static.

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.

Framer Motion

Declarative UI motion — stagger, layout, gestures, page transitions.

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.

Scroll-driven storytelling

Section pins while you scroll; progress and steps scrub with Lenis + GSAP.

Step 1

Design in Figma

Layout, typography, and motion on the same artboard.

Step 2 · ×1.35

Export motion context

Keyframes, easing, and snippets via Figma MCP.

Step 3 · ×1.35

Merge into React

Match data-node-id, wrap with motion.* or GSAP timelines.

Step 4

Ship

Lenis scroll, reduced-motion fallbacks, shadcn UI polish.

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

“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

Simplepricing

Free starter to fork. Paid tiers use Stripe Checkout when env is configured.

Simple pricing
	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

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.

Stayintheloop

Motion patterns and Figma → code tips. Stored in Convex — updates live.

Email us

Ready for your Figma file

Paste a design URL in chat — motion, layout, and components land in this stack with matching easing and timing.

Open in Cursor Figma MCP docs

Everythingforcomplexinterfaces

Compose primitives instead of one-off animations in every file.

Framer Motion

Declarative UI motion — stagger, layout, gestures, page transitions.

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.

Scroll-driven storytelling

Section pins while you scroll; progress and steps scrub with Lenis + GSAP.

Step 1

Design in Figma

Layout, typography, and motion on the same artboard.

Step 2 · ×1.35

Export motion context

Keyframes, easing, and snippets via Figma MCP.

Step 3 · ×1.35

Merge into React

Match data-node-id, wrap with motion.* or GSAP timelines.

Step 4

Ship

Lenis scroll, reduced-motion fallbacks, shadcn UI polish.

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

“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

Simplepricing

Free starter to fork. Paid tiers use Stripe Checkout when env is configured.

Simple pricing
	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

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.

Cinekit

Everythingforcomplexinterfaces

Framer Motion

GSAP ScrollTrigger

Lenis + Base UI

Design tokens

Figma pipeline

Production ready

Scroll-driven storytelling

Design in Figma

Export motion context

Merge into React

Ship

Whatteamssay

Elena V.

Marcus T.

Sofia R.

Elena V.

Marcus T.

Sofia R.

Simplepricing

Frequentlyaskedquestions

Which animation library should I use?

How does Figma motion import work?

How do I enable Stripe checkout?

What about accessibility?

Does the newsletter form save data?

Where do subscriptions go after checkout?

Can I deploy to Vercel?

Stayintheloop

Cinekit

Everythingforcomplexinterfaces

Framer Motion

GSAP ScrollTrigger

Lenis + Base UI

Design tokens

Figma pipeline

Production ready

Scroll-driven storytelling

Design in Figma

Export motion context

Merge into React

Ship

Whatteamssay

Elena V.

Marcus T.

Sofia R.

Elena V.

Marcus T.

Sofia R.

Simplepricing

Frequentlyaskedquestions

Which animation library should I use?

How does Figma motion import work?

How do I enable Stripe checkout?

What about accessibility?

Does the newsletter form save data?

Where do subscriptions go after checkout?

Can I deploy to Vercel?

Stayintheloop