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 client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.
A component which compares two code snippets.
Example showing a component which compares two code snippets.
Comic text animation
Example showing comic text animation.
Confetti animations are best used to delight your users when something special happens
Example showing basic confetti cannon animation.
Example showing confetti with custom shape particles.
Example showing confetti animations for celebrations.
Example showing confetti with emoji particles.
Example showing fireworks-style confetti animation.
Example showing confetti with random directions.
Example showing side-mounted confetti cannons.
Example showing star-shaped confetti animation.
Cool mode effect for buttons, links, and other DOMs
Example showing customized cool mode effects.
Example showing cool mode effect for buttons and links.
A horizontal color band sweeps across text, revealing a gradient shine before settling on the base color.
Example showing a sweeping color band reveal on headline text.
Custom gradient colors and settled text color on a light background.
Rotating phrases with repeat and repeat delay.
Slower sweep with delay — custom duration and timing.
An implementation of the MacOS dock using react + tailwindcss + motion
Example showing a MacOS-style dock implementation.
Second example showing a MacOS-style dock implementation.
Third example showing a MacOS-style dock implementation.
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Example showing a background dot pattern made with SVGs.
Example showing a dot pattern with linear gradient effects.
Example showing a dot pattern with glow effect
A component with a dotted map.
Example showing a dotted map.
Example showing a dotted map.
Example showing a dotted map with pulse animation.
A component used to showcase the folder and file structure of a directory.
Example showing a component that displays folder and file structure.
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
Example showing a flickering grid background.
Example showing a flickering grid background with rounded corners.
A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color).
Pricing card with diagonal hover glare (duration 600ms).
Three alerts with custom glare colors and opacity.
CTA card with hover glare (700ms).
An autorotating, interactive, and highly performant globe made using WebGL.
Example showing an autorotating, interactive WebGL globe.
An animated grid of subtly shifting glyphs with fade effect and theme support.
Example showing an animated grid of subtly shifting glyphs.
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.