# Lightswind UI

> A comprehensive library of 187 Free components, 103 Pro components, and 390 Premium blocks.

- [Lightswind UI Home](https://lightswind.com)
- [All Blocks](https://lightswind.com/blocks)
- [All Components](https://lightswind.com/components)
- [Templates](https://lightswind.com/templates)
- [Pricing](https://lightswind.com/pricing)
- [Documentation](https://lightswind.com/components/installation)
- [Full LLMs Reference](https://lightswind.com/llms-full.txt)

## Free Components (187)

### Utilities (2)
- [cool-theme-toggle](https://lightswind.com/components/cool-theme-toggle): A professional and beautiful theme toggle with smooth spring animations, sun/moon icons, and day/night scenery background.
- [toggle-theme](https://lightswind.com/components/toggle-theme): An accessible button component that toggles between light and dark themes, utilizing the modern View Transition API for smooth, customizable full-page animations.

### 3D Elements (23)
- [3d-image-ring](https://lightswind.com/components/3d-image-ring): A stunning 3D image carousel arranged in a circular ring that users can drag to rotate. Features smooth GSAP animations, parallax effects, and responsive touch controls.
- [ascii-wave](https://lightswind.com/components/ascii-wave): A retro-style, text-based animation using ASCII characters to simulate fluids, fire, or data streams on HTML Canvas.
- [3d-image-carousel](https://lightswind.com/components/3d-image-carousel): A responsive, 3D-styled image slider with a cascade effect that smoothly transitions between slides. Supports drag, touch, and autoplay interactions, while remaining fully Tailwind-compatible for design customization. Only minimal embedded CSS is used to maintain the 3D stacking and positioning logic.
- [3d-carousel](https://lightswind.com/components/3d-carousel): An immersive 3D carousel component with flippable cards arranged in a circular layout. Features drag navigation, keyboard controls, auto-rotation, and smooth animations with full theme support.
- [3d-glass-coin-carousel](https://lightswind.com/components/3d-glass-coin-carousel): Procedural WebGL 2 raymarching of glass-morphic coins rotating in a tilted 3D orbit with fresnel edge highlights, refraction, and specular lighting around center text.
- [3d-image-slider](https://lightswind.com/components/3d-image-slider): A professional responsive 3D image slider component using Framer Motion and Tailwind CSS. Features smooth rotation, customizable perspective, and CSS 3D transforms.
- [3d-hover-gallery](https://lightswind.com/components/3d-hover-gallery): A stunning 3D hover gallery with perspective effects, smooth transitions, and responsive design. Features keyboard navigation, auto-play mode, and extensive customization options.
- [3d-marquee](https://lightswind.com/components/3d-marquee): A stunning 3D animated image gallery with customizable rotation, scaling, and interactive features. Perfect for showcasing portfolios, products, or any visual content with an engaging 3D perspective.
- [3d-model-viewer](https://lightswind.com/components/3d-model-viewer): An interactive 3D model viewer component for a variety of file formats including GLTF, GLB, FBX, and OBJ. It features dynamic lighting, environmental presets, and full user control over rotation and zoom. It's a versatile component for displaying 3D assets in web applications.
- [3d-perspective-card](https://lightswind.com/components/3d-perspective-card): A modern interactive 3D card component with dynamic lighting and depth effects based on mouse movement. Ideal for portfolios, product showcases, or visually engaging UI elements. Built with React and CSS.
- [3d-scroll-trigger](https://lightswind.com/components/3d-scroll-trigger): A high-performance horizontal scroll component with smooth, velocity-based animation. Automatically repeats its children for an infinite 3D-like scrolling effect, ideal for galleries, tickers, or interactive carousels.
- [3d-slider](https://lightswind.com/components/3d-slider): A responsive, 3D image/content slider with a smooth, cascaded stacking effect. It uses Framer Motion for the complex 3D transforms (translateX, translateY, rotate) and handles interactivity via global document event listeners for mouse wheel, drag, and touch gestures. The component is styled using Tailwind CSS and is fully self-contained.
- [angled-slider](https://lightswind.com/components/angled-slider): A 3D perspective infinite slider with reflection effects and hover interactions.
- [beam-circle](https://lightswind.com/components/beam-circle): A dynamic, orbit-based visual component where icons revolve around a customizable center element. It simulates rotating energy beams or planetary motion with full Framer Motion animation control. Perfect for loaders, dashboards, hero animations, or brand identity effects.
- [3d-beam-circle](https://lightswind.com/components/3d-beam-circle): A stunning 3D perspective orbital ring component where glowing boxes travel along concentric elliptical orbits. Each orbit is independently configurable with custom speed, direction (CW/CCW), color, glow, and traveler box size. Built with pure SVG + rAF — no external 3D library required. Perfect for loaders, hero sections, tech dashboards, or orbit/network visualizations.
- [chain-carousel](https://lightswind.com/components/chain-carousel): A horizontally scrolling carousel component for displaying blockchain chains, tokens, or custom items. It features auto-scroll with smooth Framer Motion animations, center highlighting, left/right mirrored displays, and an interactive search dropdown for selecting and focusing on specific items. Perfect for dashboards, explorers, and interactive listings.
- [infinite-drift](https://lightswind.com/components/infinite-drift): A high-performance Three.js based image marquee with independent horizontal bands, custom vertex shaders for curvature effects, and smooth inertial scrolling. Ideal for hero sections or premium galleries.
- [hanging-id-card](https://lightswind.com/components/hanging-id-card): A physics-based ID card component that hangs from a rope at the top. Features realistic pendulum physics with spring return, drag interaction, and gravity simulation. Click or drag the card left/right and watch it swing with authentic momentum before settling back to center.
- [plasma-globe](https://lightswind.com/components/plasma-globe): A dynamic and visually striking plasma globe background component built with React and OGL. It renders a fully animated plasma sphere with multiple filaments, supporting real-time mouse interaction, speed, and intensity control. The background is transparent by default, allowing users to overlay any custom background color.
- [stylish-carousel](https://lightswind.com/components/stylish-carousel): A visually stunning image carousel built with Framer Motion spring physics. Slides fan out in a rotating, scaled perspective giving a cinematic fan-out effect. Fully keyboard-accessible, swipe-enabled on touch devices, supports auto-play, click-to-navigate, dot indicators, directional arrow controls, and extensive prop customisation.
- [cool-slide-gallery](https://lightswind.com/components/cool-slide-gallery): A premium 3D coverflow-style image gallery built with Framer Motion. Cards fan out in a smooth perspective layout with configurable tilt, depth, scale, and rotation. Supports drag/swipe, keyboard navigation, autoplay, dot indicators, navigation arrows, title overlays with gradient veils, badge labels, slide counter, and extensive customisation. Fully transparent background with seamless light and dark mode support.
- [scroll-carousel](https://lightswind.com/components/scroll-carousel): A responsive and animated scrollable carousel that displays feature cards. On desktop, it provides smooth horizontal scrolling with GSAP + ScrollTrigger pinning and progress tracking. On mobile, it animates cards vertically with fade-in and slide effects. Supports dynamic rows, custom max scroll height, and animated progress bar.
- [sparkle-navbar](https://lightswind.com/components/sparkle-navbar): A reusable, animated navigation menu component built with React, TypeScript, and GSAP. It features a dynamic active state indicator with a glowing strike-through effect, smooth transitions, and customizable colors. Ideal for modern websites needing interactive navigation with engaging micro-animations.

### Components (44)
- [animated-copy-button](https://lightswind.com/components/animated-copy-button): A highly interactive copy-to-clipboard button using Framer Motion with smooth success animations.
- [animated-notification](https://lightswind.com/components/animated-notification): A professional animated notification center with smooth transitions, blur effects, and customizable styling. Displays notifications one-by-one with beautiful entrance and exit animations.
- [code-hover-cards](https://lightswind.com/components/code-hover-cards): Interactive cards with dynamic character matrix effects on hover. Features customizable gradients, animations, and responsive layouts with professional styling and accessibility support.
- [count-up](https://lightswind.com/components/count-up): Animated counter that counts from zero to a target value with configurable effects.
- [dock](https://lightswind.com/components/dock): A customizable macOS-style dock component with proximity-based magnification, badges, frosted glass, separators, and full layout control.
- [drag-order-list](https://lightswind.com/components/drag-order-list): A draggable, reorderable list built using React, Motion One, and Tailwind CSS. Items can be rearranged vertically via drag-and-drop gestures, with smooth animation and visual feedback.
- [draggable-reorder-list](https://lightswind.com/components/draggable-reorder-list): A smooth drag-to-reorder list using Framer Motion's Reorder API with spring physics, staggered entry, and optional item removal.
- [electro-border](https://lightswind.com/components/electro-border): A dynamic animated border with an electric, distortion-based effect. Supports optional glow and aura layers for an energized or minimal look.
- [expandable-search-bar](https://lightswind.com/components/expandable-search-bar): An elegant, animated search bar that expands gracefully on interaction and features clear/command micro-interactions.
- [expandable-speed-dial](https://lightswind.com/components/expandable-speed-dial): A functional speed dial that expands into multiple floating action buttons with staggered physics animations.
- [glass-folder](https://lightswind.com/components/glass-folder): A 3D glassmorphic folder component with layered depth and interactive rotation effects on hover. Designed using React and Tailwind CSS, it visually mimics a stack of translucent folder sheets, making it ideal for showcasing documents, portfolios, or feature categories in a stylish and futuristic way.
- [globe](https://lightswind.com/components/globe): A fully customizable and interactive 3D globe built with the `cobe` library. Supports theming, lighting, rotation, mouse interactions, and custom markers. Ideal for showcasing global presence, user locations, or ambient visual flair.
- [glowing-cards](https://lightswind.com/components/glowing-cards): Interactive card components with beautiful glowing effects that follow mouse cursor movement. Perfect for feature showcases, pricing sections, and content highlights.
- [hamburger-menu-overlay](https://lightswind.com/components/hamburger-menu-overlay): A professional, fully customizable hamburger menu with animated full-screen overlay. Features smooth GSAP-style animations, responsive design, and comprehensive accessibility support.
- [image-reveal](https://lightswind.com/components/image-reveal): An animated image hover reveal component built with Framer Motion. Displays a floating image near the cursor when hovering over each label. Perfect for showcasing visual categories, portfolios, or galleries with interactive feedback.
- [image-trail-effect](https://lightswind.com/components/image-trail-effect): An animated mouse trail image effect built with React. Displays a trail of floating images that follow the user's cursor. Ideal for creating visually engaging and interactive sections on landing pages or portfolios.
- [interactive-card](https://lightswind.com/components/interactive-card): A responsive and animated 3D hover card built with Framer Motion and Tailwind CSS. It responds to cursor position with rotation and a glowing radial gradient. Perfect for enhancing UI with interactive visual depth and modern appeal.
- [interactive-gradient-card](https://lightswind.com/components/interactive-gradient-card): A customizable interactive gradient background that responds to mouse movements and provides visual feedback.
- [iphone16-pro](https://lightswind.com/components/iphone16-pro): A high-fidelity, reusable iPhone 16 Pro SVG component built with React and TypeScript. It supports displaying images or videos on the screen, a dynamic island, camera dot, and customizable frame, bezel, and screen properties. Ideal for showcasing mobile app mockups, interactive demos, or marketing visuals with realistic device frames.
- [lens](https://lightswind.com/components/lens): Interactive magnifying lens component with customizable zoom, animations, and visual effects. Perfect for image galleries, product showcases, detailed inspections, and interactive content exploration with both hover and static modes.
- [magic-card](https://lightswind.com/components/magic-card): Interactive card with pointer-tracking spotlight/projection effect and glassmorphic borders.
- [magic-loader](https://lightswind.com/components/magic-loader): A mesmerizing particle-based loader with spinning effects and customizable colors. Perfect for loading states and adding visual appeal with smooth canvas animations.
- [morphing-navigation](https://lightswind.com/components/morphing-navigation): A sophisticated navigation component that morphs from a full horizontal menu to a compact hamburger button on scroll. Features smooth animations, backdrop blur effects, and customizable themes perfect for modern web applications.
- [orbit-card](https://lightswind.com/components/orbit-card): A visually enhanced card component with a pulsing orbit-style glowing background animation. Built using React, Tailwind CSS, and CSS-in-JSX keyframes. Ideal for showcasing premium features, callouts, or spotlight sections.
- [scroll-cards](https://lightswind.com/components/scroll-cards): A high-performance scroll-driven stacked cards component powered by GSAP and ScrollTrigger. As the user scrolls, current cards scale down and rotate elegantly while subsequent cards slide in from any direction (bottom, top, left, or right). Ideal for showcase galleries, portfolio highlights, and interactive storyboards.
- [scroll-list](https://lightswind.com/components/scroll-list): An animated vertical list that highlights the centered item using Framer Motion.
- [scroll-timeline](https://lightswind.com/components/scroll-timeline): An animated timeline component that reveals entries as the user scrolls down the page.
- [seasonal-hover-cards](https://lightswind.com/components/seasonal-hover-cards): A set of cards that change their appearance based on the current season.
- [slide-to-confirm](https://lightswind.com/components/slide-to-confirm): A highly interactive slide-to-action button frequently used for critical operations like payments or deleting records.
- [sliding-cards](https://lightswind.com/components/sliding-cards): An interactive stack of sliding cards with 3D depth and swipe gesture functionality. Each card can display an icon and customized background. Ideal for showcasing features, testimonials, or data cards in a visually appealing and animated format. Built with React, Tailwind CSS, and custom swipe logic.
- [sliding-logo-marquee](https://lightswind.com/components/sliding-logo-marquee): A professional sliding logo marquee component with smooth animations, blur effects, and customizable styling. Perfect for showcasing client logos, partners, or brands with elegant horizontal scrolling motion.
- [spectrum-loader](https://lightswind.com/components/spectrum-loader): A professional SVG-based loading indicator that features a vibrant, animated rainbow spectrum. By leveraging layered radial gradients and cinematic glow filters, it creates a premium visual experience. The component uses Framer Motion for high-performance spinning and stroke-draw animations, making it both smooth and highly customizable through props.
- [stack-list](https://lightswind.com/components/stack-list): A responsive animated stack view component that displays a vertical list of items with expandable functionality, built with Tailwind CSS and Framer Motion.
- [team-carousel](https://lightswind.com/components/team-carousel): An interactive 3D carousel component for displaying team members with smooth animations, keyboard/touch navigation, and extensive customization options.
- [terminal-card](https://lightswind.com/components/terminal-card): A dynamic terminal-style card component with typing animation and syntax highlighting. Ideal for showcasing commands or code snippets with copy-to-clipboard functionality and visually appealing terminal interface. Built with React, Framer Motion, Tailwind CSS, and SyntaxHighlighter.
- [top-loader](https://lightswind.com/components/top-loader): A slim loading indicator that appears at the top of the page to show loading progress.
- [top-sticky-bar](https://lightswind.com/components/top-sticky-bar): A versatile and animated sticky bar component that can appear at the top of the viewport. It supports both external control via a `show` prop and automatic visibility based on scroll position, offering customizable content, appearance, and animation.
- [trusted-users](https://lightswind.com/components/trusted-users): A visually appealing component to showcase social proof by displaying user avatars, a star rating, and a customizable caption. Perfect for landing pages, testimonials, or feature highlights. Built with React and Tailwind CSS.
- [ripple-loader](https://lightswind.com/components/ripple-loader): A customizable animated ripple loader component with layered ripple effects and a centered icon, built using React and inline CSS-in-JSX. Accepts dynamic icons through props.
- [woofy-hover-image](https://lightswind.com/components/woofy-hover-image): A sophisticated image hover effect component that reveals different visual effects through an organic marbling mask. Features WebGL-powered shaders, multiple effect types, and smooth animations.
- [cinematic-scroll](https://lightswind.com/components/cinematic-scroll): A premium scrollable container that features layered, progressive blur masking at the top and bottom edges. It creates a cinematic 'fade-out' effect for content as it enters or leaves the scrollable area, paired with a high-performance custom scrollbar built with Framer Motion. This component is designed to elevate long-form content, sidebars, or complex layouts with a professional editorial aesthetic.
- [marquee-menu](https://lightswind.com/components/marquee-menu): A cinematic radio-selection menu where each list item reveals an infinitely-scrolling marquee strip behind it using a smooth clip-path animation. Hovering or selecting an item exposes a row of pill-shaped images and repeated text scrolling horizontally. Built with Framer Motion for the clip-path spring transition and a CSS keyframe animation for the seamless infinite scroll. Fully accessible with keyboard navigation, ARIA roles, and screen-reader friendly hidden marquee content.
- [fluid-action-panel](https://lightswind.com/components/fluid-action-panel): A professional, highly interactive floating utility widget that morphs between a collapsed progress trigger and an expanded glassmorphic settings dashboard. Features page scroll progress tracking, custom theme togglers, and clean copy-link and social sharing shortcuts with responsive touch controls.
- [knowledge-convergence](https://lightswind.com/components/knowledge-convergence): An animated AI knowledge convergence hub component connecting multi-source data feeds (YouTube, Medium, GitHub, LeetCode, PDF/Word documents) into a central target title with glowing bezier beams, energy flow particles, and full light/dark theme support.

### Background (33)
- [animated-flow](https://lightswind.com/components/animated-flow): A high-performance WebGL domain-warping fluid gradient background component. Features multi-variant color presets, customizable noise scale, film grain, domain warping, rotation angle, and seamless light and dark mode theme switching.
- [animated-wave](https://lightswind.com/components/animated-wave): A professional 3D animated wave background component using Three.js with automatic background color detection, multiple quality settings, and customizable visual effects.
- [animated-bubble-particles](https://lightswind.com/components/animated-bubble-particles): A high-performance HTML5 Canvas-based background animation engine. Features HSL color gradients, glow effects, cursor repulsion physics, and click-to-pop interactive explosions.
- [aurora-shader](https://lightswind.com/components/aurora-shader): A high-performance, interactive aurora shader effect rendered with WebGL via OGL. It displays dynamic, colorful aurora waves that respond smoothly to mouse movement and time, creating an immersive visual effect suitable for backgrounds or hero sections.
- [beam-grid-background](https://lightswind.com/components/beam-grid-background): A visually dynamic grid background with animated beam effects and interactive highlights. Beams move across the grid in both X and Y directions, with optional glow effects and multi-level highlights around the mouse pointer. Supports light/dark mode, idle animations, and optional fade overlays. Ideal for hero sections, dashboards, or any immersive UI background.
- [dot-grid-background](https://lightswind.com/components/dot-grid-background): An interactive hexagonal dot-grid background. Drag in any direction — dots scale by proximity to center with smooth inertia physics. Fully configurable: dot size, color, spacing, scale falloff, and momentum. Built on Canvas API for 60 FPS with zero layout cost.
- [fall-beam-background](https://lightswind.com/components/fall-beam-background): A lightweight, animated background effect featuring vertical, glowing 'beams' or lines that continuously fall. Ideal for subtle data-stream, matrix, or sci-fi themes. It supports custom colors and line density.
- [grid-dot-backgrounds](https://lightswind.com/components/grid-dot-backgrounds): Professional grid and dot background components with customizable patterns, colors, and fade effects. Perfect for hero sections, landing pages, and content backgrounds with both light and dark mode support.
- [gradient-background](https://lightswind.com/components/gradient-background): A vibrant animated WebGL gradient background with customizable backdrop blur, ideal for immersive UI experiences. Provides dynamic color wave distortion with subtle vignette and extrusion glow. Suited for modern and expressive design themes.
- [hell-background](https://lightswind.com/components/hell-background): An immersive WebGL shader background with a hellish glow and turbulence effect that reacts to cursor movement. Ideal for dark, moody UI themes with a dramatic impact. It supports backdrop blur and customizable glow color.
- [interactive-grid-background](https://lightswind.com/components/interactive-grid-background): A fully interactive grid background component with glowing trails and idle animations. The grid reacts to mouse movement, creating a smooth trail effect, and automatically animates random cells when idle. Supports light/dark mode, glow effects, and optional fade overlays for visual depth.
- [particles-background](https://lightswind.com/components/particles-background): A customizable and responsive particle animation background using particles.js. Ideal for adding dynamic visual flair to hero sections or full-page layouts. Supports custom particle colors, sizes, count per device type, and styling options.
- [rays-background](https://lightswind.com/components/rays-background): A vibrant, conic and radial-based animated background effect inspired by cosmic light rays. Perfect for hero sections, modals, or theme transitions with full Tailwind and dark/light mode support.
- [reflect-background](https://lightswind.com/components/reflect-background): A vibrant animated WebGL background that simulates reflected light and fluid motion using a custom shader. Includes optional customizable backdrop blur overlay for immersive depth and layering. Ideal for modern UIs requiring expressive, animated visuals.
- [smokey-background](https://lightswind.com/components/smokey-background): A reusable WebGL-powered background component that renders a glowing, interactive smokey wave effect. Responds to mouse movement and supports dynamic color and backdrop blur customization. Ideal for modern, ambient visual sections.
- [liquid-surface](https://lightswind.com/components/liquid-surface): A premium 3D interactive background featuring liquid surface displacement and dynamic color mixing. Powered by WebGL and Three.js.
- [shader-background](https://lightswind.com/components/shader-background): An interactive WebGL shader background featuring a turbulent, glowing wave pattern that responds to mouse movement. It offers an optional backdrop blur for versatile integration into modern UIs.
- [satin-flow](https://lightswind.com/components/satin-flow): A premium WebGL background shader rendering a luxurious flowing satin fabric fold pattern with mouse interactive currents and custom colors.
- [nebula-flow](https://lightswind.com/components/nebula-flow): A breathtaking WebGL space nebula background shader with interactive gravitational swirls and stars density customization.
- [sparkle-particles](https://lightswind.com/components/sparkle-particles): Highly customizable particle animation built with `@tsparticles/react`. Supports dynamic theming, motion direction, interactivity, collisions, and advanced customization. Ideal for background visual effects or interactive UI embellishments.
- [stripes-background](https://lightswind.com/components/stripes-background): A reusable background component that applies diagonal striped patterns for visual enhancement. Supports dynamic positioning, sizing, and light/dark theme adaptation. Ideal for decorative backgrounds or section separators.
- [wave-background](https://lightswind.com/components/wave-background): An animated WebGL background featuring fluid wave 
      distortions with vibrant color shifting. Supports optional 
      customizable backdrop blur overlay for enhanced visual layering. 
      Ideal for dynamic, modern UIs that require an artistic background element.
- [quantum-field](https://lightswind.com/components/quantum-field): An interactive WebGL background rendering a field of floating energy nodes that warp dynamically around the cursor coordinates.
- [vector-flow](https://lightswind.com/components/vector-flow): A premium interactive background component featuring a high-density, multi-layered particle flow field simulation driven by domain-warped classic 2D Perlin noise. Includes dynamic speed-based color interpolation, physical velocity cursor drag, and transparent double-pass neon volumetric glow trails that fit perfectly on any page theme.
- [neural-link](https://lightswind.com/components/neural-link): An advanced interactive background component simulating a neural net connection grid. Floating node connections dynamically route glowing data packets along paths to cursor coordinates.
- [magnetic-field](https://lightswind.com/components/magnetic-field): An advanced interactive background component simulating a physical magnetic vector field. Needle lines representing compass vectors rotate dynamically to align with magnetic flux, and glowing tracer particles travel along the lines of force.
- [ether-waves](https://lightswind.com/components/ether-waves): An interactive WebGL background rendering a 3D cybernetic constellation wave field. It projects a flowing net of glowing star nodes and micro-thin lines that warp, tilt, and glow white-hot near the cursor coordinates.
- [fluid-chrome](https://lightswind.com/components/fluid-chrome): An advanced, interactive WebGL-based background component simulating a highly reflective liquid metallic chrome surface. Time-based fractional Brownian motion (FBM) noise drives organic waves, while mouse movements create expanding dynamic ripple deformations. Illumination is computed via Blinn-Phong specular reflections and iridescent normal mapping.
- [cyber-hive](https://lightswind.com/components/cyber-hive): An advanced interactive WebGL hexagonal grid background. The tiles pulse with customized breathing speeds and warp in scale, bevel specular reflection, and glow intensity when hovered by the cursor.
- [cosmic-singularity](https://lightswind.com/components/cosmic-singularity): An advanced interactive WebGL particle accretion disk background. Features a split particle population where background stars drift in full view and get dynamically pulled by gravity to circulate around the cursor's gravity well.
- [holographic-wave](https://lightswind.com/components/holographic-wave): A premium WebGL-based holographic/iridescent wave shader background component. It renders flowing fluid wave ribbons with organic metallic light reflections that smoothly respond to mouse cursor coordinates. The component features automatic light and dark mode styling adjustments.
- [cosmic-dust](https://lightswind.com/components/cosmic-dust): An advanced, neat, and highly interactive floating stardust particle background component built on HTML5 2D Canvas. It renders hundreds of microscopic dust grains with fading trailing lines. The dust is affected by gentle vector wind fields and swirls dynamically in a vortex around the cursor. It automatically adapts color palettes, opacity levels, and particle glows between light and dark themes.
- [wavy-ripple-background](https://lightswind.com/components/wavy-ripple-background): An interactive WebGL shader background featuring concentric waving ripple rings that expand and fade. Responds smoothly to mouse movements and supports full theme customizability.

### Button (12)
- [border-beam](https://lightswind.com/components/border-beam): A customizable animated border beam that moves around an element's border with gradient effects.
- [confetti-button](https://lightswind.com/components/confetti-button): An interactive button that triggers a confetti animation effect when clicked or hovered.
- [fluid-button](https://lightswind.com/components/fluid-button): An advanced, premium button component featuring magnetic cursor-attraction dynamics and a fluid, gooey SVG liquid blob backdrop. The button moves organically towards the cursor within range, and morphs its internal gradient liquid drops dynamically based on hover status. Includes full light and dark mode styling adaptability.
- [glitch-button](https://lightswind.com/components/glitch-button): A premium, cybernetic-themed button component featuring RGB displacement chromatic aberration text shadows, horizontal shearing slice animations, sweeping scanners, and custom chamfered cut-corner polygons. Includes full light and dark mode theme responsiveness.
- [gradient-button](https://lightswind.com/components/gradient-button): An animated button with gradient borders and optional glow effect.
- [holo-button](https://lightswind.com/components/holo-button): A premium, highly interactive button component featuring mouse-tracking radial flares, spinning gradient border beams, and responsive micro-interactions. The button adapts its color palette, glows, and flare gradients dynamically between light and dark themes, ensuring a spectacular, premium aesthetic in all states.
- [liquid-glass-button](https://lightswind.com/components/liquid-glass-button): A premium, realistic liquid glass UI component suite featuring multi-stage prism depth, curved top glare reflections, bottom internal refraction rings, and pure translucent glass effect without background color distortion. Supports clear glass, colored liquid gradients, and responsive size presets.
- [magnetic-button](https://lightswind.com/components/magnetic-button): A cursor-attracting button that magnetically follows your pointer with spring physics and a subtle parallax text effect.
- [ripple-button](https://lightswind.com/components/ripple-button): A modern ripple-effect button component with animated background circles. Ideal for calls to action, download prompts, or interactive UI elements. Highly customizable with colors, sizes, and responsive support. Built with React and CSS-in-JS.
- [shine-button](https://lightswind.com/components/shine-button): A reusable, customizable button component with a professional animated gradient shine effect. Supports solid hex or gradient backgrounds, responsive sizing, and full Tailwind CSS compatibility. Ideal for call-to-action or donation prompts.
- [stardust-button](https://lightswind.com/components/stardust-button): A premium, highly interactive button component featuring an integrated canvas stardust starfield background. The stardust particles drift ambiently, gravitate and swirl around the cursor on hover, and emit a shimmering burst animation on button click. Includes full light and dark mode adaptivity.
- [trial-button](https://lightswind.com/components/trial-button): A reusable, animated button component with a shiny gradient effect. It integrates Tailwind CSS for base styling and custom CSS for advanced gradient animations, pseudo-elements for shimmer effects, and hover/focus interactions. Supports light and dark themes automatically.

### Cursor (5)
- [canvas-confetti-cursor](https://lightswind.com/components/canvas-confetti-cursor): A fully configurable Canvas-based animated confetti effect that follows the cursor. Designed for professional visual feedback and celebration effects.
- [particle-orbit-effect](https://lightswind.com/components/particle-orbit-effect): Beautiful orbital particle effect that follows cursor movement across the entire screen. Creates mesmerizing trails of particles that orbit around the mouse position with customizable colors, intensity, and behavior.
- [smokey-cursor](https://lightswind.com/components/smokey-cursor): An interactive WebGL-based fluid simulation that follows cursor movements.
- [smooth-cursor](https://lightswind.com/components/smooth-cursor): Advanced smooth cursor replacement component with physics-based animations, magnetic effects, trail animations, and customizable visual effects. Perfect for creative websites, interactive applications, and immersive user experiences.
- [sparkle-cursor](https://lightswind.com/components/sparkle-cursor): A high-performance WebGL GSAP animated cursor effect. As the user moves the mouse, an array of rotating, falling sparkles and cinematic glowing orbs trail behind. Built entirely on an overlay canvas using hardware-accelerated GSAP tweens, ensuring a silky smooth 60fps experience without causing React re-renders or layout thrashing.

### Liquid Glass (15)
- [liquid-glass-alert](https://lightswind.com/components/liquid-glass-alert): A premium 3D liquid glass alert/callout component with 6 severity variants, top gloss glare reflection, bottom prism refraction, left accent bar, dismissible spring exit animation, and the same crystal glass aesthetic as the Liquid Glass Button and Switch.
- [liquid-glass-alert-dialog](https://lightswind.com/components/liquid-glass-alert-dialog): A premium 3D liquid glass modal alert dialog featuring frosted backdrop blur, spring-animated crystal glass panel, variant icon badge, liquid glass Cancel and coloured Confirm buttons, Escape key and backdrop-click dismiss, and 5 severity variants.
- [liquid-glass-avatar](https://lightswind.com/components/liquid-glass-avatar): A realistic 3D liquid glass avatar component featuring crystal lens refraction, top curved glare reflection, bottom prism depth, status indicator dots, stacked avatar group component with overflow counter, 6 color variants, 5 sizes, and squircle or circle shapes.
- [liquid-glass-badge](https://lightswind.com/components/liquid-glass-badge): A 3D liquid crystal capsule badge featuring top curved glare reflection, bottom prism refraction, 8 color variants (glass, emerald, primary, cyan, purple, aurora, gold, dark), live pulse status dots, custom icon slots, and removable tag pills.
- [liquid-glass-button](https://lightswind.com/components/liquid-glass-button): A premium, realistic liquid glass UI component suite featuring multi-stage prism depth, curved top glare reflections, bottom internal refraction rings, and pure translucent glass effect without background color distortion. Supports clear glass, colored liquid gradients, and responsive size presets.
- [liquid-glass-card](https://lightswind.com/components/liquid-glass-card): A standalone 3D liquid glass card component featuring modular subcomponents (Header, Title, Description, Content, Footer), top curved glare reflection, bottom prism refraction, 7 color crystal variants, ambient glow, and hover elevation physics.
- [liquid-glass-chart](https://lightswind.com/components/liquid-glass-chart): A 3D glassmorphic chart visualizer featuring 3D glass pillar bars with specular glare, smooth SVG liquid wave area paths, crystal line curves, interactive glass tooltips, and 6 color crystal variants.
- [liquid-glass-checkbox](https://lightswind.com/components/liquid-glass-checkbox): A 3D liquid crystal checkbox component with top curved specular glare, bottom prism refraction, Framer Motion checkmark animations, indeterminate dash state, 6 color variants, 3 sizes, and label/description support.
- [liquid-glass-collapsible](https://lightswind.com/components/liquid-glass-collapsible): A 3D glassmorphic expandable panel component featuring modular subcomponents (Trigger, Content), smooth Framer Motion spring height expansion, specular glare overlay, and 7 color crystal variants.
- [liquid-glass-dialog](https://lightswind.com/components/liquid-glass-dialog): A realistic 3D liquid glass modal dialog component featuring multi-stage crystal glass panel depth, top curved gloss glare, bottom prism refraction, backdrop blur, modular sub-components (Header, Title, Description, Body, Footer), 5 size options, and smooth Framer Motion spring physics.
- [liquid-glass-input](https://lightswind.com/components/liquid-glass-input): A 3D liquid crystal text input component with top curved glare highlights, bottom prism refraction, 6 color variants (glass, aurora, emerald, cyan, primary, dark), 3 sizes, left/right icon support, validation status indicators, and password visibility toggle.
- [liquid-glass-input-otp](https://lightswind.com/components/liquid-glass-input-otp): A 3D liquid crystal one-time password (OTP) input component with individual digit glass boxes, top curved specular glare, bottom prism refraction, active glowing focus state, paste support, auto-advance, backspace navigation, masking option, and 6 color variants.
- [liquid-glass-switch](https://lightswind.com/components/liquid-glass-switch): A premium 3D liquid glass toggle switch featuring multi-stage crystal lens refraction, spring sliding knob animations, top curved glare highlights, and active liquid color glow channels. Supports multiple color variants, responsive size presets, icons inside the knob, and full keyboard accessibility.
- [liquid-glass-slider](https://lightswind.com/components/liquid-glass-slider): A realistic 3D liquid glass range slider featuring multi-stage crystal track depth, smooth pointer drag interaction, active liquid color glow channels, 3D specular thumb dome, value tooltips, and keyboard navigation.
- [liquid-glass-select](https://lightswind.com/components/liquid-glass-select): A realistic 3D liquid glass dropdown select component featuring multi-stage crystal trigger depth, top curved glare highlights, smooth Framer Motion scale-in dropdown menus, optional search filtering, option icons, and active liquid color channels.

### Text (9)
- [aurora-text-effect](https://lightswind.com/components/aurora-text-effect): A text component with beautiful aurora-like gradient animations in the background.
- [scroll-reveal](https://lightswind.com/components/scroll-reveal): Advanced scroll-triggered text animation component with rotation, blur effects, and word-by-word stagger animations. Built with Framer Motion for smooth performance and customizable spring physics.
- [shiny-text](https://lightswind.com/components/shiny-text): Eye-catching text animation component with customizable shine effects, multiple directions, and smooth transitions. Perfect for headings, CTAs, and brand elements that need to stand out.
- [text-scroll-marquee](https://lightswind.com/components/text-scroll-marquee): A horizontally scrolling text marquee built with React, Motion One, and Tailwind CSS. It supports directional scrolling, optional scroll-based motion, delay, and full customization via props.
- [typing-text](https://lightswind.com/components/typing-text): A sleek animated typing component that reveals each character with a smooth shimmer effect. Ideal for hero sections, headers, or attention-grabbing intros. Built with React, Framer Motion, and Tailwind CSS.
- [rolling-text-3d](https://lightswind.com/components/rolling-text-3d): A premium 3D text rotation component that creates a 'Tube' rotation effect using GSAP. Each character rotates in a 3D cylindrical space for a high-impact cinematic feel.
- [video-text](https://lightswind.com/components/video-text): A versatile component that masks a video inside text, creating a dynamic and engaging visual effect. It allows customization of font properties and video playback, powered by React, Tailwind CSS, and Framer Motion for optional animations.
- [looping-words](https://lightswind.com/components/looping-words): An animated, professional looping words effect inspired by Osmo. It displays a list of words vertically and animates them upwards sequentially while highlighting the currently active word with an animated corner-bracket selector. Built with Framer Motion for smooth, seamless infinite scrolling.
- [text-particle-animation](https://lightswind.com/components/text-particle-animation): An interactive, physics-driven canvas particle text animation component. Text characters dissolve into reactive micro-particles that repel from mouse cursor coordinates with spring dynamics and explode on click.

### UI Elements (23)
- [alert](https://lightswind.com/components/alert): Displays a callout for user attention with various severity levels.
- [alert-dialog](https://lightswind.com/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response.
- [avatar](https://lightswind.com/components/avatar): An image element with a fallback for representing the user.
- [badge](https://lightswind.com/components/badge): A small visual indicator used to highlight an item, indicate status, or emphasize information.
- [button](https://lightswind.com/components/button): A clickable element that triggers an action or event when activated.
- [card](https://lightswind.com/components/card): A container that groups related content and actions.
- [carousel](https://lightswind.com/components/carousel): A carousel component with scroll controls and pagination.
- [chart](https://lightswind.com/components/chart): A versatile chart component built on Recharts that supports various chart types like line, bar, area, and pie charts.
- [collapsible](https://lightswind.com/components/collapsible): An interactive component that can be expanded or collapsed to reveal or hide content.
- [context-menu](https://lightswind.com/components/context-menu): Displays a context menu when the user right-clicks or uses the context menu key on an element.
- [dialog](https://lightswind.com/components/dialog): A modal window overlaid on the primary window, rendering content that requires user interaction.
- [dock](https://lightswind.com/components/dock): A customizable macOS-style dock component with proximity-based magnification, badges, frosted glass, separators, and full layout control.
- [drawer](https://lightswind.com/components/drawer): A drawer component that slides in from the edge of the screen.
- [dropdown-menu](https://lightswind.com/components/dropdown-menu): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [hover-card](https://lightswind.com/components/hover-card): A card that appears when hovering over a trigger element, providing additional information or context.
- [popover](https://lightswind.com/components/popover): A small overlay that appears relative to a trigger element, containing additional UI or information.
- [progress](https://lightswind.com/components/progress): Displays an indicator showing the completion progress of a task.
- [sheet](https://lightswind.com/components/sheet): A dialog that slides in from the edge of the screen, useful for side panels or drawers.
- [skeleton](https://lightswind.com/components/skeleton): A placeholder preview for content that is loading, reducing layout shift and improving perceived performance.
- [stepper](https://lightswind.com/components/stepper): A sleek animated increment/decrement stepper with spring physics, number-flip transitions, and boundary-aware disabled states.
- [table](https://lightswind.com/components/table): A responsive table component for displaying tabular data.
- [toast](https://lightswind.com/components/toast): A notification component used to provide feedback to the user about an action or system event.
- [tooltip](https://lightswind.com/components/tooltip): A popup that displays informative text when users hover over or focus on an element.

### Form Controls (13)
- [calendar](https://lightswind.com/components/calendar): A premium date picker component with high-fps animations, glassmorphism, and silky month transitions.
- [checkbox](https://lightswind.com/components/checkbox): A control that allows the user to toggle between checked and not checked.
- [command](https://lightswind.com/components/command): A command palette that provides keyboard-centric and search-enabled command execution.
- [form](https://lightswind.com/components/form): Building forms with React Hook Form and validation with Zod schema.
- [input](https://lightswind.com/components/input): A text input field that allows users to enter data.
- [label](https://lightswind.com/components/label): A form label component that can be associated with form controls to improve accessibility.
- [radio-group](https://lightswind.com/components/radio-group): A control that allows users to select a single option from a list of predefined options.
- [select](https://lightswind.com/components/select): Displays a list of options for the user to pick from—triggered by a button.
- [slider](https://lightswind.com/components/slider): Allows users to select a value or range from a given range.
- [switch](https://lightswind.com/components/switch): A control that allows users to toggle between checked and not checked.
- [textarea](https://lightswind.com/components/textarea): A multi-line text input field that allows users to enter longer form content.
- [toggle](https://lightswind.com/components/toggle): A two-state button that can be toggled on or off.
- [toggle-group](https://lightswind.com/components/toggle-group): A set of two-state buttons that can be toggled on or off.

### Layout (6)
- [accordion](https://lightswind.com/components/accordion): A vertically stacked set of interactive headings that each reveal a section of content.
- [aspect-ratio](https://lightswind.com/components/aspect-ratio): A container that maintains a specific aspect ratio for its content, useful for images, videos, and other media.
- [resizable](https://lightswind.com/components/resizable): A component that allows users to resize elements by dragging handles.
- [scroll-area](https://lightswind.com/components/scroll-area): A scrollable container with custom styled scrollbars, providing a consistent cross-browser experience.
- [separator](https://lightswind.com/components/separator): A horizontal or vertical line that visually separates content, useful for creating visual hierarchy and grouping related items.
- [tabs](https://lightswind.com/components/tabs): A set of layered sections of content that display one panel at a time.

### Navigation (4)
- [breadcrumb](https://lightswind.com/components/breadcrumb): A flexible, accessible breadcrumb navigation component built with React and TypeScript. It supports links, pages, separators, ellipsis, and custom child elements, allowing users to easily indicate their current location in a hierarchy.
- [navigation-menu](https://lightswind.com/components/navigation-menu): A responsive navigation component with flyout menus for site navigation.
- [pagination](https://lightswind.com/components/pagination): A fully accessible pagination component built with React and TypeScript. It provides navigation controls for multi-page content, including page numbers, previous/next buttons, and ellipsis for collapsed pages.
- [sidebar](https://lightswind.com/components/sidebar): A fully featured, animated, and accessible sidebar component system built with React, TypeScript, and Framer Motion. It supports collapsible behavior, active menu indicators, grouping, headers, footers, and smooth animations.

## Pro Components (103)

### Pro Components (82)
- [ai-fluid-blob](https://lightswind.com/components/ai-fluid-blob): A stunning WebGL OGL multi-strand chromatic liquid wave energy flow component with a glass refraction lens sphere. Custom WebGL shaders render real-time fluid energy strands and glass sphere optical distortion for AI voice assistants.
- [3d-animated-pin](https://lightswind.com/components/3d-animated-pin): An interaction mapping a card natively onto a 3D horizontal plane tilting toward the user. Features smooth mouse-tracking tilt physics and a pulsing animated pin indicator.
- [focused-3d-marquee](https://lightswind.com/components/focused-3d-marquee): A high-fps marquee displaying physical 3D app icons scaling dynamically across a central lens. Hover slows marquee and focuses icons into a crisp central zoom.
- [scroll-rotate-gallery](https://lightswind.com/components/scroll-rotate-gallery): A GSAP scroll-driven 3D sphere gallery rotating cards in full 3D space. Cards fan around a sphere surface as the user scrolls.
- [planet-system](https://lightswind.com/components/planet-system): A 3D procedural planet system with interactive lighting and customizable types. Renders a realistic planet with atmosphere, specular highlights, and orbiting moons.
- [signal-convergence](https://lightswind.com/components/signal-convergence): A 3D reactive data stream visualization built in Three.js. Renders streaming signal lines converging to a central hub node with interactive mouse tracking.
- [tech-stack-convergence](https://lightswind.com/components/tech-stack-convergence): 5-to-1 WebGL beam convergence animation connecting ecosystem icons to a hub node. Great for showcasing technology stacks in hero sections.
- [3d-cards-carousel](https://lightswind.com/components/3d-cards-carousel): Scroll-driven 3D coverflow cards carousel with high-fidelity perspective transitions. Cards rotate and scale based on scroll position.
- [3d-showcase-carousel](https://lightswind.com/components/3d-showcase-carousel): 3D rotating cylinder showcase carousel that pauses on hover and zooms into details. Displays items along a cylindrical path with smooth rotation.
- [split-image-grid](https://lightswind.com/components/split-image-grid): Clay-morphic split image display slicing a single image into a staggered 3D tile grid. On hover, tiles explode apart revealing the depth effect.
- [3d-arc-carousel](https://lightswind.com/components/3d-arc-carousel): 3D circular carousel fanning cards along a bottom-anchored arc pendulum path. Swipe or click to rotate through items.
- [3d-holographic-deck](https://lightswind.com/components/3d-holographic-deck): 3D layer showcase featuring stacked DOM elements separating into an exploded view. Ideal for showcasing layered architecture or design systems.
- [beam-flow](https://lightswind.com/components/beam-flow): A high-performance WebGL laser flow shader with dynamic fog turbulence, directional cursor tilt, and animated micro-wisp streaks.
- [tubelight-navbar](https://lightswind.com/components/tubelight-navbar): Navigation bar with dynamic tubelight glow effect following the active item. The glow smoothly transitions between nav items with a warm neon light aesthetic.
- [dynamic-navigation](https://lightswind.com/components/dynamic-navigation): Pill navigation utilizing DOM math to glide smooth highlights between items. The highlight pill smoothly slides and resizes to match the active item's dimensions.
- [animated-fire-glow](https://lightswind.com/components/animated-fire-glow): A high-performance WebGL procedural fire and ember wave glow background component. Features multi-wave Bezier flow dynamics, glowing pulse physics, film grain, and automatic light and dark theme palette switching.
- [animated-veil](https://lightswind.com/components/animated-veil): A high-performance WebGL procedural animated veil background overlay effect with light and dark theme switching.
- [cube-volume-background](https://lightswind.com/components/cube-volume-background): 3D procedural cube volume background with dynamic lighting. Renders an infinite field of illuminated cubes with depth and perspective.
- [electro-background](https://lightswind.com/components/electro-background): Dynamic electric lightning effects with procedural generation. Bolts fork and branch realistically with configurable intensity and color.
- [fire-shader](https://lightswind.com/components/fire-shader): Realistic procedural fire shader with customizable intensity and color palette. Uses WebGL GLSL shaders for GPU-accelerated fire simulation.
- [noise-cloud-background](https://lightswind.com/components/noise-cloud-background): Noise-based cloud background with interactive color mixing. Generates smooth organic cloud-like structures using layered Perlin noise.
- [orbit-trails-background](https://lightswind.com/components/orbit-trails-background): Animated glowing trails orbiting mouse cursor position. Particles follow elliptical orbits around the cursor with configurable trail lengths.
- [smoke-fire-background](https://lightswind.com/components/smoke-fire-background): Hybrid smoke and fire background effect with fluid motion. Combines particle-based fire with volumetric smoke for a dramatic effect.
- [star-glow-background](https://lightswind.com/components/star-glow-background): Starfield background with glowing particles and smooth animations. Stars twinkle and pulse with configurable density and glow intensity.
- [volumetric-fractal](https://lightswind.com/components/volumetric-fractal): Volumetric fractal background built with GLSL raymarching. Creates infinite depth optical illusions through recursive fractal geometry shaders.
- [meteors](https://lightswind.com/components/meteors): Shooting star particle effect simulating infinite distance into darkness. Meteorites streak across the screen with glowing trails and random intervals.
- [glowing-lines](https://lightswind.com/components/glowing-lines): Hypnotic neon lines undulating in 3D flythrough WebGL2 animation. Creates an infinite tunnel effect of glowing lines converging to a vanishing point.
- [scroll-star-effect](https://lightswind.com/components/scroll-star-effect): Cinematic star warp effect stretching with scroll velocity. Stars stretch into warp-speed lines based on how fast the user scrolls.
- [top-snow-background](https://lightswind.com/components/top-snow-background): Atmospheric snow header background with responsive wind sway. Snowflakes fall with realistic physics including wind direction and drift.
- [stadium-light-beams](https://lightswind.com/components/stadium-light-beams): An elite stadium light beams background component. Features customizable rising fiery light columns on left/right flanks, real-time mouse spotlight tracking, proximity-based individual beam surges, ambient radial flare, and full light and dark mode theme support.
- [particles-cursor](https://lightswind.com/components/particles-cursor): WebGL GPGPU transparent cursor particle system. Thousands of physics-simulated particles emerge and dissipate from cursor position.
- [slice-cursor](https://lightswind.com/components/slice-cursor): Elastic procedural trailing 2D Canvas cursor with kinetic fluid physics. The cursor leaves a slicing fluid trail that follows with spring-like elasticity.
- [magnetic-cursor](https://lightswind.com/components/magnetic-cursor): GSAP-powered magnetic cursor with inverse color blending. Elements near the cursor get attracted magnetically and the cursor blends colors inversely.
- [gooey-cursor](https://lightswind.com/components/gooey-cursor): Liquid blob trailing cursor effect using raw SVG Filters. The cursor leaves a gooey liquid trail that merges and separates organically.
- [text-trail-cursor](https://lightswind.com/components/text-trail-cursor): Spring-bound string following cursor with kinetic physics. A trail of characters follows the cursor in a physics-simulated chain.
- [evervault-card](https://lightswind.com/components/evervault-card): Encryption background effect tracking mouse coordinates to scramble text matrices. On hover, encrypted characters reveal content with a Matrix-like decode animation.
- [bento-grid](https://lightswind.com/components/bento-grid): High-demand masonry grid engine with responsive columns. A modern bento-style grid layout that arranges cards in an aesthetically pleasing irregular grid.
- [card-stack](https://lightswind.com/components/card-stack): Carousel of cards with dynamic scale offsets and structural depth ordering. Cards stack visually with parallax depth effect.
- [apple-dock](https://lightswind.com/components/apple-dock): Proximity-based icon navigation bar scaling elements natively based on depth. Icons magnify as the cursor approaches, mimicking macOS Dock behavior.
- [expandable-search](https://lightswind.com/components/expandable-search): Search icon expanding fluidly into interactive input container via Framer Motion. Smooth spring expansion with focus management.
- [typewriter-input](https://lightswind.com/components/typewriter-input): Input featuring letter-reveal keyframes and shaking feedback animation. Characters animate in with typewriter timing and shake on validation errors.
- [password-strength](https://lightswind.com/components/password-strength): Password field with strength meter mapping and security score feedback. Displays color-coded strength indicator and contextual requirements checklist.
- [otp-input](https://lightswind.com/components/otp-input): Multi-slot OTP input with automatic focus management and fake-caret animations. Each digit slot auto-advances focus on input.
- [tag-input](https://lightswind.com/components/tag-input): Animated token management field supporting tagging via keyboard. Tags animate in/out and can be removed with backspace or click.
- [smart-radio-group](https://lightswind.com/components/smart-radio-group): Selection interface utilizing background masks and iconography. Radio options display with animated highlight masks and icon support.
- [floating-label-input](https://lightswind.com/components/floating-label-input): Text field featuring mathematical label transforms and underline animations. The label floats above the input with smooth CSS transform on focus/fill.
- [file-upload](https://lightswind.com/components/file-upload): Drag-and-drop file upload interface with real-time list animations. Files animate into a live list as they are dropped or selected.
- [range-slider](https://lightswind.com/components/range-slider): Granular control field featuring interactive dynamic tooltips. A styled range input with a floating tooltip showing the current value.
- [sticky-scroll-layout](https://lightswind.com/components/sticky-scroll-layout): Scroll-driven layout pinning visual content while fading text nodes. Content stays sticky while corresponding text fades in/out during scroll.
- [timeline-layout](https://lightswind.com/components/timeline-layout): Vertical scrolling grid linked to an animated SVG path track. A timeline with animated connecting line that fills progressively on scroll.
- [parallax-scroll](https://lightswind.com/components/parallax-scroll): Masonry grid layout offsetting columns at different velocities. Creates depth through differential column scroll speeds.
- [hero-parallax](https://lightswind.com/components/hero-parallax): 3D scrolling hero grid tilting backwards in global space. As the page scrolls, the grid of images tilts back creating a dramatic entry effect.
- [container-scroll](https://lightswind.com/components/container-scroll): Device showcase layout translating and scaling isometric iPad chassis. The device transforms from an angled isometric view to full-screen as user scrolls.
- [focus-cards](https://lightswind.com/components/focus-cards): Masonry layout implementing sibling blur-states on hover. Hovering a card blurs all siblings to bring focus to the hovered card.
- [layout-grid](https://lightswind.com/components/layout-grid): Fluid grid engine expanding cards visually across container on click. Cards expand to reveal more content with smooth layout animations.
- [wobble-card](https://lightswind.com/components/wobble-card): Tilting card component relying on motion values and spring physics. Cards wobble and tilt realistically in response to mouse position.
- [dynamic-island](https://lightswind.com/components/dynamic-island): Apple-inspired layout morpher calculating structural boundaries. A UI element that smoothly morphs between different pill shapes, sizes, and liquid glassmorphism variants.
- [horizontal-scroll](https://lightswind.com/components/horizontal-scroll): Side-scrolling container intercepting vertical scroll for horizontal gallery. Scrolling vertically translates to horizontal content movement.
- [stacking-cards](https://lightswind.com/components/stacking-cards): Vertical scrolling layout where cards layer and scale down. Each card pins to the top and the next one stacks on top as user scrolls.
- [scroll-stack](https://lightswind.com/components/scroll-stack): Scroll-synchronized stacking layout transforming cards in 3D space. Cards stack and transform with depth as the user scrolls through the section.
- [animated-tooltip](https://lightswind.com/components/animated-tooltip): Avatar group tracking mouse movement and rotating labels dynamically. Hovering an avatar in a group shows a smooth animated tooltip.
- [cool-bento-effect](https://lightswind.com/components/cool-bento-effect): Expanding bento grid with Framer Motion layout physics. Grid cells expand and rearrange dynamically with spring animations.
- [circular-carousel](https://lightswind.com/components/circular-carousel): Infinite draggable circular carousel gallery with physics inertia. Drag to rotate items around a circle with realistic momentum.
- [direction-aware-hover](https://lightswind.com/components/direction-aware-hover): Hover effect calculating entry point of cursor to animate overlays. The overlay slides in from the direction the cursor entered the card.
- [exclusive-tab](https://lightswind.com/components/exclusive-tab): Liquid staggered highlight tab control powered by Framer Motion. Tab selection animates with a fluid sliding highlight underneath.
- [fancy-cards](https://lightswind.com/components/fancy-cards): Arc gallery of cards leveraging modern CSS offset paths. Cards arrange along a curved arc path with hover animations.
- [falling-sections](https://lightswind.com/components/falling-sections): Stacked collapsing panels utilizing GSAP pinned scroll mechanics. Section panels fall away as you scroll, revealing the next one beneath.
- [flying-bird-3d](https://lightswind.com/components/flying-bird-3d): Scroll-driven 3D bird model flying along a GSAP motion path. A 3D bird model follows a curved path as the user scrolls.
- [infinite-webgl-scroll](https://lightswind.com/components/infinite-webgl-scroll): Infinite 2D canvas WebGL scroll gallery with displacement physics. Images warp and distort as the canvas scrolls infinitely.
- [morph-carousel](https://lightswind.com/components/morph-carousel): WebGL-based carousel featuring noise-based morphing transitions. Images morph between each other with organic liquid-like transitions.
- [morphing-switch](https://lightswind.com/components/morphing-switch): Multi-level switch with fluid morphing sub-tier transitions. A switch that morphs its shape between states revealing nested controls.
- [shimmer-accordion](https://lightswind.com/components/shimmer-accordion): FAQ accordion revealed with gradient shimmer sweeps. Accordion items animate open with a shimmer effect across the content.
- [meteor-impact-effect](https://lightswind.com/components/meteor-impact-effect): Meteor impacts triggering particle explosions on border collision. Meteorites streak across the card border triggering explosion effects on impact.
- [meteor-impact-border](https://lightswind.com/components/meteor-impact-border): Glow meteor tail tracing perimeter border continuously. A glowing meteor travels along the card border leaving a luminous trail.
- [animated-meteors-link](https://lightswind.com/components/animated-meteors-link): A dynamic, high-performance meteor connection component connecting DOM elements with curved Bezier vector paths, shooting meteor trails, impact spark droplets, and interactive color themes.
- [animated-cart-button](https://lightswind.com/components/animated-cart-button): Interactive cart button with physical 3D drop animations. Items visually drop into the cart with a satisfying 3D bounce animation.
- [magnifying-zoom](https://lightswind.com/components/magnifying-zoom)
- [gooey-text](https://lightswind.com/components/gooey-text): Liquid typography transition effect with CSS combination filters. Text transitions between states with organic gooey liquid morphing.
- [scroll-ring-text](https://lightswind.com/components/scroll-ring-text): Kinetic ring of letters assembling via GSAP scroll tying. Letters arrange in a circular path and animate based on scroll position.
- [flip-words](https://lightswind.com/components/flip-words): Typography animation flipping through choices with physics bounds. Words flip in like cards with a 3D perspective flip effect.
- [text-reveal-card](https://lightswind.com/components/text-reveal-card): Mouse-tracking hover effect progressively revealing underlying text. Hovering reveals hidden text beneath with a spotlight effect.
- [text-generate-effect](https://lightswind.com/components/text-generate-effect): Cinematic staggered blur fade-in for statements. Words appear with a sequenced blur-to-sharp animation creating a cinematic text reveal.

## Pro Blocks (390)