Components

Characters flip in with a smooth 3D rotation on mount and on hover, great for headings and titles.

Smoothly animates between number values with a spring transition.

A rotating text component that cycles through words with a 3D flip and fade transition, perfect for hero taglines.

Matter.js-powered word physics text where words break apart, fall, bounce, and can be dragged with the mouse.

GSAP SplitText-powered reveal animation with per-character, per-word, or per-line staggering and scroll trigger support.

Viewport-triggered blur reveal animation for words or letters with configurable direction and stagger.

Animated shine sweep effect across text with speed, direction, spread, and yoyo controls.

Canvas-powered text distortion effect with hover-reactive intensity, glitch mode, and directional fuzzing.

GSAP ScrollTrigger text reveal with progressive word opacity, optional blur, and subtle rotational unwind.

Mouse-proximity variable font interpolation per character with configurable radius and falloff curves.

Mouse-reactive 3D text with depth shadows that follows cursor movement, creating a dramatic displacement effect.

An animated typing effect that cycles through strings, typing and deleting characters with a blinking cursor.

Wraps text around a rotating circular path with optional hover-to-spin behavior and center label.

Text that morphs between words using a blur crossfade effect, creating smooth character interpolation transitions.

A number counter that animates from one value to another using spring physics, triggered when scrolled into view. Supports prefix, suffix, and decimal formatting.

Keyboard shortcut indicator with monospace font, shadow border styling, and inline usage support.

Animated gradient text with flowing colors that shift across the text using an animated background-position.

A text decode/scramble effect that reveals text character by character with random characters in between.

A scroll-triggered word-by-word text reveal that fades each word up with a stagger as it enters the viewport.

A glitchy text effect with RGB color split, clip-path slicing, and flicker animation for a cyberpunk aesthetic.

A button with a shiny border sweep and text reveal effect, perfect for calls to action.

A horror-inspired button with flickering background, dripping accent line, and staggered glitchy text animation on hover.

A button that flips to reveal social media icons on hover, with a smooth 3D rotation transition.

A switch toggle with spring-animated knob, multiple sizes, ARIA role='switch', keyboard support, and disabled state.

Animated badge with multiple variants (default, success, warning, error, info), three sizes, optional icon, removable with AnimatePresence, and framer-motion entrance animation.

Animated tag input with Enter/comma to add, Backspace to remove, max tags limit, controlled and uncontrolled modes, and framer-motion AnimatePresence transitions.

A floating-label text input with animated border, focus ring, optional left/right icons, error state, and three sizes (sm, md, lg).

A floating-label textarea with animated border, focus ring, character counter, auto-resize support, and error state.

An accessible animated checkbox with spring check-mark animation, error state, label support, and keyboard interaction.

An accessible animated radio group with spring selection animation, horizontal/vertical layout, keyboard navigation, and per-option disable.

A fully-featured date picker with calendar view, keyboard navigation, month/year selectors, and optional range selection mode. Includes animated popover and accessible controls.

A comprehensive color picker with HSL sliders, preset swatches, hex/RGB/HSL format toggling, and copy-to-clipboard functionality. Features animated popover and real-time color preview.

An accessible animated toggle switch with spring thumb animation, size variants, label support, and keyboard interaction.

An accessible animated slider with drag interaction, keyboard navigation, tooltip value display, and spring animations.

An accessible drag-and-drop file upload component with validation, progress animation, file list preview, and keyboard interaction.

An accessible OTP/PIN input component with auto-focus, paste support, keyboard navigation, and animated focus states.

An accessible animated rating component with star icons, half-star support, custom icons, hover states, and spring animations.

Segmented control / button group toggle with spring-animated selection indicator using layoutId, three sizes (sm/md/lg), and smooth transitions.

Numeric stepper with animated +/- buttons, spring scale on press, configurable min/max/step, three sizes, and disabled state.

Search bar with animated search icon, spinning loading indicator, and AnimatePresence clear button that appears when text is entered.

Password input with animated show/hide toggle using SVG eye icons, AnimatePresence transitions, three sizes (sm/md/lg), and focus border animation.

Dual-thumb range slider with framer-motion drag interaction, step snapping, hover/tap scale animations, and ignite-colored active range fill.

Click-to-copy button with AnimatePresence-powered animated transition between copy icon and checkmark feedback, clipboard API with fallback.

Text input that shows an animated dropdown when typing @, with user filtering, keyboard navigation, avatar display, and AnimatePresence transitions.

A card with an animated glowing border that follows cursor movement.

An auto-rotating testimonials card with smooth crossfade transitions, avatar display, and dot navigation.

A grid layout where children animate in with a staggered fade-up effect as they enter the viewport.

A bento-style grid where clicking an item expands it into a full overlay modal with smooth layout animations.

A 3D perspective grid that tilts items on hover with smooth spring animations and staggered entrance.

A card with a radial spotlight that follows the cursor, creating a flashlight reveal effect.

Sortable data table with column definitions, ascending/descending sort indicators, striped rows, hover state, and framer-motion AnimatePresence row transitions.

Animated divider with horizontal/vertical orientation, optional centered label, and gradient mode.

Alternating two-column timeline with scroll-triggered animations, connecting lines, active-state pulse rings, optional icons, and responsive single-column mobile layout.

Animated statistics card with spring-based number counter, trend indicator (up/down), optional icon, prefix/suffix, and scroll-triggered entrance.

Animated pricing plan card with title, price, period, feature list, CTA button, and optional popular badge with hover scale and glow.

User profile card with avatar, name, role, bio, and social links with staggered entrance animation.

Feature highlight card with icon, title, and description. Includes a 3D tilt effect on hover using useMotionValue.

Side-by-side feature comparison table with staggered row entrance animations and check/cross icons.

Horizontal stat/skill bar with animated spring fill triggered on scroll using useInView.

Scroll-driven card stack where cards progressively reveal, scale up, and rotate as the user scrolls through the viewport.

A responsive masonry grid that distributes items across columns balanced by height, with staggered entry animations.

An interactive bento grid layout with animated cards featuring glowing borders, cursor-following spotlight, particle effects, tilt, magnetism, and click ripples.

A grid of cards rendered in grayscale that reveal vibrant colors within a configurable radius as the cursor moves over them.

A link with an animated underline that slides in on hover.

A horizontal navigation bar with a smooth animated spotlight background that follows the hovered item.

A macOS-inspired dock with glassmorphism styling, spring-animated hover magnification, and tooltips.

Smooth expand/collapse panels with animated chevron, supports single or multiple open panels.

Tab navigation with a smooth sliding indicator and crossfade content transitions.

An animated modal dialog with backdrop blur, spring scale transition, Escape key handling, scroll lock, and ARIA attributes.

A tooltip with 4 positions, configurable delay, direction-aware motion animation, and arrow pointer.

An animated dropdown menu with full keyboard navigation, click-outside close, divider and disabled item support.

A multi-step indicator with animated check icons, spring-scaled active step, and animated connector lines. Supports horizontal and vertical orientation.

An Intersection Observer-based infinite scroll container with loading state, configurable threshold, and animated default loader.

A command palette with search filtering, grouped items, keyboard navigation, match highlighting, and shortcut badges.

Navigation breadcrumbs with Next.js Link integration, custom separator support, aria-label accessibility, and current page indicator.

An accessible custom dropdown select with animated open/close, keyboard navigation, selection indicator, and spring transitions.

Accessible pagination with animated active-page indicator (layoutId), smart ellipsis, two sizes (sm, md), and prev/next buttons.

A slide-in panel overlay (drawer) with four sides (left, right, top, bottom), backdrop blur, scroll lock, Escape-to-close, and spring transition.

A searchable select component with keyboard navigation, multi-select support, and animated dropdown. Features search highlighting, loading state, and customizable options.

An accessible autocomplete input with async search, debouncing, keyboard navigation, loading states, and animated dropdown with highlighted matches.

A floating pill menu that expands into a card with GSAP-animated hamburger-to-X, text scramble effect, and staggered item reveals.

Collapsible sidebar navigation with animated width transition, staggered item entrance, and expandable sub-items with AnimatePresence.

Mobile bottom sheet drawer that slides up with drag-to-dismiss, backdrop blur, and snap-to-point behavior using framer-motion.

Floating popover with arrow indicator, click-to-toggle, click-outside-to-close, and AnimatePresence entrance animation.

Right-click context menu that opens at cursor position with keyboard navigation, dividers, disabled items, and AnimatePresence animation.

Large dropdown navigation menu with hover trigger, delayed close, grid layout for sections, and AnimatePresence entrance animation.

An animated reading progress indicator with spring physics. Renders a top bar or right-side section dots navigator. Scopes to any scroll container via ref.

A DNA-strand scroll navigator with interactive scrubbing. Click any bar to jump, drag to scrub, section dots mark waypoints, and a floating card shows context + copyable code. Praxys Signature.

Animated vertical light beams that sweep across a container, creating a dramatic visual effect.

Animated layered SVG waves with configurable colors, wave count, and speed for a mesmerizing ocean effect.

A cursor-reactive surface with chrome-like liquid metal reflections that follow mouse movement.

A 3D-styled folder icon with layered papers inside. Click to toggle open/closed. Papers fan out when opened and respond to cursor proximity.

A loading animation with a curtain reveal effect — shows a progress bar, then slides away to reveal content underneath.

Stackable animated toast notifications with variants (success, error, warning, info), auto-dismiss, and manual dismiss.

A wrapper that creates a magnetic pull effect, attracting elements toward the cursor with configurable strength and radius.

Scroll-driven parallax layers with configurable speed multipliers for creating depth effects.

Animated multi-color gradient mesh background with smooth transitions between color states.

Animated placeholder loading states with shimmer effect, supporting text, avatar, card, and button variants.

An animated progress bar with multiple sizes, optional label and value display, custom colors, and candy-stripe animation.

Stacked avatar circles with overlap, max display count with '+N' overflow indicator, three sizes, and fallback initials.

Animated alert banner with four variants (info, success, warning, error), contextual icons, optional title, dismissible with exit animation.

Confetti celebration burst effect with physics-based falling particles triggered on demand.

Floating particle background with randomized drift animations that loop infinitely.

Subtle animated noise/grain overlay using SVG turbulence filters for a film-grain aesthetic.

Aurora borealis gradient background effect with smoothly animated blurred color blobs.

Blur + fade entrance animation wrapper that blurs children in from a configurable direction.

A pixelated dissolution effect that transitions between two pieces of content on hover with randomized stagger animations.

A reusable hero section with staggered entrance animations, pulsing radial glow, grid background, badge, and dual CTA buttons.

A stacked avatar group with overlapping circular avatars, hover-to-pop animation, tooltips, and a +N overflow indicator.

An interactive folder component that expands to reveal a file tree with staggered entrance animations and custom icons.

A 3D page-flip book component with AnimatePresence transitions, directional flip variants, spine accent, page indicator, dot navigation, and prev/next buttons.

An infinite-scrolling marquee of logos or brand icons with fade edges, pause-on-hover, configurable speed, and bidirectional support.

A before/after image comparison slider with pointer-capture dragging, clip-based reveal, and an animated drag handle.

Image/content carousel with directional slide animations via AnimatePresence, dot indicator with layoutId, optional auto-play, and arrow navigation.

Single avatar with image support, fallback initials derived from alt text, four sizes, and animated status indicator dot with pulse effect for online state.

Fullscreen image viewer with spring scale animation, backdrop blur, click-to-zoom, arrow key navigation, thumbnail strip, and click-outside-to-close.

A 3D circular/orbital image carousel with drag and scroll navigation. Items are arranged in a curved arc with perspective-based scaling, fading, and smooth momentum deceleration.

WebGL silk fabric background with flowing noise-driven animation, configurable speed, scale, and color.

WebGL glowing orb with OGL-powered shading, customizable hue and hover-reactive animation.

Chrome-like liquid metal background with reflective distortion and mouse-reactive movement.

Psychedelic swirling background effect with vivid color distortion inspired by retro aesthetics.

Dithered wave background with configurable colors, wave amplitude, and Three.js postprocessing.

Interactive dot grid with GSAP-powered hover trail and directional movement animations.

Volumetric light beam background with Three.js, customizable beam count, colors, and speed.

Shadowy layered veil background with OGL-powered animated dark gradients and depth.

Dynamic light ray background with configurable color, speed, and ray count.

Rainbow prismatic refraction background with light dispersion and chromatic effects.

Animated gradient blinds with configurable colors, angle, and transition speed.

Grainy gradient background with film-grain noise overlay and smooth color transitions.

Explosive pixel dissolution background with Three.js particle system and postprocessing.

Ethereal liquid background with flowing color gradients and smooth WebGL animation.

Curved color band background with smooth bending gradients and animated transitions.

Vertical light pillar background with glowing beams and atmospheric scattering.

Floating particle system with anti-gravity physics, 3D depth, and mouse interaction.

Spark burst effect on click with radiating animated particles and configurable colors.

Animated laser beam flow with neon glow and configurable beam paths.

Flowing 3D ribbon animation with OGL-powered smooth curves and color gradients.

Fluid splash effect that follows cursor movement with ripple and wave dynamics.