UI Library for Design Engineers. 150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion. Perfect companion for shadcn/ui.
Example showing a dashed grid pattern.
Example showing a background grid pattern made with SVGs.
Example showing a grid pattern with linear gradient effects.
A hero video dialog component.
Example showing a hero video dialog component.
Example showing a hero video dialog with top-in bottom-out animation.
A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
Example showing a dashed hexagon pattern.
Example showing a background hexagon pattern made with SVGs.
Example showing a hexagon pattern with linear gradient effects.
Example showing a hexagon pattern with extra spacing between cells.
A text highlighter that mimics the effect of a human-drawn marker stroke.
Example showing the demo of a Highlighter
A text animation that scrambles letters before revealing the final text.
Example showing text with scrambling letter animations.
An interactive 3D tag cloud component
Example showing an interactive 3D icon cloud.
Second example showing an interactive 3D icon cloud.
Third example showing an interactive 3D icon cloud.
(No description)
A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Example showing an interactive grid pattern background.
Second example showing an interactive grid pattern background.
(No description)
Example showing an interactive button with hover effects.
A mockup of the iPhone
Example showing an iPhone mockup.
Second example showing an iPhone mockup.
Third example showing an iPhone mockup.
A text component that animates font weight of characters on hover.
An example of the kinetic text component.
A interactive component that enables zooming into images, videos and other elements.
Example showing a lens effect component
Second example showing a lens effect component
Third example showing a lens effect component
A component with animated light rays which shine down from above.
Demo of the light-rays component showcasing animated light rays
A text component with a moving line shadow.
Example showing a text component with a moving line shadow.
A spotlight effect that follows your mouse cursor and highlights borders on hover.
Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.
Example showing a magic card with an orb effect.
An infinite scrolling component that can be used to display text, images, or videos.
Example showing a 3D infinite scrolling component.
Example showing an infinite scrolling component.
Example showing an infinite scrolling logo carousel.
Example showing a vertical infinite scrolling component.
A meteor shower effect.