UI Component Library

Aurora Background

Drifting aurora gradients that wash behind your content

🔦Spotlight

Spotlight Card

Radial spotlight that follows the cursor across a card

☄️Meteors

Meteors Background

Streaking meteors raining diagonally behind content

⚪Dots

Dot Pulse Background

Dot grid lit by a traveling pulse of color

🔆Beams

Beam Background

Curved beams with lights travelling along their paths

◎Ripple

Ripple Background

Concentric rings radiating outward from center

Depth

⬛Extrude

Extrude Button

Physical CSS 3D block button whose top face drops into the extrusion on press

📡Signal

Recessed Field

Input carved into a well that lifts and brightens on focus

🪐Orbit

Orbit Dial

Hub with actions orbiting a 3D ring; the selected satellite comes forward

◇Prism

Prism Loader

Triangular prism spinning in 3D with primary, accent, and secondary faces

🎭Stage

Parallax Stage

Three-layer diorama that tilts on pointer move with spring rotation

🧊Iso

Isometric Tile

Isometric cubes that lift on hover — Atlas, Beacon, Harbor

↺Flip

Flip Toggle

3D card that flips from STANDBY to LIVE on the Y axis

📑Stack

Z Layer Stack

Translucent cards stacked in Z that fan open on hover

▬Solid

Solid Slider

Chunky 3D track with an extruded block handle, 0–100

📄Fold

Fold Panel

Panel that unfolds from a top hinge with a two-line brief inside

🏅Badge

Tilt Badge

Thick 3D medal with a side rim that follows the pointer

🧬Helix

Helix Text

Letters arranged on a 3D helix that orbits and pauses on hover

Interactions

🔢1,234,567

Animated Number

Number counter with smooth counting animations

🔍Blur

Progressive Blur

Progressive blur effect with smooth gradient transitions

🫧Gooey

Gooey Effect

Gooey liquid effect with single-line CSS filter application

🔗Links

CSS Link Effects

Collection of 6 CSS-only animated link hover effects

🌓Toggle

Theme Toggle

5 theme toggle button variants with smooth animations

▶️Play

Apple Play Button

Elegant play button with Apple-inspired design and smooth hover animations

🎵Vinyl

Music Toggle

Music player toggle with vinyl-inspired animations

⬜Squircle

Apple Squircle

Apple squircle SVG filter effect applicable to any element

🏝️Dynamic Island

Dynamic Island

Apple Dynamic Island with 7+ custom states and fluid transitions

🎯Drag

Things Drag & Scroll

Infinite grid with drag and scroll interactions

🖱️Cursor

Image Cursor Trail

Images that follow the cursor with trailing effect

💧Liquid

Vercel Liquid Simulation

Liquid simulation effect inspired by Vercel

🎨List

TikTok Color List

Colorful list interaction inspired by TikTok

🖼️Photos

Hover Expand

Element that expands smoothly on hover

💸Receive

Family Receive Button

Animated receive/payment button with satisfying feedback

↔️Expand

Expand on Hover

Horizontal expansion effect on hover

↕️Expand

Expand on Hover Vertical

Vertical expansion effect on hover

✏️Draw

Drawing Cursor Effect

Cursor that draws or leaves trails on screen

💫Follow

Mouse Follow Animations

Elements that follow mouse movement with physics

✨AI Gradient

Apple AI Gradient

Apple Intelligence-style animated gradient

🧲Snap

Draggable Snap Button

Button that can be dragged and snaps into place

🔢Flow

Skiper Number Flow

Advanced number flow with formatting and smooth digit transitions

Text Effects

📜Rolling

Rolling Text

Rolling text animation effect

📝Reveal

Text Reveal Box

Text reveal animation box

🔤3D Text

3D Perspective Text

3D perspective text effect with depth

📖Scroll

Text Scroll Animation

Text that animates and transforms as you scroll

➡️Reveal

Horizontal Text Reveal

Text that reveals horizontally on scroll

🌀Roll 3D

3D Rolling Text on Scroll

3D text that rolls and transforms on scroll

🔐Decrypt

Scramble Text

Characters decode from noise into the target text

⌨️Type|

Typewriter Text

Types and deletes looping phrases with a blinking caret

🌊Wave

Wave Text

Letters bob in a smooth ocean wave sequence

🔎Focus

Blur In Text

Words sharpen from a soft blur with staggered timing

✨Shimmer

Gradient Shimmer Text

Light sweeps across gradient-clipped headline text

Scroll Effects

🌫️Fade

Scroll with Fade

Top/bottom scrollable fade effects using pure CSS (no JS)

○Circle

Scroll Progress 001

Draggable circular scroll progress indicator with NumberFlow

•••Dots

Scroll Progress 002

Scroll progress indicator (variant 2)

🃏Reveal

Scroll Reveal Grid Cards

Cards that reveal on scroll with grid layout

📚Stack

Card Stack Scroll

Stacked cards that reveal on scroll with stacking effect

🗂️Stack

Card Stack with GSAP

Card stack with GSAP-powered rotate and scroll animations

〰️Path

SVG Follow Scroll

SVG paths that follow and animate with page scroll

🏛️Siena

Siena Parallax

Siena-inspired parallax scrolling effect

🏗️Oliver

Oliver Parallax

Oliver-inspired parallax scrolling effect

📷Reveal 1

Scroll Images Reveal 001

Images revealed through scroll-triggered animations

🖼️Reveal 2

Scroll Images Reveal 002

Images revealed through scroll-triggered animations (variant 2)

📰Reveal 3

Scroll Images Reveal 003

Images revealed through scroll-triggered animations (variant 3)

🌀Blur

Vercel Scroll with Blur

Scroll-triggered blur effects inspired by Vercel

👨‍👩‍👧‍👦Team

Team Showcase Scroll

Team members revealed through scroll animation

━Line

Scroll Progress 003

Scroll progress indicator (variant 3)

📊Scroll

Anime.js Scrollbar

Scroll progress bar with floating cards and smooth animations

Carousels

🎠3D

Perspective Carousel

3D perspective carousel with depth rotation

👆Swipe

Card Swipe Carousel

Tinder-style card swipe carousel

🎡Concave

Inverted Perspective Carousel

Inverted 3D perspective carousel

01Creative

Creative Carousel 001

Creative carousel with unique transition effects

🎞️Thumbs

Creative Carousel 002

Creative carousel with unique transition effects (variant 2)

⭕Clip

ClipPath Carousel

Carousel with CSS clip-path transitions

📱Apple

Apple Carousel

Apple-style product carousel

🌐Browser

Dia Browser Carousel

Browser window-style carousel for showcasing websites

🎞️Marquee

3D Marquee

Tilted 3D grid of cards scrolling in opposite directions

Buttons

🧲Magnet

Magnetic Button

Button drawn toward the cursor inside its magnetic field

Buttons

💫Shine

Shimmer Button

Specular shine sweeps across the button surface

Buttons

🛸Beam

Border Beam Button

Orbiting light beam chases itself around the border

Buttons

Preloaders

⏳Nike

Nike Preloader

Brand preloader with Nike-inspired video background transitions

🔤Words

Words Preloader

Typography-based preloader with word animations

📶Stairs

Stairs Preloader

Stairs-based preloader animation

🪜Stairs

Double Stairs Preloader

Double stairs preloader animation

📦Cube

Box Loading Preloader

3D box loading animation preloader

👾Pixels

Pixel Preloader

Pixel-art style preloader animation

Navigation

👟Nike

Nike Menu

Nike-inspired navigation menu with bold animations

🧭Island

Apple Navbar V001

Apple-style navigation bar with glass morphism

⚫Gooey

Next.js Gooey Menu

Gooey morphing navigation menu

▲Vercel

Vercel Navigation Bar

Vercel-style navigation bar with subtle animations

↕️Roll

Text Roll Navigation

Navigation with rolling text hover effects

➡️Chips

Side Scroll Navigation

Horizontal scrolling navigation with snap points

🍎Navbar

Apple Navbar V002

Apple-style navigation bar (variant 2)

📑Tabs

Expandable Tabs Navigation

Navigation tabs that expand with content on selection

📌Rail

Vertical Tooltip Menu

Vertical navigation with tooltip reveal on hover

🧲Dock

Magnify Dock

macOS-style dock whose icons swell near the cursor

Inputs

✨Sign in

Devouring Details Sign In

Text input with vanishing particle animation effect

🔄Swap

Aave Token Swap

Token swap interface with smooth value transitions

➕Stepper

Animated Number Input

Animated number input component with smooth transitions

📏Auto Scale

Auto Scale Input

Auto-scaling input for big numbers (Uniswap/Wise pattern)

🌍Country

Uniswap Country Dialog

Country selection dialog with Uniswap-inspired design

🤖Composer

AI Input 001

AI-themed input component with smart suggestions

✨Pill

AI Input 002

AI-themed input component (variant 2)

💬Expand

AI Input 003

AI-themed input component (variant 3)

🧠Thinking

AI Input 004

AI-themed input component (variant 4)

🎤Voice

AI Input 005

AI-themed input component (variant 5)

⌘Cmd+K

Vercel Command Search

Command palette search with Vercel-inspired design

⌨️Input

Smooth Caret Input

Input field with smooth animated caret/cursor

Cards

👥Hover

Hover Members

Team member showcase with creative hover text effects

🧊Tilt

Interactive 3D Hero

3D interactive hero section with mouse-driven perspective

🪗Accordion

Bouncy Accordion

Bouncy accordion component with spring animations

👛Wallet

Family Wallet

Wallet interface with family-friendly crypto design

🃏Expand

Minimal Card Expand

Minimal card that expands on interaction

📅Week

Timeline Calendar

Calendar displayed as an interactive timeline

✦Feature

Apple Feature Block

Apple-style feature showcase block with imagery

💼Projects

Projects Showcase

Project cards with interactive hover and reveal effects

🌈Gradient

Gradient Hover Cards

Cards with animated gradient borders on hover

🏆Bracket

Knockout Bracket

Tournament knockout bracket component

🪩Holo

Holographic Card

Rainbow sheen shifts as the pointer moves across the surface

Media

✂️Clip Path

SVG Clip Path Mask

Complex SVG clip path mask with custom geometric shapes and image masking

🖼️Reveal

Image Reveal

Smooth image reveal animation on hover or scroll

🏔️Parallax

Parallax Image

Parallax image effect with depth perception

#ASCII

ASCII Simulation

ASCII art simulation and rendering effect

●Crowd

Canvas Crowd

Canvas-based crowd simulation and rendering

▶️Player

Video Player 001

Custom video player with modern controls

🗺️Canvas

Infinite Canvas

Infinite panning canvas for content exploration

🎬Cinema

Video Player 002

Custom video player (variant 2)

⏯️Chapters

Video Player 003

Custom video player (variant 3)

Icons

🎭Icon list

Animated Icons 002

Collection of animated icons (arrow, menu, volume) with transitions

Icons

🔔Icon list

Animated Icons 001

Collection of animated icons (first set)

Icons

🎭Icons

Advanced Animated Icons

Morphing, stateful, burst, trail, and magnetic icon interactions

Icons

Tooling

🔁Loop

Loop Animation Hook

Custom hook for creating looping animations with configurable timing

📱BP

Breakpoint Indicator

Development tool showing current Tailwind CSS breakpoint

💬Tooltip

Custom Tooltip

Custom tooltip built with Radix UI primitives with arrow indicators

🐛Debug

Debug Panel

Simple debug component that prints any object values on screen

⬛Tooltip

Vercel Tooltip

Sleek tooltip with Vercel-inspired design and animations