UI Component Library

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

Music Toggle

Music player toggle with vinyl-inspired animations

Apple Squircle

Apple squircle SVG filter effect applicable to any element

Loop Animation Hook

Custom hook for creating looping animations with configurable timing

📱BP

Breakpoint Indicator

Development tool showing current Tailwind CSS breakpoint

✂️Clip Path

SVG Clip Path Mask

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

Scroll with Fade

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

Scroll Progress 001

Draggable circular scroll progress indicator with NumberFlow

🎭Icons

Animated Icons 002

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

icons

💬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

🏝️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

👥Hover

Hover Members

Team member showcase with creative hover text effects

Devouring Details Sign In

Text input with vanishing particle animation effect

Vercel Tooltip

Sleek tooltip with Vercel-inspired design and animations

Aave Token Swap

Token swap interface with smooth value transitions

🖱️Cursor

Image Cursor Trail

Images that follow the cursor with trailing effect

🖼️Reveal

Image Reveal

Smooth image reveal animation on hover or scroll

Nike Preloader

Brand preloader with Nike-inspired video background transitions

Words Preloader

Typography-based preloader with word animations

Stairs Preloader

Stairs-based preloader animation

Double Stairs Preloader

Double stairs preloader animation

Vercel Liquid Simulation

Liquid simulation effect inspired by Vercel

📜Rolling

Rolling Text

Rolling text animation effect

Interactive 3D Hero

3D interactive hero section with mouse-driven perspective

Animated Icons 001

Collection of animated icons (first set)

icons

Parallax Image

Parallax image effect with depth perception

Animated Number Input

Animated number input component with smooth transitions

📝Reveal

Text Reveal Box

Text reveal animation box

Scroll Progress 002

Scroll progress indicator (variant 2)

🪗Accordion

Bouncy Accordion

Bouncy accordion component with spring animations

Scroll Reveal Grid Cards

Cards that reveal on scroll with grid layout

📏Auto Scale

Auto Scale Input

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

📚Stack

Card Stack Scroll

Stacked cards that reveal on scroll with stacking effect

Card Stack with GSAP

Card stack with GSAP-powered rotate and scroll animations

Nike Menu

Nike-inspired navigation menu with bold animations

ASCII Simulation

ASCII art simulation and rendering effect

Box Loading Preloader

3D box loading animation preloader

SVG Follow Scroll

SVG paths that follow and animate with page scroll

Uniswap Country Dialog

Country selection dialog with Uniswap-inspired design

Family Wallet

Wallet interface with family-friendly crypto design

Minimal Card Expand

Minimal card that expands on interaction

TikTok Color List

Colorful list interaction inspired by TikTok

3D Perspective Text

3D perspective text effect with depth

Siena Parallax

Siena-inspired parallax scrolling effect

Oliver Parallax

Oliver-inspired parallax scrolling effect

Text Scroll Animation

Text that animates and transforms as you scroll

Scroll Images Reveal 001

Images revealed through scroll-triggered animations

Scroll Images Reveal 002

Images revealed through scroll-triggered animations (variant 2)

Scroll Images Reveal 003

Images revealed through scroll-triggered animations (variant 3)

Hover Expand

Element that expands smoothly on hover

Apple Navbar V001

Apple-style navigation bar with glass morphism

Canvas Crowd

Canvas-based crowd simulation and rendering

Vercel Scroll with Blur

Scroll-triggered blur effects inspired by Vercel

Family Receive Button

Animated receive/payment button with satisfying feedback

Next.js Gooey Menu

Gooey morphing navigation menu

Perspective Carousel

3D perspective carousel with depth rotation

Card Swipe Carousel

Tinder-style card swipe carousel

Inverted Perspective Carousel

Inverted 3D perspective carousel

Creative Carousel 001

Creative carousel with unique transition effects

Creative Carousel 002

Creative carousel with unique transition effects (variant 2)

↔️Expand

Expand on Hover

Horizontal expansion effect on hover

Expand on Hover Vertical

Vertical expansion effect on hover

ClipPath Carousel

Carousel with CSS clip-path transitions

Vercel Navigation Bar

Vercel-style navigation bar with subtle animations

Text Roll Navigation

Navigation with rolling text hover effects

Drawing Cursor Effect

Cursor that draws or leaves trails on screen

Side Scroll Navigation

Horizontal scrolling navigation with snap points

Mouse Follow Animations

Elements that follow mouse movement with physics

Video Player 001

Custom video player with modern controls

Horizontal Text Reveal

Text that reveals horizontally on scroll

Infinite Canvas

Infinite panning canvas for content exploration

Timeline Calendar

Calendar displayed as an interactive timeline

Apple Navbar V002

Apple-style navigation bar (variant 2)

Apple Feature Block

Apple-style feature showcase block with imagery

Apple Carousel

Apple-style product carousel

Dia Browser Carousel

Browser window-style carousel for showcasing websites

Team Showcase Scroll

Team members revealed through scroll animation

Projects Showcase

Project cards with interactive hover and reveal effects

AI Input 001

AI-themed input component with smart suggestions

AI Input 002

AI-themed input component (variant 2)

AI Input 003

AI-themed input component (variant 3)

AI Input 004

AI-themed input component (variant 4)

AI Input 005

AI-themed input component (variant 5)

✨AI Gradient

Apple AI Gradient

Apple Intelligence-style animated gradient

3D Rolling Text on Scroll

3D text that rolls and transforms on scroll

🌈Gradient

Gradient Hover Cards

Cards with animated gradient borders on hover

Video Player 002

Custom video player (variant 2)

Vercel Command Search

Command palette search with Vercel-inspired design

Scroll Progress 003

Scroll progress indicator (variant 3)

Expandable Tabs Navigation

Navigation tabs that expand with content on selection

Video Player 003

Custom video player (variant 3)

Vertical Tooltip Menu

Vertical navigation with tooltip reveal on hover

Draggable Snap Button

Button that can be dragged and snaps into place

⌨️Input

Smooth Caret Input

Input field with smooth animated caret/cursor

Knockout Bracket

Tournament knockout bracket component

Pixel Preloader

Pixel-art style preloader animation

Skiper Number Flow

Advanced number flow with formatting and smooth digit transitions

Anime.js Scrollbar

Scroll progress bar with floating cards and smooth animations