142 animated components across 6 collections. Copy the source with one CLI command or import the package — every component is typed, SSR-safe, and respects reduced motion.
# copy components (source + CSS module) into your appnpx motionfoundry add eclipse-gradient split-text smooth-scroll # or install the packagepnpm add @motionfoundry/ui motionScroll-driven storytelling
Lenis-style smooth-scroll animations built from scratch: lerped scrolling, parallax, scroll-linked text, horizontal tracks, stacking cards, coverflow, pinned steps, path drawing, and more.
Living backgrounds, tuned for dark UI
Living shader and gradient backgrounds — mesh, aurora, conic, liquid, waves, orbs, grain, spotlight, and deep dark nebula, plasma, silk, ember, and eclipse — with every color, speed, and texture exposed as a prop.
Cards & loaders
The newest pieces: a tilting credit card, expanding accordion cards, and loading states that actually feel alive.
Everyday primitives, with motion built in
Animated UI primitives built from scratch with no Radix or shadcn dependency: buttons, inputs, selects, dialogs, menus, tabs, toasts, tables, charts, and more — accessible and keyboard friendly.
Studio Kit: feedback, delight, clarity, momentum
24 everyday motion patterns, rebuilt on the MotionFoundry conventions: CSS Modules, typed props, keyboard support, and zero Tailwind or icon dependencies.
11 brand DESIGN.md presets
Vercel, Cursor, Claude, Framer, Apple, Airbnb, Expo, ElevenLabs, Runway, Resend and Spotify — browse their tokens, then re-skin any component with one click.
Build what moves people.
Tokens straight from DESIGN.md.
Build what moves people.
Tokens straight from DESIGN.md.
Build what moves people.
Tokens straight from DESIGN.md.
Build what moves people.
Tokens straight from DESIGN.md.
Build what moves people.
Tokens straight from DESIGN.md.
Build what moves people.
Tokens straight from DESIGN.md.
Build what moves people.
Tokens straight from DESIGN.md.
Build what moves people.
Tokens straight from DESIGN.md.
6 collections, one set of conventions
Scroll
Lenis-style smooth-scroll animations built from scratch: lerped scrolling, parallax, scroll-linked text, horizontal tracks, stacking cards, coverflow, pinned steps, path drawing, and more.
Browse collection →Shaders
Living shader and gradient backgrounds — mesh, aurora, conic, liquid, waves, orbs, grain, spotlight, and deep dark nebula, plasma, silk, ember, and eclipse — with every color, speed, and texture exposed as a prop.
Browse collection →UI
Animated UI primitives built from scratch with no Radix or shadcn dependency: buttons, inputs, selects, dialogs, menus, tabs, toasts, tables, charts, and more — accessible and keyboard friendly.
Browse collection →Text FX
GSAP-style text animations built from scratch: split-text staggers, mask wipes, elastic letters, text on a path, rolling hovers, marker highlights, scatter, and cube-flip words.
Browse collection →Studio Kit
Hand-picked everyday motion patterns ported from Swirl Studio Kit: text reveals, feedback buttons, interactive cards, ambient backgrounds, loaders, and list interactions.
Browse collection →Core
The original precision primitives: kinetic type, spatial cards, canvas networks, and developer-interface choreography.
Browse collection →