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.
Shine border is an animated background border effect.
Example showing an animated shining border effect.
Second example showing an animated shining border effect.
A shiny button component with dynamic styles in the dark mode or light mode.
Example showing a shiny button with dynamic styles.
A customizable, physics-based smooth cursor animation component with spring animations and rotation effects
Basic smooth cursor example
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
Example showing text with animated sparkle effects.
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
Example showing spinning text animation.
Example showing spinning text animation.
A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
Example showing a background striped pattern with a dashed stroke.
Example showing a background striped pattern made with SVGs.
Example showing a background striped pattern slanting to the right using SVG.
A terminal component
Example showing a terminal with animated text.
Example showing a terminal with animated text and custom delays
A text effect that flips each letter in 3D with a staggered animation on hover.
Example showing a 3D text animation that rotates each letter on hover.
Example showing a 3D text flip with stagger from center.
A text animation component that animates text using a variety of different animations.
Example showing various text animations.
Second example showing various text animations.
Third example showing various text animations.
Fourth example showing various text animations.
Fifth example showing various text animations.
Sixth example showing various text animations.
Seventh example showing various text animations.
Eighth example showing various text animations.
Ninth example showing various text animations.
Fade in text as you scroll down the page.
Example showing text that fades in on scroll.
Theme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered origin.
A card that displays a tweet with the author's name, handle, and profile picture.
Example showing a tweet card with author info.
Example showing a tweet card with images.
Example showing a tweet card with meta preview.
Characters appearing in typed animation
Example showing cursor blinking control.
Example showing different cursor styles (line, block, underscore).
Example showing custom typing and deleting speeds.
Example showing typed character animations.
Example showing multiple words with looping.
Example showing single play without looping.
Example showing animation that starts when in viewport.
Example showing typing animation without cursor.