Introduction

Why DriftKit?

Most UI libraries treat animation as decoration — a CSS transition tacked on at the end. DriftKit treats motion as a core design primitive. Every component is built motion-first, with spring physics baked into the interaction model.

The result: interactions that feel physical instead of scripted. A button that responds to your finger pressure. A card that tilts toward your cursor. A menu that follows your mouse with natural momentum.

Design Principles

• ⚡
  Motion IS the design

  Animation isn't bolted on afterward — it's how the component communicates. A loading button doesn't just show a spinner, it physically transforms through states.

• 🌊
  Springs over bezier curves

  Springs have no fixed duration. They respond to velocity, can be interrupted at any point, and naturally blend into new targets. Learn more →

• ✋
  Interruptible everything

  Hover mid-press? Press mid-hover? It should feel smooth, not jarring. Every DriftKit animation can be interrupted and redirected mid-flight.

• ♿
  Reduced motion respected

  Every component checks useReducedMotion and degrades gracefully. Motion should enhance, never exclude.

• 📋
  Copy, don't install

  Grab the component file, drop it in your project, customize freely. No package lock-in, no version conflicts, full ownership of the code.

What's Included

Who It's For

• → Design engineers who want motion that feels intentional
• → Designers learning to code who want beautiful defaults out of the box
• → React developers who care about interaction quality
• → Anyone tired of CSS ease-in-out on everything