Spring Physics
Every animation uses physically accurate spring models. No guessing durations and easing curves.
26 animated components
Build interfaces that feel alive
A curated registry of physics-driven, copy-paste UI components. Framer Motion + Tailwind CSS + TypeScript.
Interactive Playground
Pick a color and see it live across components
blue-500
Colorblue-500
Width
Shadow
Click to celebrate
26Components
0Dependencies*
100%TypeScript
A11yAccessible
Why Kinetik
Motion should feel effortless
Stop hand-tuning keyframes. Every Kinetik component uses physically accurate spring models that feel native.
Copy & Paste
Each component is a single file. Copy the code, install dependencies, and ship in minutes.
Composable
Built on Framer Motion, Tailwind CSS, and strict TypeScript. Fits into any React project.
Registry
Component Library
26 production-ready components. Each one is a single file with zero external dependencies beyond Framer Motion.
Dynamic Island
Fluid expansion from pill to notification.
Fluid Tabs
Spring-driven segmented control.
Morphing Dialog
Shared-element card-to-modal.
Magnet Button
Pointer-following CTA.
Infinite Scroll Columns
Dual opposing marquees.
“Kinetik made our app feel alive.”
“This is the closest web gets to native physics.”
“The copy-paste ergonomics are unreal.”
“Our conversion jumped after shipping fluid UI.”
“Kinetik made our app feel alive.”
“This is the closest web gets to native physics.”
“The copy-paste ergonomics are unreal.”
“Our conversion jumped after shipping fluid UI.”
“Kinetik made our app feel alive.”
“This is the closest web gets to native physics.”
“The copy-paste ergonomics are unreal.”
“Our conversion jumped after shipping fluid UI.”
“Kinetik made our app feel alive.”
“This is the closest web gets to native physics.”
“The copy-paste ergonomics are unreal.”
“Our conversion jumped after shipping fluid UI.”
Neumorphic Newsletter
Soft-UI subscription card.
Subscribe to our newsletter to receive news and updates. We promise not to spam you. Max 1 email per month.
Pulse Badge
Status indicators with pulsing rings.
Live
Pending
Offline
Shimmer Text
Gradient text with shimmer sweep.
Premium Quality
Loading experience
Tilt Card
3D card following cursor.
3D Perspective
Move your cursor across the card to see it respond in 3D space.
Toggle Switch
Spring toggle with icon morph.
Light mode
Ripple Button
Click-reactive ripple waves.
Animated Counter
Spring number counters.
0Users
0Stars
0Uptime %
Breathing Glow
Layered blur breathing orbs.
AI
Stagger List
Staggered enter/exit list.
Design system tokens
Spring physics config
Accessibility audit
Flip Card
3D flip with backface reveal.
Elastic Drawer
Spring expandable drawer.
Animated Toast
Stackable spring notifications.
Skeleton Loader
Shimmer loading placeholders.
Hover Card
Spring popover on hover.
Animated Accordion
Collapsible spring sections.
Kinetik is a curated registry of physics-driven, copy-paste UI components built with Framer Motion, Tailwind CSS, and TypeScript.
Command Palette
Spotlight search (⌘K).
Drag Reorder
Sortable drag-and-drop list.
- 1Design tokens
- 2Spring config
- 3Layout system
- 4Accessibility
Drag items to reorder
Animated Progress
Spring-driven progress bars.
Design0%
Development0%
Testing0%
Typewriter Text
Auto-typing rotating phrases.
Phrase 1 of 4
Scroll Reveal
Viewport-triggered animations.
Observe
Detects viewport entry
Animate
Spring-based reveal
Perform
GPU-accelerated
Confetti Button
Particle burst celebration.
Click to celebrate
Community
Built by the community
Kinetik is open source. Contributions, ideas, and feedback are always welcome.
SS
Sumit Sharma
Creator
OS
Open Source
Community
??
You?
Contribute
Ready to ship living UI?
Browse the full registry, copy any component, and have it running in your project in under a minute.