Components Directory

Smooth shared-element sliding pill tabs with animated panel transitions, optional badge counters, and keyboard arrow navigation.

Customizable search combobox with instant filtering, grouped categories, keyboard navigation, and spring-animated dropdown results.

Horizontally snapping card carousel with swipe gesture physics, a pill-shaped morphing dot indicator, keyboard arrow support, and circular navigation buttons.

Cryptographic matrix text decoder that permutes characters through a high-frequency glyph wave on pointer hover, focus, or click.

Apple-style device finish selector featuring concentric selection rings, synchronized ambient page background tinting, crossfading vector hardware graphics, and technical metallurgy specifications.

Spotlight-style Cmd+K command palette portaled above the viewport with grouped actions, live keyword filtering, and full keyboard navigation.

Frosted glassmorphic context menu and popover with a directional pointer arrow, hairline-divided action groups, keyboard shortcuts, and red destructive items.

Dual-spring custom pointer stage with a high-stiffness inner core and morphing outer ring that expands into contextual HUD pills.

Slide-over panel and bottom sheet drawer with 4-direction support, drag-to-dismiss gestures, top-level portal rendering, and Escape dismissal.

Morphing top-edge status capsule that expands smoothly between compact badge, live telemetry pill, and actionable notification drawer.

Physics-coupled magnification dock with continuous Euclidean pointer falloff, spring-tethered icon scaling, and roving keyboard navigation.

Large rounded showcase card with an eyebrow badge, headline, concise copy, interactive media stage, and smooth spring hover lift.

High-gloss feature cards with thin glowing gradient borders and interactive face overlays that dynamically illuminate and follow cursor coordinates using radial gradient masking.

Multi-node gravitational field stage where spring-tethered telemetry badges warp toward or repel from the pointer with polarity inversion.

Instagram and Twitter-style like button featuring an elastic scale-pop spring, expanding shockwave ring, radial multi-colored particle confetti sparks, and double-tap card preview.

Press-and-hold safety action button with a spring-pressured progress fill that recoils elastically when released early.

Dual-sided 3D interactive card combining spring-damped perspective tilt, specular foil glare tracking, and a 180-degree Y-axis kinetic flip.

Raycast-inspired 3D tactile physical keyboard keycaps with realistic chamfer bevels, inset mechanical shadows, physical depression animations, and interactive keyboard listener.

Mechanical odometer numeric ticker where each digit column spins independently along a vertical 0-9 reel using Hooke's Law springs.

Elastic range slider featuring velocity-reactive tooltip inertia, logarithmic rubber-band boundary over-drag, and full keyboard accessibility.

Slide-to-execute actuator switch with a spring-tethered thumb that locks upon crossing the completion threshold or recoils elastically.

Ultra-premium translucent frosted glass card featuring dynamic specular highlight cursor tracking, 3D perspective tilt, chromatic edge refraction, double-layer backdrop blur, and tactile click feedback.

macOS-inspired dock magnification bar with continuous Gaussian/cosine pointer falloff, spring physics scaling, click-to-bounce launch animations, floating tooltip labels, and running indicator dots.

Tactile button with dual-layer spring attraction that gravitates toward the pointer with configurable mass, stiffness, and damping.

Animated popup modal dialog with spring scale transitions, top-level portal rendering, danger/confirm variants, and Escape dismissal.

Multi-phase stateful pill button that morphs its bounding width across Idle, Compiling, and Published states using spring layout projection.

Origin-morphing modal overlay that expands seamlessly from its trigger button bounding box with spring layout projection and vertical drag-to-dismiss.

Interactive tag and chip input with live autocomplete suggestions, custom tag creation via Enter or comma, Backspace removal, and max-tag limits.

Multi-depth 3D spatial card featuring three independent Z-planes that shift at graduated parallax ratios under pointer movement.

iOS-inspired 3D cylindrical scrolling drum picker for dates, times, and custom option columns with wheel, drag, and click-to-snap physics.

Floating command orb that blossoms into a 360-degree polar-coordinate action ring with staggered Hooke's Law spring trajectories.

Synthesizer-inspired tactile rotary knob with a 270-degree spring-damped rotor, vertical drag scrubbing, and keyboard arrow control.

Linear-inspired metallic gradient typography with a high-gloss light beam that sweeps across headlines continuously or upon hover interaction.

Apple Intelligence-inspired fluid perimeter rainbow chromatic aura with multi-layer conic gradient blur, breathing light cycles, live voice waveform reaction, and adjustable glow thickness.

Minimal surface card with GPU-composited radial cursor illumination, 1px CSS mask border reveal, and optional 3D perspective tilt.

Tactile OTP verification code input with per-digit spring impulse bounce, staggered completion wave, and harmonic error shake.

Multi-step onboarding and checkout progress wizard with spring-animated connector bars, clickable step indicators, and directional panel transitions.

Duolingo-style gamified streak counter featuring a pulsing animated flame avatar with floating sparks, 7-day calendar circle row with completion checks, freeze shield, and celebratory confetti explosion.

Stacked viewport notification toasts supporting 6 viewport positions (top/bottom + left/center/right), hover fan-out, and auto-dismiss.

Interactive kinetic typography where each glyph interpolates vertical lift, scale, and contrast based on real-time 2D cursor proximity.

Smooth collapsible disclosure panels with spring-rotated chevron indicators, single or multiple expansion modes, and full keyboard accessibility.

Multi-tab CLI and code snippet block with sliding spring package-manager tabs (npx, pnpm, bun, yarn), optional line numbers, and one-click clipboard copy feedback.

Reorderable priority queue where list items swap positions with Hooke's Law layout spring projection and full keyboard arrow-key control.

Tokenized multi-tag input with Hooke's Law pill pop-in, FLIP layout reflow, and a two-step Backspace warning wiggle before deletion.

Plucked-string kinetic typography that propagates a damped transverse wave across every character on hover or click.

Interactive bento surface that expands inline with Hooke's Law spring height projection to reveal secondary diagnostic modules.

Viewport-anchored floating navigation pod that snaps elastically across four corner quadrants (NW, NE, SW, SE) via spring layout projection.

Bottom gesture sheet featuring Peek and Full spring detents, velocity-projected flick transitions, and rubber-band over-drag.

Multi-step workflow progress bar with spring-filled liquid connector tubes, elastic checkmark badges, and direct step jumping.

Segmented navigation tab bar with dual-layer spring layout projection for active and hover indicator pills and roving WAI-ARIA keyboard control.

Hierarchical breadcrumb navigation trail with a spring-projected hover capsule and subtle vertical lift across path segments.

Floating command popover menu with origin-scaled spring entry, a shared-layout magnetic row highlight, and keyboard arrow navigation.

Dual-layer vault card with a spring-hinged top cover that peels upward on hover or keyboard activation to reveal sensitive credentials.

Floating anchored popover card with configurable side and alignment, spring scale-in physics, outside-click dismissal, and interactive toggle controls.

Slack-style floating emoji reaction bar with quick reactions, spring count bump badges, toggleable personal reaction state, hover tooltip user attributions, and an expandable full emoji picker with search.

Tactile impulse button that spawns dual concentric shockwave rings from the exact pointer click coordinate with spring recoil.

Wise and Robinhood-style vertical rolling cylinder odometer number ticker with independent digit strips, smooth Hooke's Law spring physics, customizable currency prefix, and decimal formatting.

Figma and Blender-inspired tactile numeric input with horizontal pointer drag scrubbing, elastic housing displacement, and kinetic digit roll.

Rounded iOS-inspired search bar with a magnifier icon, inline clear badge, quick suggestion pills, and a 'Cancel' button that slides in smoothly on focus.

Financial timeframe range selector (1D, 1W, 1M, 1Y, ALL) with a sliding pill highlight, synchronized animated chart transitions, interval resolution badge, and high/low metric cards.

A primary action fused with a chevron trigger that reveals related actions in a spring-timed dropdown, sharing a single pill silhouette.

Mechanical departure-board split-flap display that cycles character tiles with staggered 3D rotateX spring hinges.

Synchronized precision control pairing a thin-track slider and large round thumb with a tactile (− / +) segmented stepper pill.

Soft rounded input field with a spring-animated floating label, accent focus ring, inline clear button, password visibility toggle, and validation caption.

Revolut and Apple Card-inspired premium 3D metal card with cursor-tilt gyroscope physics, rainbow holographic foil reflection, gold EMV chip, contactless RFID waves, and dual-side flip mechanics.