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.
A mockup of an Android device.
Example showing a mockup of an Android device.
Second example showing a mockup of an Android device.
Third example showing a mockup of an Android device.
An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.
Example showing a bidirectional animated beam effect.
Example showing an animated beam of light effect.
Example showing animated beams with multiple input points.
Example showing animated beams with multiple output points.
Example showing a unidirectional animated beam effect.
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
Example showing an animated circular progress gauge.
An animated gradient background which transitions between colors for text.
Example showing text with animated gradient backgrounds.
Second example showing text with animated gradient backgrounds.
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Example showing an animated grid pattern background.
A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
Example showing a list with sequenced item animations.
A light glare effect which pans across text making it appear as if it is shimmering.
Example showing text with a shimmering light effect.
Example showing animation while changing the theme.
Theme transition with a diamond-shaped clip reveal.
Theme transition with a hexagon clip reveal.
Controlled usage with next-themes so useTheme() subscribers stay in sync on toggle.
Theme transition with a rectangle clip reveal.
Theme transition with a square clip reveal.
Theme transition with a star-shaped clip reveal.
Theme transition with a triangle clip reveal.
A beautiful aurora text effect
Example showing a beautiful aurora text effect.
Overlapping circles of avatars.
Example showing overlapping avatar circles.
A backlight glow effect for videos, images, and SVGs.
An example of the backlight component with a image.
An example of the backlight component with SVGs.
An example of the backlight component with a video.
Example showing a bento grid layout for showcasing features.
Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
Example showing a vertical bento grid layout.
Blur fade in and out animation. Used to smoothly fade in and out content.
Example showing blur fade in and out animations.
Example showing blur fade animations with text.
An animated beam of light which travels along the border of its container.
Example showing an animated border beam effect.
Example showing an animated border beam effect.
Example showing an animated border beam effect.
Example showing an animated border beam effect.