Trusted by innovative teams at
Touch. Hover. Feel.
Experience the tactile response of our UI components. Built with high-fidelity spring physics that mimic real-world inertia.
3D Tilt Physics
Hover over this card and move your cursor. The card tilts dynamically using spring dampers, simulating physical mass and light reflections.
Dynamic Spotlight
A light beam follows your pointer exactly, illuminating the glass borders and casting realistic radial lighting across dark layouts.
Magnetic Pull
Hover over the action button below. The button detects cursor proximity and snaps toward it with elastic easing.
"It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair."
Charles DickensA Tale of Two Cities"To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep."
William ShakespeareHamlet"All that we see or seem is but a dream within a dream."
Edgar Allan PoeA Dream Within a Dream"It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife."
Jane AustenPride and Prejudice"Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world."
Herman MelvilleMoby-Dick
Browse By Category
Each family is engineered separately to keep bundles lightweight, maintaining full layout integration.
Hero Components
Navigation Modules
Scroll Effects
Motion Controls
Kinetic Text
WebGL & 3D
Atmosphere
Page Transitions
Interactive Playground
Twist the physics knobs, change properties, and feel the direct response in real time before importing them.
@/components/creative/...Awwwards Vibe, SaaS Speeds
Award-winning design does not require slow load times. Kinetic UI components are treeshakable, use vanilla animations, and compile down to near-zero CSS footprint.
Zero-Weight Animation
Kinetic UI encapsulates complex math without bulky external assets. Standard components compile to an average of just 1.2KB.
Flawless themes,
out of the box.
Every single Kinetic UI component is strictly built using Tailwind CSS variables. Meaning they adapt instantly to your app's theme without any extra configuration or flashy flashes of unstyled content.
- Native next-themes support
- Zero extra CSS classes required
Dark Theme
Auto-switching
Designed for Creators,
Built for Developers
Integrating premium motions into your Next.js project is as simple as copying code. No complex physics formulas required.
import { MagneticButton } from '@/components/creative/magnetic-button';
import { Sparkles } from 'lucide-react';
export default function Home() {
return (
<div className="flex items-center justify-center min-h-[300px]">
<MagneticButton className="h-16 px-8 rounded-full bg-white text-black font-bold">
<Sparkles className="w-5 h-5 mr-2" />
Explore Component
</MagneticButton>
</div>
);
}Loved By Designers & Engineers
Here is what builders from Stripe, Linear, and Framer agency studios say about Kinetic UI.
“Kinetic UI helped us deliver an Awwwards-winning site in half the time. The spring damping is so polished.”
Sarah Connor
Creative Director · Linear Systems“The custom GLSL shaders and R3F canvas integrations compile to almost nothing. Our page speed stayed at 99.”
Alex Rivera
Lead Interactive Developer · VibeData“A complete cheat code for startups. We copy-paste premium components directly and customize them in Tailwind.”
Emily Chen
Co-Founder · Framer Agency“Kinetic UI helped us deliver an Awwwards-winning site in half the time. The spring damping is so polished.”
Sarah Connor
Creative Director · Linear Systems“The custom GLSL shaders and R3F canvas integrations compile to almost nothing. Our page speed stayed at 99.”
Alex Rivera
Lead Interactive Developer · VibeData“A complete cheat code for startups. We copy-paste premium components directly and customize them in Tailwind.”
Emily Chen
Co-Founder · Framer Agency“Kinetic UI helped us deliver an Awwwards-winning site in half the time. The spring damping is so polished.”
Sarah Connor
Creative Director · Linear Systems“The custom GLSL shaders and R3F canvas integrations compile to almost nothing. Our page speed stayed at 99.”
Alex Rivera
Lead Interactive Developer · VibeData“A complete cheat code for startups. We copy-paste premium components directly and customize them in Tailwind.”
Emily Chen
Co-Founder · Framer Agency“The attention to micro-interactions is phenomenal. The magnetic CTAs feel organic, not robotic.”
David K.
Design Engineer · Stripe Studio“The scroll storytelling layout alone saved me weeks of coding. The documentation is incredibly clear.”
Jessica Vance
Creative Technologist · Independent“Perfect Lighthouse scores out of the box. Highly recommend the Pro template starters.”
Michael Torres
Senior Developer · Nebula SaaS“The attention to micro-interactions is phenomenal. The magnetic CTAs feel organic, not robotic.”
David K.
Design Engineer · Stripe Studio“The scroll storytelling layout alone saved me weeks of coding. The documentation is incredibly clear.”
Jessica Vance
Creative Technologist · Independent“Perfect Lighthouse scores out of the box. Highly recommend the Pro template starters.”
Michael Torres
Senior Developer · Nebula SaaS“The attention to micro-interactions is phenomenal. The magnetic CTAs feel organic, not robotic.”
David K.
Design Engineer · Stripe Studio“The scroll storytelling layout alone saved me weeks of coding. The documentation is incredibly clear.”
Jessica Vance
Creative Technologist · Independent“Perfect Lighthouse scores out of the box. Highly recommend the Pro template starters.”
Michael Torres
Senior Developer · Nebula SaaSFrequently Asked Questions
Everything you need to know about the product and billing. Can't find the answer you're looking for? Please chat to our friendly team.
Flexible Pricing for Everyone
All components are open-source. Upgrade to access premium templates, custom WebGL/3D canvases, and custom shader packs.
Perfect for learning and personal hobby websites.
- Access to 25+ core motion components
- Vanilla CSS & Tailwind integration
- Framer Motion spring setups
- Community discord support
- Lifetime updates
The ultimate toolbox for creative developers and agency freelancers.
- ALL premium motion components
- Custom GLSL shaders & 3D canvases
- All 5 pre-built templates (worth $150)
- Unlimited commercial websites
- Priority email assistance