DriftKit
Motion-first React components. Spring physics by default.
A growing library of 52+ copy-paste React components built on Framer Motion and Tailwind. Every interaction is powered by spring physics — no easing curves, no keyframes, just natural motion. Built to teach, shipped to use.
A library of small UI pieces — buttons, forms, lists, cards — that move with physics instead of stiff, canned animations. Designers drop them into their products to make interfaces feel alive without hiring a motion specialist.
Each card below is the actual working component — not a screenshot. Move your cursor around. Hit the </> button on any card to see the code.
Interactive cards respond to your cursor. The rest loop on their own.
A fake product using five of these components at once
This isn't a mockup — every piece below is live. It's what a real landing page looks like when you drop DriftKit in.
Ship interfaces that feel alive without hiring a motion specialist. Copy-paste components, tune to taste, move on with your day.
- No install. Copy, paste, ship.
- Zero config — just React and Framer Motion.
- Accessibility baked in. Reduced-motion respected.
- Tokens and named presets instead of raw numbers.
The problem
Most component libraries ship with CSS transitions and easing curves. Motion feels tacked on. Students and junior designers copy animations without understanding why they feel cheap — flat durations, wrong curves, no sense of physics.
The approach
Build a library where motion is the foundation, not the garnish. Every component starts from springs — mass, stiffness, damping. Include a playground that shows the curve while you tune. Show the code next to the component. Copy-paste, no install.
What I designed and built
52+ components across two tiers — Showpieces (cursor-driven, physics-forward) and Standard (nav, buttons, inputs, tabs, accordion, dialog, and more). Live code view for each. Playground with mass/stiffness/damping sliders and a rendered spring curve. Multi-format code export. All hosted on Vercel, all open source.
Behind the build
Every component started as a teaching artifact. Before writing the code I kept sketching what students were tripping on: why a button's ease-out looked cheap, why page transitions felt uneasy, what separates expressive motion from decorative motion. The library is those conversations turned into copy-paste components. The API is a constraint. Every component exposes just two physical controls — stiffness and damping — because "tune a cubic-bezier" is a nightmare and "does it feel good" shouldn't require math. The named recipes ("jelly hover", "iris wipe", "chonk") matter more than the numbers; numbers don't teach, feelings do.
Craft decisions I care about
Every tile in the gallery is the actual component running live, not a static preview — portfolio-as-documentation, documentation-as-portfolio. Spring values are presets with real names ("jelly hover", "iris wipe"), not numbers, because the numbers are meaningless until you feel them. Reduced-motion respected everywhere. Zero dependencies on anything outside React + Framer Motion.