Build stunning UIs with Kinetic UI
Over 100 animated, interactive, and customizable React components, ready to be dropped into your projects.
const AboutPage = () => (
<div>
<h1>About Us</h1>
<p>We are developers.</p>
</div>
});
export default AboutPage;
Zero-cost all-the-cool
Everything you need to add flair to your websites.
Shiny Button
A button with a gradient shine effect on hover.
Build amazing apps.
Typewriter Effect
Animate text as if it's being typed on screen.
Aurora Background
A beautiful, animated aurora background for your sections.
Parallax Scroll
Create a 3D effect as you scroll down the page.
Dock Menu
A macOS-style dock menu with magnification.
React
The Library for Web and Native User Interfaces
Floating Card
A card that floats and tilts based on mouse position.
This is the Home tab.
Animated Tabs
Tabs with a smooth, sliding indicator.
Confetti Cannon
Celebrate user actions with a burst of confetti.
Buildstunning,animateduserinterfaceswiththepowerofFramerMotionandReact.
Text Reveal
Reveal text word-by-word with a granular animation as you scroll.
Bento Grid
A modular, animated grid layout for showcasing features.
Spotlight
Hover over this card to see the effect.
Spotlight Card
A card that reveals a spotlight effect following the mouse.
Animated Bar Chart
A responsive, animated bar chart for visualizing data.
Meteor Effect
Adds animated shooting stars to the background of any element.
Number Ticker
A component that animates a number counting up to a target value.
Animated Gradient Text
Text with a beautiful, animated gradient background.
50
Draggable Slider
An interactive slider that can be dragged to select a value.
Interactive Globe
A stunning, interactive 3D globe with animated arcs.
Jan 2023
Project Kickoff
The project officially started.
Mar 2023
Alpha Release
First version released to a closed group.
Jun 2023
Beta Launch
Public beta available for testing.
Sep 2023
Official Launch
Version 1.0 is live!
Animated Timeline
A vertical timeline that animates as you scroll.
Lamp Effect
Move your mouse to see the light.
Lamp Effect
A container that illuminates its content with a spotlight from above, following the mouse.
Magic Input
An input field with an animated, glowing border and a matrix-style background effect on focus.
Ripple Button
A button that creates a material-style ripple effect on click.
Hover Me
The dots will illuminate.
Grid & Dot Background
A background with a grid of dots that illuminates on mouse hover.
Hover anywhere in this box
Follower Pointer
A container that adds a custom pointer that follows the mouse, with an optional title.
Manu Arora
Founder, Algochurn
Elon Musk
Founder, SpaceX
Jeff Bezos
Founder, Amazon
Card Stack
A stack of cards that can be cycled through with a satisfying animation.