Loading…
Stories that scroll like film
We craft agency sites with pinned narratives, team grids, and motion that turns browsers into briefs — built on the Site Factory stack.
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.
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.
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.
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.
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.
Full stack
Convex, Stripe, and form flows when the landing needs more than static pages.
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.