# Lightswind UI > A comprehensive library of 198 Free components, 85 Pro components, and 390 Premium blocks (50 Animated Blocks across 16 Categories, 340 Professional Blocks across 58 Categories). - [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 (198) ### 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 (45) - [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-paragraph](https://lightswind.com/components/scroll-paragraph): A professional scroll-triggered typography component that reveals text paragraphs line-by-line while pinning the parent section, providing smooth GSAP-based scroll engagement like tracking websites. - [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 (10) - [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. - [3d-scroll-paragraph](https://lightswind.com/components/3d-scroll-paragraph): A premium 3D typography component that maps text onto a tilted back 3D plane, moving vertically on scroll. Replicates the cinematic feel of 'Star Wars' intros with true perspective and depth scaling. - [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. ### Miscellaneous Free - [ai-aurora-blob](https://lightswind.com/components/ai-aurora-blob) - [ai-gooey-blob](https://lightswind.com/components/ai-gooey-blob) - [ai-prompt](https://lightswind.com/components/ai-prompt) - [aurora-background](https://lightswind.com/components/aurora-background) - [dot-pattern](https://lightswind.com/components/dot-pattern) - [interactive-card-gallery](https://lightswind.com/components/interactive-card-gallery) - [liquid-fluid](https://lightswind.com/components/liquid-fluid) - [menubar](https://lightswind.com/components/menubar) - [toaster](https://lightswind.com/components/toaster) ## Pro Components (85) ### Pro Components (85) - [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. - [antigravity-background](https://lightswind.com/components/antigravity-background): Ring-particle canvas background inspired by Google Antigravity. Particles form circular rings that react to mouse movement with physics-based dispersion. - [stellar-vortex-background](https://lightswind.com/components/stellar-vortex-background): Mesmerizing interactive particle swirl nebula effect. A spiral vortex of colored particles that react to cursor movement creating a galactic flow. - [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. - [kinetic-flow-field](https://lightswind.com/components/kinetic-flow-field): Particle flow field relying on Math.sin physics and mouse interaction. Thousands of particles follow dynamic vector field patterns. - [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. ### Miscellaneous Pro - [beam-glow](https://lightswind.com/components/beam-glow) - [darkveil](https://lightswind.com/components/darkveil) - [driving-car-3d](https://lightswind.com/components/driving-car-3d) - [input-otp](https://lightswind.com/components/input-otp) - [meteors-beam](https://lightswind.com/components/meteors-beam) - [neural-veil](https://lightswind.com/components/neural-veil) - [scroll-video-player](https://lightswind.com/components/scroll-video-player) ## Blocks (390 Total — 50 Animated Blocks, 340 Professional Blocks) ### Animated Blocks (50 Blocks in 16 Categories) #### Animated 3D Blocks (9) - [animated-3dblock01](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock01): Infinite 3D Carousel — A stunning, high-performance 3D infinite carousel component built with React and GSAP. Features scroll-triggered animations, smooth color transitions, and overlapping panel effects. Perfect for immersive landing page showcases and portfolio galleries. - [animated-3dblock02](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock02): Levitating 3D Shapes — A mesmerizing hero background featuring floating, interactive geometric 3D shapes. Built with React Three Fiber performance in mind. - [animated-3dblock03](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock03): Interactive 3D Globe — A stunning, rotatable 3D globe with location markers. Perfect for visualizing global reach, server locations, or international teams. - [animated-3dblock04](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock04): 3D Laptop Scroll — A high-fidelity 3D laptop model that opens and closes based on scroll position. The screen content is fully customizable with your own images or video. - [animated-3dblock05](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock05): 3D Phone Showcase — A realistic 3D smartphone model for showcasing mobile app interfaces. Creates a premium, tangible feel for app landing pages. - [animated-3dblock06](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock06): Glassmorphic 3D Tunnel — An abstract 3D tunnel effect with glassmorphic materials and dynamic lighting. Creates a sense of depth and modern sophistication. - [animated-3dblock07](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock07): Particle Wave Field — A fluid, interactive particle wave simulation. Responses to mouse movement to create an engaging, organic background effect. - [animated-3dblock08](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock08): 3D Interactive Orbit Showcase — A mesmerizing 3D orbital feature showcase. Elements deconstruct and float into space based on scroll position, creating a deep, immersive spatial experience. - [animated-3dblock09](https://lightswind.com/blocks/animated-3d-blocks/animated-3dblock09): 3D Orbital Planet System — An elite, interactive 3D planet simulation powered by high-performance WebGL shaders. Dynamically morphs between terrestrial, gaseous, and stellar states with physics-based mouse interactions. Engineered for professional enterprise and space-tech aesthetics. #### Animated AI Prompt (2) - [animated-aiprompt01](https://lightswind.com/blocks/animated-ai-prompt/animated-aiprompt01): Animated AI Agent Prompt Box with Beam Glow — An interactive AI agent prompt input box featuring a WebGL laser beam glow along the border, specialist agent dropdown menu, attachment buttons, and quick-action prompt preset pills. - [animated-aiprompt02](https://lightswind.com/blocks/animated-ai-prompt/animated-aiprompt02): Stacked Multi-Border AI Prompt & Steer Controls — A stacked multi-border AI prompt card featuring a top steer context pill header, editable topic tags, agent & reasoning model selectors, voice mic input, and smooth Framer Motion animations. #### Animated Analytics (2) - [animated-analytics01](https://lightswind.com/blocks/animated-analytics/animated-analytics01): FinPulse Executive Analytics Dashboard — An executive financial analytics dashboard featuring a multi-section left navigation sidebar, 3 telemetry summary cards with mini bar sparklines, an interactive monthly usage bar chart with floating tooltips, and a transaction history log. - [animated-analytics02](https://lightswind.com/blocks/animated-analytics/animated-analytics02): FinPulse Ultimate 3-Column Executive Dashboard — An ultimate 3-column financial analytics workspace featuring a left collapsible navigation sidebar, 3 summary telemetry cards, an interactive 12-month usage bar chart, transaction log with authentic brand vector logos, metallic silver VISA card, and budget savings breakdown. #### Animated Authentication (3) - [animated-login05](https://lightswind.com/blocks/animated-auth/animated-login05): Animated Shield Glassmorphic Login Card — A high-converting React login card component with a floating security shield badge, animated rotating gradient background shader, full-rounded pill inputs, and social auth. Tailwind CSS & Next.js ready. - [animated-login06](https://lightswind.com/blocks/animated-auth/animated-login06): Animated SSO Dot Pattern Login Section — An elegant, modern React sign-in section featuring Lightswind UI dot background pattern accents, Single Sign-On (SSO) integration, full-rounded pill buttons, and responsive dark mode. - [animated-signup03](https://lightswind.com/blocks/animated-auth/animated-signup03): Split Screen Registration & Dashboard Testimonial — A conversion-focused React sign-up layout featuring a clean registration form on the left and a code-built interactive dashboard preview mockup with testimonial quote on the right. Tailwind CSS & Next.js ready. #### Animated Background (2) - [animated-background06](https://lightswind.com/blocks/animated-background/animated-background06): Chasing Sunsets 3D Diagonal Light Ribbons Background — An atmospheric animated React background block featuring 3D diagonal floating sunset light ribbons, customizable WebGL glint shader, cinematic typography, and responsive controls. - [animated-background07](https://lightswind.com/blocks/animated-background/animated-background07): Pixelated Orange Mosaic Grid Blur Gradient Background — An animated React background block featuring a pixelated warm orange mosaic grid matrix, dynamic canvas wave shimmer, interactive mouse hover highlights, and dual Light & Dark theme support. #### Animated Card (7) - [animated-card01](https://lightswind.com/blocks/animated-card/animated-card01): Interactive 3D Card Showcase — Premium interactive cards featuring 3D tilt effects and animated gradients. Built with Framer Motion for a tactile, high-end user experience. - [animated-card05](https://lightswind.com/blocks/animated-card/animated-card05): Neon Cybernetic Sales & Revenue Analytics Card — A professional card featuring a dynamic ASCII wave animation powered by Canvas. Smooth, lightweight, and perfect for data-heavy or developer-focused branding like Firecrawl. - [animated-card06](https://lightswind.com/blocks/animated-card/animated-card06): Gaussian Peak Conversion Analytics Card — An ultra-sleek, feature-packed product card block inspired by premium athletic & tech hardware showcases. Features 3D floating image hover effects, interactive color variant swatches, slider pagination, quick-view modal drawer, and full Dark/Light theme toggling. - [animated-card07](https://lightswind.com/blocks/animated-card/animated-card07): Fiery Sunset Revenue Flow Bar Analytics Card — Modular, high-density application cards for foundation model connectors, vector memory caches, platform security suites, and interactive compute deployment selection. - [animated-card02](https://lightswind.com/blocks/animated-card/animated-card02): Magic Card — A visually engaging card with video backgrounds that activate on hover, perfect for immersive content previews or featured items. - [animated-card03](https://lightswind.com/blocks/animated-card/animated-card03): ASCII Data Wave Card — An interactive card that expands to reveal detailed content and distinct visual states. Ideal for product features or detailed specifications. - [animated-card04](https://lightswind.com/blocks/animated-card/animated-card04): Animated E-Commerce Product Spotlight Card — An interactive card component with a mesmerizing pointer-tracking spotlight effect. Features glassmorphic borders that reveal themselves as you hover. #### Animated Career (1) - [animated-career01](https://lightswind.com/blocks/animated-career/animated-career01): Interactive Career Experience Timeline — An interactive career timeline featuring a draggable vertical ruler track, neon year spotlight curve, and detailed milestone card with telemetry stats and tech stack tags. #### Animated Connect & Integrations (2) - [animated-connect-01](https://lightswind.com/blocks/animated-connect/animated-connect-01): AI Integrations Connect Flow — An interactive, animated integration node flow connecting 15+ top SaaS applications into a unified AI RAG pipeline. - [animated-connect-02](https://lightswind.com/blocks/animated-connect/animated-connect-02): Hub & Spoke Central AI Orchestrator — An interactive hourglass hub-and-spoke integration block featuring shining metallic corner cards and animated Bezier vector rays. #### Animated Dashboard (2) - [animated-dashboard01](https://lightswind.com/blocks/animated-dashboard/animated-dashboard01): FinPulse Executive Analytics Dashboard — An executive financial analytics dashboard featuring a multi-section left navigation sidebar, 3 telemetry summary cards with mini bar sparklines, an interactive monthly usage bar chart with floating tooltips, and a transaction history log. - [animated-dashboard02](https://lightswind.com/blocks/animated-dashboard/animated-dashboard02): FinPulse Ultimate 3-Column Executive Dashboard — An ultimate 3-column financial analytics workspace featuring a left collapsible navigation sidebar, 3 summary telemetry cards, an interactive 12-month usage bar chart, transaction log with authentic brand vector logos, metallic silver VISA card, and budget savings breakdown. #### Animated Dropdown (1) - [animated-dropdown01](https://lightswind.com/blocks/animated-dropdown/animated-dropdown01): Command-K AI Research & Company Search Dropdown — An elite glassmorphic Command-K search & research dropdown component. Features an interactive search input pill with glowing amber/orange neon border beam flares, keyboard shortcuts (⌘K, ↑↓, ↵), brand item update badges, live category filter pills, and full Light/Dark mode support. #### Animated E-Commerce (1) - [animated-ecommercejacket01](https://lightswind.com/blocks/animated-ecommerce/animated-ecommercejacket01): Interactive Color Morphing Jacket Hero — Interactive jacket showcase featuring a high-FPS slide transition on color toggle, smooth background morphing, and size selector. #### Animated Features (1) - [animated-features-01](https://lightswind.com/blocks/animated-features/animated-features-01): Automated Financial & Payment Features Bento — An interactive 4-card Bento grid featuring marquee gateways, automated scheduling circuits, notification feeds, and real-time expense charts. #### Animated Forms (3) - [animated-login07](https://lightswind.com/blocks/animated-forms/animated-login07): Gravity Particle Electric Sign In Form — A state-of-the-art React sign-in card component featuring an interactive gravity particle electric button, SVG displacement filters, smooth hover state transitions, and 3-column social authentication buttons. - [animated-login08](https://lightswind.com/blocks/animated-forms/animated-login08): 3D Wavy Ripple Wave Sign In Form — An interactive React sign-in card component featuring a 3D animated WebGL concentric bottom wave ripple background, glowing glassmorphism layout, and official Lightswind UI BorderBeam. - [animated-login09](https://lightswind.com/blocks/animated-forms/animated-login09): Wavy Animated Glass Stripes Shader Sign In Form — An ultra-sleek React sign-in card component featuring a custom WebGL ShaderToy vertical waving glass stripes effect, glassmorphic card layout, and official Lightswind UI BorderBeam. #### Animated Hero (8) - [animated-hero17](https://lightswind.com/blocks/animated-hero/animated-hero17): Kynex AI Specialist Marketplace Hero — A high-converting startup waitlist launch hero featuring animated atmospheric stadium spotlight rays, live spot reservation counter, and instant invite email form. - [animated-hero21](https://lightswind.com/blocks/animated-hero/animated-hero21): Raycast Metallic Slanted Beams Launcher Hero — An interactive AI prompt crafting studio hero featuring live prompt parameter controls, output preview canvas, and instant token cost calculator. - [animated-hero18](https://lightswind.com/blocks/animated-hero/animated-hero18): Saturast Cosmic Audio Telemetry & Music SaaS Landing Hero — A futuristic developer launcher hero featuring glowing metallic slanted light beams, command bar search input, and keyboard shortcuts display. - [animated-hero20](https://lightswind.com/blocks/animated-hero/animated-hero20): StartupSprint Stadium Light Beams Waitlist Hero — An enterprise edge AI inference hero featuring global low-latency network map background, live throughput metrics, and developer API quick start terminal. - [animated-hero19](https://lightswind.com/blocks/animated-hero/animated-hero19): CoinOrb Concentric Stadium Ripple Crypto SaaS Hero — An AI specialist marketplace hero featuring interactive agent cards carousel, search filter bar, and live telemetry indexing indicators. - [animated-hero14](https://lightswind.com/blocks/animated-hero/animated-hero14): Synthex Autonomous AI Engine SaaS Hero — A high-converting Web3 & Crypto SaaS landing hero featuring glowing concentric stadium light ripples, live crypto ticker stats, and dual action CTAs. - [animated-hero15](https://lightswind.com/blocks/animated-hero/animated-hero15): GCORE AI Inference at the Edge Hero — An elite Mira-inspired AI agent marketplace hero block featuring a soft animated multi-color pastel & neon mesh gradient background, glassmorphic header, interactive 3D perspective feature cards, and interactive cluster deployment controls. - [animated-hero16](https://lightswind.com/blocks/animated-hero/animated-hero16): NeuralCraft AI Prompt Builder Hero — An ultra-premium cosmic audio telemetry hero featuring animated starfield space particle background, floating 3D vinyl album sleeve artwork, and real-time audio waveform visualizer. #### Animated Menubar (2) - [animated-menubar01](https://lightswind.com/blocks/animated-menubar/animated-menubar01): Morphing Curved Cutout Notch Menubar — An animated floating menubar block featuring an organic Bezier curve cutout notch that glides smoothly with Lenis-style spring motion across active menu tabs. - [animated-menubar02](https://lightswind.com/blocks/animated-menubar/animated-menubar02): iOS Labeled Cutout Notch Pill Menubar — An animated iOS-style bottom floating pill menubar featuring tab labels, organic Bezier cutout notch glide, elevated active circle indicator, and bottom home bar element. #### Animated Sidebar (4) - [animated-sidebar08](https://lightswind.com/blocks/animated-sidebar/animated-sidebar08): Nextmove Animated Relational Sidebar Navigation — An elite Nextmove-inspired animated SaaS sidebar component. Features Framer Motion layoutId smooth sliding active tab highlight with glowing pink neon indicator, collapsible/expandable sidebar toggle physics, workspace switcher dropdown, dynamic view switching, and full Light/Dark mode support. - [animated-sidebar09](https://lightswind.com/blocks/animated-sidebar/animated-sidebar09): Glossy Multi-Border Collapsible Sidebar Navigation — An elite glassmorphic collapsible sidebar navigation block featuring dual collapsed icon rail and expanded views, glossy multi-border menu items with Framer Motion layout animations, active pill highlights, keyboard toggle shortcuts, and a live activity surge telemetry widget. - [animated-sidebar10](https://lightswind.com/blocks/animated-sidebar/animated-sidebar10): Interactive Career Experience Timeline Sidebar — An interactive career timeline featuring a draggable vertical ruler track, neon year spotlight curve, and detailed milestone card with telemetry stats and tech stack tags. - [animated-sidebar11](https://lightswind.com/blocks/animated-sidebar/animated-sidebar11): Apple iOS Liquid Glass Animated Pill Sidebar — An authentic Apple iOS VisionOS 3D Liquid Glass vertical pill sidebar block featuring specular crystal glare highlights, morphing liquid active bubble indicators, logo hover Open/Close toggle, and dual Light & Dark theme support. ### Professional Blocks (340 Blocks in 58 Categories) #### Animated Analytics (14) - [analyticschart01](https://lightswind.com/blocks/animated-analytics/analyticschart01): Animated Revenue Chart — A premium SVG line and area chart featuring dynamic path-drawing animations entirely powered by Framer Motion. Uses an interactive hover grid for rich tooltips. - [analyticspie01](https://lightswind.com/blocks/animated-analytics/analyticspie01): Dynamic Donut Analytics — A structurally pure SVG donut chart showing traffic acquisition. Computes strokes dynamically and features an active legend targeting specific data slices. - [analytics03](https://lightswind.com/blocks/animated-analytics/analytics03): Enterprise Infrastructure Monitor — Real-time enterprise infrastructure monitoring dashboard. Features global heatmaps, server health status, and network latency graphs. Built for high-scale applications requiring instant data feedback. - [analytics04](https://lightswind.com/blocks/animated-analytics/analytics04): Global Revenue Heatmap — An interactive geographical heatmap for tracking real-time global revenue distribution. Features localized data drill-downs and animated growth indicators for high-level business intelligence. - [analytics05](https://lightswind.com/blocks/animated-analytics/analytics05): LLM Intelligence Engine — Premium real-time computational monitoring and sandbox calculator dashboard for multi-model LLM inference gateways. - [analytics06](https://lightswind.com/blocks/animated-analytics/analytics06): Neural Analytics Core — A professional - [analytics07](https://lightswind.com/blocks/animated-analytics/analytics07): Conversion Engine Manifest — A high-fidelity conversion and traffic analytics dashboard. Features a sophisticated funnel visualization, vertical traffic source bars, and status-aware infrastructure headers. - [analytics08](https://lightswind.com/blocks/animated-analytics/analytics08): User Behavior Tracker — A high-fidelity realtime behavior analytics dashboard monitoring page sessions, bounce rates, interaction event streams, and device saturation. - [analytics09](https://lightswind.com/blocks/animated-analytics/analytics09): Portfolio Asset Tracker — A high-fidelity realtime investment portfolio asset tracker. Features allocation pie charts, growth trend lines, and transfer transaction ledgers. - [analytics10](https://lightswind.com/blocks/animated-analytics/analytics10): Global Delivery Fleet Monitor — A high-fidelity realtime logistics delivery fleet monitor. Features regional performance bar charts, load allocation radial charts, and telemetry tracking lists. - [analytics11](https://lightswind.com/blocks/animated-analytics/analytics11): SaaS Subscription Tracker — A high-fidelity realtime subscription and SaaS revenue monitor. Features MRR growth area charts, payback cohorts, active logos metrics, and expansion activity ledgers. - [analytics12](https://lightswind.com/blocks/animated-analytics/analytics12): Threat Intelligence Monitor — A high-fidelity realtime cybersecurity threat intelligence monitor. Features alert volume area charts, security compliance radial charts, and threat stream logs. - [analytics13](https://lightswind.com/blocks/animated-analytics/analytics13): API Gateway Telemetry Monitor — A high-fidelity realtime developer platform API usage monitor. Features request volume area charts, latency percentile bar charts, and routing gateway logs. - [analytics14](https://lightswind.com/blocks/animated-analytics/analytics14): Kubernetes Cluster Optimizer — A high-fidelity realtime Kubernetes pod and cloud node optimizer. Features bandwidth area charts, namespace CPU request bar charts, and active pods logs. #### Animated App Shell & Layouts (5) - [app-shell-01](https://lightswind.com/blocks/animated-app-shell/app-shell-01): Vortex OS Enterprise Application Shell — A production-grade application shell layout featuring collapsible grouped sidebar navigation, breadcrumbs, region selectors, summary cards, and live request velocity charts. - [app-shell-02](https://lightswind.com/blocks/animated-app-shell/app-shell-02): Neural AI Developer Platform Shell — A developer platform workspace shell featuring top control bars, left dock sidebars, model inference routers, token velocity charts, and vector database memory controls. - [app-shell-03](https://lightswind.com/blocks/animated-app-shell/app-shell-03): Cybersecurity SOC Command Shell — A production-grade Security Operations Center command shell layout featuring threat posture alert banners, SIEM event velocity charts, and active threat vector triage. - [app-shell-04](https://lightswind.com/blocks/animated-app-shell/app-shell-04): SaaS Billing & Revenue Operations Shell — An enterprise revenue operations workspace featuring tenant subscription ledgers, MRR trajectory graphs, billing cycle selectors, and invoice management controls. - [app-shell-05](https://lightswind.com/blocks/animated-app-shell/app-shell-05): Kubernetes Workload Mesh Shell — A multi-cloud Kubernetes service mesh command shell featuring cluster switcher dropdowns, container pod replica health graphs, and namespace resource allocation. #### Animated Authentication (11) - [authlogin01](https://lightswind.com/blocks/animated-auth/authlogin01): Pro Visual Login — An elite split-screen authentication portal with high-fidelity visual context, social providers, and secure multi-input fields. Optimized for enterprise SaaS and developer workflows. - [authlogin02](https://lightswind.com/blocks/animated-auth/authlogin02): Glassmorphic Magic Link Portal — A high-security passwordless authentication gate featuring live email dispatch sequences, social identity providers (Google, GitHub), and glowing background orbs. - [authpasskey01](https://lightswind.com/blocks/animated-auth/authpasskey01): Biometric Passkey Sign-In Gateway — A futuristic biometric Passkey / WebAuthn sign-in gate featuring visual TouchID fingerprint scanning animation, loading synchronization states, and FIDO2 compliance indicators. - [authworkspace01](https://lightswind.com/blocks/animated-auth/authworkspace01): Workspace & Tenant Single Sign-On Route Resolver — A workspace resolver screen allowing users to input company subdomains to locate active tenant endpoints. Automatically routes verified tenants to enterprise SSO login options. - [authmfasetup01](https://lightswind.com/blocks/animated-auth/authmfasetup01): Interactive Multi-Factor Authenticator Setup Flow — A 2FA onboarding experience with interactive steps for QR code app linking, recovery backup codes extraction, and live OTP verification confirmation. - [authsignup01](https://lightswind.com/blocks/animated-auth/authsignup01): Multi-Step Onboarding — A sophisticated triple-phase registration experience with profile, workspace, and team invitation layers. Features interactive progress tracking and real-time validation. - [auth2fa01](https://lightswind.com/blocks/animated-auth/auth2fa01): Secure 2-Step Gate — A high-security two-factor verification block with timed OTP input sequences, biometric fallback options, and rapid re-authentication logic. - [authotp01](https://lightswind.com/blocks/animated-auth/authotp01): Magic Access Portal — A passwordless authentication experience utilizing magic links and secure one-time passcodes. Features immersive inbox-check transitions and email app deep-linking. - [authpasswordreset01](https://lightswind.com/blocks/animated-auth/authpasswordreset01): Recovery Flow Matrix — A robust multi-phase password recovery system. Handles secure link requests, complex password application with validation, and comprehensive success confirmation. - [authsso01](https://lightswind.com/blocks/animated-auth/authsso01): Enterprise SSO Portal — A dedicated Single Sign-On portal enabling users to log in with okta, azure, saml, or custom workspace domains. - [authsession01](https://lightswind.com/blocks/animated-auth/authsession01): Device & Active Session Controller — A professional security console listing all authorized login devices and browser locations with interactive single-click revocation actions. #### Animated Background (5) - [background02](https://lightswind.com/blocks/animated-background/background02): Procedural Fire Shader — A highly optimized, fully procedural WebGL fire simulation with interactive fluid dynamics. Built with native WebGL, React, and GSAP for a premium zero-lag experience. - [background03](https://lightswind.com/blocks/animated-background/background03): Falling Aether Beams — A professional vertical beam effect system. High-performance energy trails fall smoothly across the screen, creating a high-tech corporate and SaaS aesthetic with deep contrast. - [background04](https://lightswind.com/blocks/animated-background/background04): Geometric Connection Grid — A neat, tech-focused background featuring interactive floating nodes with dynamic connection lines. Built with Canvas API for extreme performance, reacting subtly to mouse proximity for a professional high-tech feel. - [background05](https://lightswind.com/blocks/animated-background/background05): Orbital Canvas Background — A pure, high-performance 3D planet background powered by WebGL shaders. Dynamically morphs and responds to user movement, providing a high-end cosmic environment for any landing page. - [background01](https://lightswind.com/blocks/animated-background/background01): Liquid Surface Background — A mesmerizing interactive liquid distortion background powered by WebGL. Features dynamic color schemes, interactive touch repulsion, and a premium GUI for color picking built with GSAP and Framer Motion. #### Animated Card (1) - [card08](https://lightswind.com/blocks/animated-card/card08): AI Architect & Executive Profile Suite Cards — High-density executive profile cards featuring avatar status badges, 3-column cluster SLA metrics, managed infrastructure allocations, and interactive advisory proposals. #### Animated E-Commerce (9) - [ecoproduct01](https://lightswind.com/blocks/animated-ecommerce/ecoproduct01): Product Detail Gallery — A gorgeous, high-converting product detail view. Features a large image gallery, seamless variant selection pills, and trust badges. - [ecocart01](https://lightswind.com/blocks/animated-ecommerce/ecocart01): Shopping Cart Summary — A beautifully animated cart slide-out UI. Allows users to effortlessly adjust quantities, view subtotal calculations, and proceed to checkout. - [ecocheckout01](https://lightswind.com/blocks/animated-ecommerce/ecocheckout01): Multi-step Checkout — A high-fidelity animated checkout flow for e-commerce. Seamlessly handles Address, Payment, and Success states with beautiful Spring animations and Apple Pay mockups. - [ecocategorygrid01](https://lightswind.com/blocks/animated-ecommerce/ecocategorygrid01): Smart Category Hub — A premium horizontal category showcase featuring high-impact imagery, ambient lighting hover states, and dynamic item counters for ecommerce navigations. - [ecoorderhistory01](https://lightswind.com/blocks/animated-ecommerce/ecoorderhistory01): Enterprise Order Dashboard — A highly-detailed order management ledger for customer accounts. Includes professional status tracking, CSV exports, and interactive shipment details. - [ecowishlist01](https://lightswind.com/blocks/animated-ecommerce/ecowishlist01): Curated Wishlist Board — An elite wishlist experience featuring interactive product cards, rating visualizers, and streamlined - [ecoproductcomparison01](https://lightswind.com/blocks/animated-ecommerce/ecoproductcomparison01): Specifications Matrix — A high-end product comparison table with detailed hardware specs, neural feature toggles, and integrated purchase CTAs for elite product lines. - [ecoreviewstats01](https://lightswind.com/blocks/animated-ecommerce/ecoreviewstats01): Verified Feedback Hub — An advanced customer reviews dashboard featuring metric distribution charts, filtered recent insights, and high-fidelity user sentiment indicators. - [ecoinventorytracker01](https://lightswind.com/blocks/animated-ecommerce/ecoinventorytracker01): Admin Telemetry Center — A specialized internal inventory management block for tracking SKU performance, stock levels, and automated restock sequences across supply chains. #### Animated Features (10) - [feature01](https://lightswind.com/blocks/animated-features/feature01): Bento Feature Grid — Modern Bento box style feature grid. A trendy, modular layout specifically designed to showcase multiple product features in a visually engaging and organized manner. - [feature02](https://lightswind.com/blocks/animated-features/feature02): Bento Feature Grid — A trendy Bento-box style grid layout featuring mixed card sizes, hover lifts, and integrated icon accents. Perfect for explaining complex product features simply. - [feature03](https://lightswind.com/blocks/animated-features/feature03): Sticky List Features — A sophisticated feature comparison layout with a sticky sidebar navigation and scrolling content area. Ideal for detailed product tours and technical deep dives. - [feature04](https://lightswind.com/blocks/animated-features/feature04): Interactive Sandbox Feature — An advanced feature block with an interactive playground area. Allows users to toggle states or view different configurations of a product feature live. - [feature05](https://lightswind.com/blocks/animated-features/feature05): Code-First Feature Grid — A technical feature showcase designed for developer tools. Integrates syntax-highlighted code snippets alongside benefit descriptions to prove technical capability. - [feature06](https://lightswind.com/blocks/animated-features/feature06): Bento Grid Ecosystem — A comprehensive Bento-style grid for displaying a product ecosystem. Mixes icon cards, text blocks, and small previews to create a cohesive overview. - [feature07](https://lightswind.com/blocks/animated-features/feature07): Tiered Service Comparison — A professional feature comparison matrix designed for complex service offerings. Uses a clean, structured layout to help users evaluate plans and identify the best value proposition. - [feature08](https://lightswind.com/blocks/animated-features/feature08): Engineered Depth Bento — A trendy bento-style feature grid with depth-optimized cards, hover interactions, and professional icon integration. - [feature09](https://lightswind.com/blocks/animated-features/feature09): Premium Services Matrix — A sophisticated, high-end feature grid designed for digital agencies and consulting firms. Features abstract gradients, clean icons, and a strong call-to-action block. - [feature10](https://lightswind.com/blocks/animated-features/feature10): Ecosystem Beam Hub — A highly professional and interactive ecosystem diagram. Features glowing energy beams simulating power supply travelling to a centralized core. #### Animated Forms (9) - [login01](https://lightswind.com/blocks/animated-forms/login01): Professional Auth Login — A production-ready login form featuring social authentication providers (Google, GitHub), secure password toggles, and a refined glassmorphic aesthetic. Fully accessible and responsive. - [signup01](https://lightswind.com/blocks/animated-forms/signup01): Minimalist Multi-step Signup — A streamlined sign-up experience focusing on reducing friction. ideal for SaaS onboarding with clear progress indication and error handling. - [login02](https://lightswind.com/blocks/animated-forms/login02): Visual Split Login — A visually striking split-screen login page. Combines a clean authentication form with a high-fidelity image or branded content area to reinforce brand identity. - [contactform02](https://lightswind.com/blocks/animated-forms/contactform02): Elite Contact Dispatch — A premium, split-column contact form featuring corporate detail cards, voice dispatch info, and a high-converting message manifest area. - [feedbackform01](https://lightswind.com/blocks/animated-forms/feedbackform01): System Feedback Hub — A professional interactive feedback widget with star rating micro-animations, secure data manifest, and immersive success/exit states. - [searchform01](https://lightswind.com/blocks/animated-forms/searchform01): Advanced Discovery Engine — A high-fidelity search filter board featuring animated expansion logic, system attribute badges, and pro-discovery command tips. - [login03](https://lightswind.com/blocks/animated-forms/login03): Glossy Cyberpunk Sign-In — A dark-themed glassmorphic auth form with gradient integrated input pill, floating top labels, and social authentication. - [login04](https://lightswind.com/blocks/animated-forms/login04): Golden Flare & Dot Matrix Sign-In — A glassmorphic auth card featuring top-left amber glow flare, top-right dot matrix grid, email input icon, and warm gold button elements. - [signup02](https://lightswind.com/blocks/animated-forms/signup02): Split Spotlight Sign-Up Wizard — A split-screen registration layout featuring a deep purple spotlight onboarding step visualizer on the left and a responsive sign-up form on the right. #### Animated Hero (13) - [hero11](https://lightswind.com/blocks/animated-hero/hero11): SaaS AI Sales Hero with Animated Dashboard — A premium dark-themed Tailwind CSS hero block designed for SaaS landing pages. Features a glowing orange horizon backdrop, brand marquee, announcement badge, and an interactive visitor telemetry dashboard mockup. - [hero10](https://lightswind.com/blocks/animated-hero/hero10): SaaS Developer Command Center — An elite, high-converting marketing hero section designed for developer platforms and SaaS command centers. Features custom serif typography, a glassmorphic partner brand marquee, a floating announcement badge, and a gorgeous painterly landscape footer. - [hero12](https://lightswind.com/blocks/animated-hero/hero12): SaaS Landing Hero with Interactive CSS Glowing Dome — A high-performance CSS-only dark-themed hero section. Replaces background images with pure Tailwind glowing orange dome gradients, background drift stars, and an interactive 3D tilt sales dashboard preview. - [hero13](https://lightswind.com/blocks/animated-hero/hero13): Premium RAW Video Background Hero (VEX) — A cinematic hero section with full-screen autoplaying video, liquid glass navigations/panels, and staggered character-by-character typography entrance animations. Perfect for design studios, high-end portfolios, and vision-driven ventures. - [hero01](https://lightswind.com/blocks/animated-hero/hero01): Creative Agency Hero — A bold, visually striking hero section designed for creative agencies. Features irregular grid layouts and large typography to make a strong first impression. - [hero02](https://lightswind.com/blocks/animated-hero/hero02): Modern Landing Hero — A high-conversion landing page hero with glassmorphic cards and smooth entrance animations. Optimized for SaaS and technology products. - [hero09](https://lightswind.com/blocks/animated-hero/hero09): Far Edge Hero Section — An elite, cosmic-scale hero section featuring a world-class 3D planet as its visual centerpiece. Pairs stunning WebGL visuals with bold, black-box typography and a high-impact data-driven stat grid. Perfect for high-tech SaaS and Web3 platforms. - [hero03](https://lightswind.com/blocks/animated-hero/hero03): Immersive Centered Hero — A commanding centered hero section with ambient background gradients and a featured dashboard preview. Designed to maximize initial user engagement. - [hero04](https://lightswind.com/blocks/animated-hero/hero04): Split Impact Hero — A high-conversion split screen hero section. Combines a clear value proposition with a dedicated media area, trust badges, and a floating testimonial for immediate social proof. - [hero05](https://lightswind.com/blocks/animated-hero/hero05): SaaS Dashboard Hero — A premium hero section featuring a 3D-tilted dashboard mockup. Designed to instantly communicate - [hero06](https://lightswind.com/blocks/animated-hero/hero06): Split Media Conversion Hero — A high-converting split-screen hero section pairing immersive media (video/image) with sharp, benefit-driven copy. Optimized for SaaS landing pages to drive immediate user action. - [hero07](https://lightswind.com/blocks/animated-hero/hero07): Universal Gravity Hero — A commanding centered hero section with orbiting elements, premium glassmorphism, and high-impact social proof. - [hero08](https://lightswind.com/blocks/animated-hero/hero08): Enterprise SaaS Hero — A highly professional, dark-themed hero section optimized for B2B tech products. Features a large interactive app mockup and subtle glowing mesh gradients. #### Animated Scroll (1) - [scroll01](https://lightswind.com/blocks/animated-scroll/scroll01): Infinite Scroll Gallery — A dual-direction infinite scrolling gallery synchronized to the user #### Animated Sidebar (7) - [sidebar01](https://lightswind.com/blocks/animated-sidebar/sidebar01): Modern Collapsible Sidebar — A clean, responsive dashboard sidebar with collapsible state, smooth animations, and integrated user profile section. Built with Framer Motion for premium feel. - [sidebar02](https://lightswind.com/blocks/animated-sidebar/sidebar02): Pro Workspace Sidebar — A high-end, responsive sidebar supporting both light and dark modes. Features nested folders, workspace switcher, and glassmorphic details. Perfect for SaaS apps. - [sidebar03](https://lightswind.com/blocks/animated-sidebar/sidebar03): Dual Context Sidebar — An advanced, dual-column sidebar layout. Features a primary context rail for switching between major apps/workspaces and a secondary panel for detailed navigation. - [sidebar04](https://lightswind.com/blocks/animated-sidebar/sidebar04): Minimal Rail Navigation — A high-performance icon-only sidebar rail for complex SaaS applications. Features multi-state tooltip logic, hover-active pill mechanics, and integrated system telemetry. - [sidebar05](https://lightswind.com/blocks/animated-sidebar/sidebar05): Dark Console Sidebar — A professional, dark-console sidebar console for enterprise SaaS. Features hierarchical menu groups, active pill transitions, and a built-in search manifest and system status indicators. - [sidebar06](https://lightswind.com/blocks/animated-sidebar/sidebar06): Glassmorphic Pro Sidebar — A professional, spring-animated glassmorphic sidebar for complex dashboards. Features hierarchical navigation groups, shared element transitions (LayoutGroup), and a full dashboard frame mockup. - [sidebar07](https://lightswind.com/blocks/animated-sidebar/sidebar07): Protocol Enterprise Console — A high-fidelity enterprise console mockup with a custom floating toggle. Features a protocol-inspired monochromatic brand identity, nested action states, and a status-aware header system. #### AdTech & Analytics (6) - [adcreativeheatmap01](https://lightswind.com/blocks/ad-tech/adcreativeheatmap01): Visual Creative Performance Heatmap — A data-driven heatmap for analyzing visual attention and CTR performance across different ad creatives. - [conversionfunnel01](https://lightswind.com/blocks/ad-tech/conversionfunnel01): Multi-Touch Attribution Funnel — A comprehensive visualization of the conversion funnel with multi-touch attribution modeling and drop-off analysis. - [audienceinsights01](https://lightswind.com/blocks/ad-tech/audienceinsights01): Deep Audience Segment Radar — A high-fidelity visualization of user demographics, interests, and behavioral segments with overlap analysis. - [biddingoptimizer01](https://lightswind.com/blocks/ad-tech/biddingoptimizer01): Real-time RTB Bidding Monitor — A low-latency dashboard for monitoring real-time bidding auctions, win rates, and bid price distribution. - [adperformance01](https://lightswind.com/blocks/ad-tech/adperformance01): Global Ad Performance Radar — A comprehensive dashboard for monitoring ad spend, CTR, and conversion rates across different geographic regions and platforms. - [campaignmanager01](https://lightswind.com/blocks/ad-tech/campaignmanager01): Campaign Creative Manager — An intuitive workspace for managing multiple marketing campaigns, creative assets, and A/B test variations. #### AI & Neural (8) - [aimodelcompare01](https://lightswind.com/blocks/ai/aimodelcompare01): Neural Model Matrix — A premium model comparison dashboard for selecting LLM tiers. Includes interactive badges, latency stats, and cost metrics. - [aipromptclassic02](https://lightswind.com/blocks/ai/aipromptclassic02): Floating AI Copilot Prompt — An expandable, glassmorphic floating prompt bar for executing inline AI commands, generating images, and querying code. - [aichat02](https://lightswind.com/blocks/ai/aichat02): Split-View Document Analyst — A dual-pane interface allowing users to view source documents on the left while conversing with a specialized AI analyst on the right. - [aichat01](https://lightswind.com/blocks/ai/aichat01): Pro AI Chat Interface — A sleek, black-and-white professional AI chat interface. Features smooth Framer Motion animations, typing indicators, and a premium neural engine aesthetic. - [aipromptclassic01](https://lightswind.com/blocks/ai/aipromptclassic01): Magic AI Prompt Area — A high-end AI prompt input field with immersive motion effects and ambient glow. Designed to capture attention and provide a premium generative experience. - [aiworkflow01](https://lightswind.com/blocks/ai/aiworkflow01): Neural Engine Pipeline — A sophisticated visual workflow for AI pipelines. Illustrates the journey from data ingestion to code synthesis with stunning motion and premium typography. - [aiagentpool01](https://lightswind.com/blocks/ai/aiagentpool01): Agent Matrix Controller — A professional UI for managing multiple AI agents and models. Features real-time status indicators, connecting lines, and detailed statistical breakdowns per node. - [aiconfig01](https://lightswind.com/blocks/ai/aiconfig01): Neural Model Configurator — A sleek configuration panel for adjusting AI parameters like Temperature and Max Tokens. Includes interactive custom sliders and a tabbed navigation system. #### AI Agents (6) - [ai-agents-01](https://lightswind.com/blocks/ai-agents/ai-agents-01): Autonomous Agent Operations Hub — A production-grade AI agent control panel featuring real-time throughput metrics, approval backlogs, incident logs, and interactive run queue management. - [ai-agents-02](https://lightswind.com/blocks/ai-agents/ai-agents-02): Agentic Workflow & Chain Studio — An orchestration studio for multi-agent DAG execution flows, prompt memory inspection, RAG vector retrieval, and multi-model benchmark performance. - [ai-agents-03](https://lightswind.com/blocks/ai-agents/ai-agents-03): Swarm Fleet Command & P2P Mesh Topology — A distributed agent cluster control deck featuring interactive SVG network topology maps, inter-agent P2P payload streams, and real-time node health monitoring. - [ai-agents-04](https://lightswind.com/blocks/ai-agents/ai-agents-04): Multi-Agent Chat Studio & Reasoning Workspace — An interactive AI agent chat console featuring collapsible thought reasoning trees, tool execution call cards, session memory, and live tool call inspection. - [ai-agents-05](https://lightswind.com/blocks/ai-agents/ai-agents-05): Agent Memory Vault & Vector Knowledge Base — An enterprise vector store memory console featuring cosine similarity metrics, namespace tabs, live chunk inspectors, and memory retention policies. - [ai-agents-06](https://lightswind.com/blocks/ai-agents/ai-agents-06): Autonomous Tool Approval & Safety Guardrails Deck — A Human-in-the-Loop (HITL) agent tool approval deck featuring risk threshold sliders, automated sandbox policies, and security audit trails. #### AI Analytics (8) - [aimetrics01](https://lightswind.com/blocks/ai-analytics/aimetrics01): LLM Operations Overview — A comprehensive dashboard for tracking LLM metrics, token usage, performance success rates, and dynamic fallback monitoring across multiple neural models. - [aitracker01](https://lightswind.com/blocks/ai-analytics/aitracker01): VectorStore Index Manager — Real-time analytics for RAG infrastructure. Monitors multiple vector database nodes, ingestion rates, semantic cache hits, and embedding latency metrics. - [aimetrics02](https://lightswind.com/blocks/ai-analytics/aimetrics02): Cluster Telemetry Console — A professional high-fidelity AI metrics console. Features region-specific inference latency tracking (BarChart), a real-time event stream manifest, and detailed infrastructure telemetry. - [aimetrics03](https://lightswind.com/blocks/ai-analytics/aimetrics03): AI Operations & Cost Matrix — A premium AI analytics dashboard designed for monitoring LLM operations. Features real-time generated token counters, an interactive dynamic model cost estimator with range sliders, and active ingress node tables. - [aimetrics04](https://lightswind.com/blocks/ai-analytics/aimetrics04): Generative AI Token Throughput & Cost Analytics — An enterprise token usage analytics dashboard featuring dynamic budget sliders, team tabs, search filtering, and API key consumption tables. - [aimetrics05](https://lightswind.com/blocks/ai-analytics/aimetrics05): Neural Inference Latency & SLA Monitor — A real-time latency SLA monitoring console featuring P50/P95/P99 percentile selectors, anomaly filtering switches, and endpoint SLA telemetry roster tables. - [aimetrics06](https://lightswind.com/blocks/ai-analytics/aimetrics06): Generative AI Prompt Token Distribution & Cost Heatmap — A prompt token length distribution matrix featuring prompt category dropdowns, context ceiling sliders, semantic cache toggles, and prompt telemetry tables. - [aimetrics07](https://lightswind.com/blocks/ai-analytics/aimetrics07): Autonomous Guardrail Security & Prompt Injection Analytics — An enterprise LLM security guardrail telemetry console tracking jailbreak attempt rates, toxicity scores, PII redaction metrics, and blocked payload logs. #### AI Search (5) - [aisearch01](https://lightswind.com/blocks/ai-search/aisearch01): Intelligent AI Search — A highly interactive search overlay designed for AI documentation and queries. Features command-palette style navigation, quick filters, and intelligent suggestions. - [aisearch02](https://lightswind.com/blocks/ai-search/aisearch02): Perplexity-Style AI Search — A professional high-fidelity Perplexity-style AI search dashboard. Features source citations, real-time synthesized summaries, inline code previews, and follow-up prompts. - [aisearchcommand01](https://lightswind.com/blocks/ai-search/aisearchcommand01): AI Command Palette — A gorgeous, spotlight-style Command+K menu interface. Includes mapped keyboard navigation, rapid suggestion chips, and categorized AI action prompts. - [aisearchask01](https://lightswind.com/blocks/ai-search/aisearchask01): AI Google Landing Page — A gorgeous, centered conversational AI search that streams typewritten answers. Features background orbs, intelligent suggestion badges, and interactive copy/share actions. - [aisearchcode01](https://lightswind.com/blocks/ai-search/aisearchcode01): Developer Code Search — A premium dark-mode specialized AI search targeting codebases. Includes context selector pills (@web, @workspace) and renders syntax-highlighted code blocks with copy features. #### Application Settings (5) - [settingsprofile01](https://lightswind.com/blocks/settings/settingsprofile01): User Profile Overview — A comprehensive profile management screen featuring banner customization, avatar uploads, and professional identity inputs. - [settingssecurity01](https://lightswind.com/blocks/settings/settingssecurity01): Security & Logic Center — An advanced application access panel integrating hardware key registrations, dynamic 2FA toggles, and live tracking of active browser sessions. - [settingsnotifications01](https://lightswind.com/blocks/settings/settingsnotifications01): Notification Control Portal — An advanced communication management hub featuring multi-channel alert toggles, critical feed prioritization, and quiet-hour configuration states. - [settingsbilling01](https://lightswind.com/blocks/settings/settingsbilling01): Enterprise Billing Settings — A comprehensive financial settings layer with subscription plan overviews, node usage telemetry, payment method controls, and invoice ledger history. - [settingsintegrations01](https://lightswind.com/blocks/settings/settingsintegrations01): Platform Integration Core — An advanced settings board for connecting third-party APIs and enterprise services. Features app-specific toggle logic and custom system bridge requests. #### Bento Showcase (7) - [bento01](https://lightswind.com/blocks/bento/bento01): Strategic Product Bento — A premium product-focused bento grid featuring staggered card sizes, interactive hover states, and smooth glassmorphic details. Ideal for main feature sections. - [bento02](https://lightswind.com/blocks/bento/bento02): Data-Dense Analytics Bento — A high-density information grid designed for analytics and data tracking. Combines micro-charts, stat counters, and activity maps into a cohesive system. - [bento03](https://lightswind.com/blocks/bento/bento03): Digital Ecosystem Hub — A futuristic enterprise-grade bento grid focusing on global telemetry, multi-cloud monitoring, and planetary scale security. Low-light glassmorphic HUD look. - [bento04](https://lightswind.com/blocks/bento/bento04): Engineering Matrix Grid — A neo-brutalist industrial bento layout designed for developer platforms and hardware startups. Features high-contrast yellow/black aesthetics and grid-pinned units. - [bento05](https://lightswind.com/blocks/bento/bento05): Planetary Grid — An elite bento layout featuring a central interactive globe and dynamic border-beam effects. Perfect for global infrastructure and network monitoring. - [bento06](https://lightswind.com/blocks/bento/bento06): Mobile Ecosystem — A high-end bento showcasing mobile-first experiences through a central iPhone mockup and staggered information grids. - [bento07](https://lightswind.com/blocks/bento/bento07): Analytics Control Matrix — A premium high-density Bento grid showing AI models routing orchestration, secure Quantum Key checks, and glowing load latency SVG charts. #### Billing & Plans (6) - [billingusage01](https://lightswind.com/blocks/billing/billingusage01): Plan Usage Dashboard — A comprehensive dashboard widget displaying current plan limits, usage statistics with progress bars, and an upgrade prompt. - [billinghistory01](https://lightswind.com/blocks/billing/billinghistory01): Invoice History Table — A clean and organized table layout for displaying past invoices, amounts, status badges, and download actions. - [billingpaymentmethod01](https://lightswind.com/blocks/billing/billingpaymentmethod01): Payment Methods Manager — A specialized interface for managing active credit cards, adding new payment methods, and updating billing addresses. - [pricingtier01](https://lightswind.com/blocks/billing/pricingtier01): SaaS Subscription Tiers — A gorgeous, high-converting 3-tier pricing layout. Features dynamic yearly/monthly toggle animations and glowing highlight badges. - [pricingcompare01](https://lightswind.com/blocks/billing/pricingcompare01): Enterprise Feature Matrix — A comprehensive, fully responsive feature comparison table. Displays plan limitations side-by-side using unified, clean iconography and sticky headers. - [billingtoggle01](https://lightswind.com/blocks/billing/billingtoggle01): UI Standardized Billing Cards — A high-converting 3-column SaaS pricing board. Demonstrates extensive usage of the site #### Blog (10) - [blog01](https://lightswind.com/blocks/blog/blog01): Editorial Blog Feed — A clean, typography-focused blog listing component. Features category filtering, search functionality, and an elegant card layout optimized for high readability. - [blog10](https://lightswind.com/blocks/blog/blog10): Neural & Engineering Editorial Studio — An editorial-grade blog hub featuring spotlight technical papers, code preview cards, curated multi-border article grids, and integrated email dispatch subscription. - [blog03](https://lightswind.com/blocks/blog/blog03): Modern Blog Grid — A visually rich blog grid featuring card hover effects, glassmorphic overlays, and metadata badges. Optimized for showcasing high-quality editorial content. - [blog02](https://lightswind.com/blocks/blog/blog02): Minimalist Article List — A sophisticated, typography-first article list. Features elegant grayscale styling that transitions to color on interaction, perfect for minimal personal brands. - [blog04](https://lightswind.com/blocks/blog/blog04): Landscape Featured Articles — A wide-format blog layout for featured stories. Prioritizes large imagery and headline legibility, suitable for hero inputs or major announcements. - [blog05](https://lightswind.com/blocks/blog/blog05): Classic Sidebar Blog — A traditional blog layout featuring a main content column and a functional sidebar for categories, search, and recent posts. Best for content-heavy sites. - [blog06](https://lightswind.com/blocks/blog/blog06): Bento Grid Blog Showcase — An ultra-modern bento grid blog layout with full-screen layouts, glassmorphism badges, and a integrated interactive newsletter call-to-action. - [blog07](https://lightswind.com/blocks/blog/blog07): Magazine Slider & Interactive Feed — A digital magazine-style blog layout featuring a responsive main carousel slider with smooth transitions and an interactive trending posts list. - [blog08](https://lightswind.com/blocks/blog/blog08): Timeline Changelog Style Blog Feed — A gorgeous timeline-style blog feed that presents articles chronologically with visual date tags, a connecting vertical line, and inline categories. - [blog09](https://lightswind.com/blocks/blog/blog09): Minimal Newsletter-First Substack Style Feed — A clean, content-first layout that prioritizes a premium email capture section at the top, followed by a sleek list of articles. #### Case Studies (10) - [casestudy01](https://lightswind.com/blocks/case-study/casestudy01): Metrics Storytelling Hero — A conversion-focused case study landing page with interactive challenge, solution, and results tabs. - [casestudy02](https://lightswind.com/blocks/case-study/casestudy02): Performance Metrics Grid — A grid layout highlighting before and after performance gains with an interactive legacy switcher. - [casestudy03](https://lightswind.com/blocks/case-study/casestudy03): Split Outcome narrative — A split case study block featuring an interactive engineering checklist and executive quote panel. - [casestudy04](https://lightswind.com/blocks/case-study/casestudy04): Problem Solution Stepper — An interactive step-based journey showcasing legacy bottlenecks, strategy implementation, and rollout success metrics. - [casestudy05](https://lightswind.com/blocks/case-study/casestudy05): Lighthouse Audit Showcase — A dark high-contrast panel comparing Core Web Vitals upgrades with live tab selectors. - [casestudy06](https://lightswind.com/blocks/case-study/casestudy06): Video Stream Overview — A split block displaying an interactive media video preview player and detailed statistics columns. - [casestudy07](https://lightswind.com/blocks/case-study/casestudy07): ROI Interactive Calculator — An estimation widget allowing users to configure team metrics to project monthly savings value. - [casestudy08](https://lightswind.com/blocks/case-study/casestudy08): Directory Client Stories — A professional tabbed logo selector card loaded with case summary metadata and rollout facts. - [casestudy09](https://lightswind.com/blocks/case-study/casestudy09): Milestone Rollout Timeline — A vertical roadmap component with responsive milestone marker details and layout tags. - [casestudy10](https://lightswind.com/blocks/case-study/casestudy10): Key Metrics Spotlight — A multi-metric spotlight panel containing detailed helper icon tooltip annotations. #### Changelogs (10) - [changelog01](https://lightswind.com/blocks/changelog/changelog01): Timeline Changelog — A professional vertical release timeline tracking version tags, descriptions, and authors. - [changelog02](https://lightswind.com/blocks/changelog/changelog02): Collapsible Accordion Details — A collapsible accordion layout showing detailed features, stability fixes, and commit shas. - [changelog03](https://lightswind.com/blocks/changelog/changelog03): Searchable Notes Feed — An interactive tabbed search board filtering updates dynamically by categories. - [changelog04](https://lightswind.com/blocks/changelog/changelog04): Header Metrics Changelog — A changelog feed topped with core summary statistics and contributor activity metrics. - [changelog05](https://lightswind.com/blocks/changelog/changelog05): Pipeline Status Lanes — A release workflow pipeline visualization showcasing stable, candidate, and beta release states. - [changelog06](https://lightswind.com/blocks/changelog/changelog06): Interactive Commit Stream — A dynamic git commit log tracking modified file counts, line insertions, and authors. - [changelog07](https://lightswind.com/blocks/changelog/changelog07): Roadmap Milestones Tracker — A task tracking dashboard visualization showing completed, active, and planned milestones. - [changelog08](https://lightswind.com/blocks/changelog/changelog08): Release Subscription Newsletter — A subscription newsletter signup block alongside a snapshot version summary card. - [changelog09](https://lightswind.com/blocks/changelog/changelog09): Developer Upgrade Path — A copy-pasteable CLI command and code snippet dashboard for release migrations. - [changelog10](https://lightswind.com/blocks/changelog/changelog10): Multi-Product Version Registry — A grid tracking stable, candidate, and beta deployment statuses across tools. #### Cloud Infrastructure (6) - [k8sclusteroptimizer01](https://lightswind.com/blocks/cloud-infrastructure/k8sclusteroptimizer01): Kubernetes Cluster Resource Optimizer — A high-fidelity dashboard for analyzing K8s pod utilization, node scaling, and cost-efficiency recommendations. - [trafficloadbalancer01](https://lightswind.com/blocks/cloud-infrastructure/trafficloadbalancer01): Advanced Traffic Distribution Console — A comprehensive monitor for global load balancers, showing request distribution, health checks, and TLS termination stats. - [databaseclusters01](https://lightswind.com/blocks/cloud-infrastructure/databaseclusters01): High-Availability DB Clusters — A comprehensive monitor for database clusters, showing replication lag, node health, and automated failover status. - [globalcdnstatus01](https://lightswind.com/blocks/cloud-infrastructure/globalcdnstatus01): Edge Network & Latency Monitor — A global visualization of CDN edge nodes, traffic distribution, and real-time latency across different regions. - [serverinstances01](https://lightswind.com/blocks/cloud-infrastructure/serverinstances01): Compute Instances Table — High-density cloud server management table featuring live CPU/RAM utilization mini-charts, region badges, and power controls. - [cloudarchitecture01](https://lightswind.com/blocks/cloud-infrastructure/cloudarchitecture01): Infrastructure Topology map — A live visualization of production cloud architecture showing load balancers, node clusters, and database latency. #### Contact (7) - [contact01](https://lightswind.com/blocks/contact/contact01): Glassmorphic Contact Form — Premium contact section featuring trendy glassmorphism effects. Includes floating input labels, 3D depth, and form validation for a polished user experience. - [contact02](https://lightswind.com/blocks/contact/contact02): Modern Split Contact — A professional split-screen contact layout. Displays company contact info on one side and a clean, minimalist enquiry form on the other. Ideal for agencies and consultancies. - [contact03](https://lightswind.com/blocks/contact/contact03): Minimalist Tech Contact — A clean, spacious contact form designed for clarity. Features bold typography, high-contrast inputs, and a simplified layout to reduce user friction. - [contact04](https://lightswind.com/blocks/contact/contact04): Contact with Sidebar Info — A two-column contact layout that pairs a functional form with a sidebar for address, email, and phone details. Builds trust by showing physical presence. - [contact05](https://lightswind.com/blocks/contact/contact05): Institutional Support Hub — A professional support-focused contact block with prioritized department channels, elite typography, and unified service callouts. - [contact06](https://lightswind.com/blocks/contact/contact06): Global Headquarters Presence — An elite international office network block featuring live local time synchronization per timezone and stylized HQ narrative visuals. - [contact07](https://lightswind.com/blocks/contact/contact07): Architectural Consultation — A premium solution-oriented contact block with service selection chips, elite typography, and high-fidelity institutional inquiry forms. #### CTA (8) - [cta01](https://lightswind.com/blocks/cta/cta01): Growth Accelerator CTA — A high-impact Call to Action section designed for conversions. Features glassmorphic backgrounds, blurred light accents, and clear value propositions. - [cta02](https://lightswind.com/blocks/cta/cta02): Modern Glass CTA — A sleek, horizontal call-to-action bar with subtle background blurs and interactive hover states. Designed to fit seamlessly between content sections. - [cta03](https://lightswind.com/blocks/cta/cta03): Immersive Dark Conversion — A visually rich, dark-themed Call to Action block. Features a full-width background image with an overlay, perfect for breaking up light-themed pages. - [cta04](https://lightswind.com/blocks/cta/cta04): App Store Conversion — A dedicated mobile app promotion block. Includes buttons for App Store and Google Play, alongside a device mockup placeholder. - [cta05](https://lightswind.com/blocks/cta/cta05): Large Immersive CTA — A full-width, centered call-to-action block with impactful typography and background effects. Ideal for the bottom of landing pages to drive final conversion. - [cta06](https://lightswind.com/blocks/cta/cta06): Glassmorphic Call to Action — A visually stunning CTA block with a glassmorphic background, ambient glow, and high-impact typography. Perfect for driving final conversions at the bottom of a landing page. - [cta07](https://lightswind.com/blocks/cta/cta07): Infinitive Launch CTA — A high-conversion CTA section with floating magnetic animations, premium glass panels, and ambient atmospheric effects. - [cta08](https://lightswind.com/blocks/cta/cta08): Card Inset Metric Row CTA — A professional floating card inset CTA section featuring key performance metrics, enterprise badge, dual action buttons, and full dark/light theme support. #### Data & Admin (5) - [datagovernance01](https://lightswind.com/blocks/data-admin/datagovernance01): Enterprise Data Governance & Lineage — A professional interface for tracking data lineage, classification, and sensitivity across the entire organization. - [internaluseraudit01](https://lightswind.com/blocks/data-admin/internaluseraudit01): Admin User Activity & Session Audit — A high-security audit log for tracking administrator actions, session duration, and sensitive permission changes. - [datadisplaytable01](https://lightswind.com/blocks/data-admin/datadisplaytable01): SaaS User Management Table — A professional-grade data table engineered for scale. Features custom status badges, - [datadisplaykanban01](https://lightswind.com/blocks/data-admin/datadisplaykanban01): Sprint Project Board — An incredibly responsive Kanban-style project tracker. Seamlessly displays priority tags, nested avatars, comment/attachment logic, and interactive filter states. - [datadisplaystats01](https://lightswind.com/blocks/data-admin/datadisplaystats01): Metric Analytics Pulse — A professional landing-page statistics block featuring animated sparklines, dynamic trend indicators, and high-contrast numerical highlights for business-critical data. #### Data Science & ML (2) - [datasciencenotebook01](https://lightswind.com/blocks/data-science/datasciencenotebook01): Interactive ML Notebook — A Jupyter-style interactive cell interface with run buttons, python code highlighting, and output visualization. - [datasciencemodelmetrics01](https://lightswind.com/blocks/data-science/datasciencemodelmetrics01): Model Metrics Dashboard — Real-time performance metrics dashboard for machine learning models, featuring live training loss curves. #### Developer & API (2) - [apireference01](https://lightswind.com/blocks/developer-platform/apireference01): API Endpoint Reference — A two-pane API documentation layout with parameter details, required tags, and an interactive cURL code playground. - [apikeys01](https://lightswind.com/blocks/developer-platform/apikeys01): API Keys Manager — Advanced secret key management interface with visibility toggles, copy actions, environment tags, and usage metadata. #### Developer Tools (6) - [devapikey01](https://lightswind.com/blocks/dev-tools/devapikey01): API Key Manager — A secure and professional dashboard component for managing API security tokens. Features environment toggles, hiding values, and robust visual warnings. - [devwebhook01](https://lightswind.com/blocks/dev-tools/devwebhook01): Webhook Delivery Log — A highly detailed webhook request tracker mimicking Stripe - [devsecrets01](https://lightswind.com/blocks/dev-tools/devsecrets01): Environment Vault Manager — A secure administrative interface for managing sensitive environment variables and secrets with reveal-on-demand and audit state tracking. - [devaudit01](https://lightswind.com/blocks/dev-tools/devaudit01): Compliance Audit Protocol — An elite system event ledger featuring immutable logs, actor tracking, and high-fidelity event classification for high-compliance platforms. - [devusage01](https://lightswind.com/blocks/dev-tools/devusage01): Resource Quota Intelligence — A high-fidelity infrastructure metrics dashboard for monitoring API quotas, compute allocation, and storage performance in real-time. - [devtoolswebhook01](https://lightswind.com/blocks/dev-tools/devtoolswebhook01): Webhook Realtime Listener — A gorgeous real-time webhook dashboard. Listens and simulates incoming POST requests, displaying visual connectivity statuses and rendering formatted multi-tab JSON payloads securely. #### Device Mockups (2) - [mockup01](https://lightswind.com/blocks/mockups/mockup01): Native Precision — A premium iPhone 16 Pro hero display with industrial-grade feature highlights and high-fidelity typography. - [mockup02](https://lightswind.com/blocks/mockups/mockup02): Multi-Device Scale — A stunning triple-device array with staggered animations and global reach telemetry. Ideal for scaling product visions. #### EdTech Pro (2) - [learninglms01](https://lightswind.com/blocks/edtech-pro/learninglms01): Enterprise Learning Hub — A comprehensive LMS interface for managing courses, students, and certification tracks with interactive content previews. - [studentprogress01](https://lightswind.com/blocks/edtech-pro/studentprogress01): Student Growth Analytics — An interactive dashboard for tracking student performance, skill acquisition, and engagement metrics over time. #### Enterprise Admin (3) - [adminusers01](https://lightswind.com/blocks/enterprise-admin/adminusers01): Enterprise User Directory — A highly robust user management table featuring role badges, bulk actions, and advanced status filtering designed for SaaS admin panels. - [adminroles01](https://lightswind.com/blocks/enterprise-admin/adminroles01): RBAC Permissions Matrix — A sophisticated matrix interface for configuring fine-grained Role-Based Access Control permissions across multiple organizational modules. - [advancedadmindashboard01](https://lightswind.com/blocks/enterprise-admin/advancedadmindashboard01): Advanced Admin Dashboard — Full-featured enterprise dashboard with real-time stat cards, telemetry monitoring, audit logs, and interactive user roster tables. #### FAQ (5) - [faq01](https://lightswind.com/blocks/faq/faq01): Modern Minimalist FAQ — A clean, accessible accordion component for Frequently Asked Questions. Features smooth expansion animations and a clutter-free design to answer user queries efficiently. - [faq02](https://lightswind.com/blocks/faq/faq02): Categorized Support FAQ — A professional help center layout with sidebar navigation for categorized questions. Ideal for documentation sites and extensive support pages. - [faq03](https://lightswind.com/blocks/faq/faq03): Premium Accordion FAQ — A polished FAQ section featuring smooth expansion animations and clean typography. Includes a built-in support contact card for unresolved queries. - [faq04](https://lightswind.com/blocks/faq/faq04): Strategic Two-Column FAQ — A space-efficient FAQ component with a sticky sidebar header and categorization. Perfect for long lists of questions without overwhelming the user. - [faq05](https://lightswind.com/blocks/faq/faq05): Enterprise Solution Matrix — A structured, category-based FAQ system designed for complex products. Features search integration and organized response tiers. #### FinTech & Web3 (6) - [finwallet01](https://lightswind.com/blocks/fintech/finwallet01): Crypto / Multi-Asset Wallet — A compact, highly polished wallet presentation block showing user balances, portfolio percentage changes, and send/swap action points. - [fintransaction01](https://lightswind.com/blocks/fintech/fintransaction01): Live Transaction Feed — A dynamic list of recent on-chain activities (withdrawals, swaps, smart contracts) featuring precise status badges, icons, and timestamp displays. - [fintrade01](https://lightswind.com/blocks/fintech/fintrade01): Web3 Asset Exchange — A high-fidelity asset swap interface featuring real-time state simulations, slippage controls, and professional protocol design. Optimized for institutional Web3 platforms. - [finassets01](https://lightswind.com/blocks/fintech/finassets01): Portfolio Asset Manifest — A professional portfolio analytics dashboard with live SVG sparklines, yield distribution trackers, and high-fidelity transactional manifests. Designed for deep-tech finance. - [fincredit01](https://lightswind.com/blocks/fintech/fincredit01): Digital Card Protocol — An elite digital card management interface featuring 3D flip card animations, security detail toggles, and professional protocol-based spending controls. - [fintechwallet01](https://lightswind.com/blocks/fintech/fintechwallet01): Crypto Wallet Dashboard — A mobile-first Web3 active wallet display. Shows interactive percentage changes, multi-token asset tracking lists, gradient promotional areas, and ambient blurring lights. #### FinTech Pro (2) - [marketanalysis01](https://lightswind.com/blocks/fintech-pro/marketanalysis01): Live Market Analysis Dashboard — A high-performance trading dashboard featuring real-time price action charts, order books, and depth visualizations for algorithmic trading. - [assetallocation01](https://lightswind.com/blocks/fintech-pro/assetallocation01): Dynamic Asset Allocation — An interactive portfolio rebalancing interface with donut charts, risk assessment sliders, and automated distribution proposals. #### Footers (6) - [footer01](https://lightswind.com/blocks/footer/footer01): Modern Multi-Column Footer — A comprehensive SEO-friendly footer layout. Features multi-column navigation links, an integrated newsletter subscription form, and social media icons. - [footer02](https://lightswind.com/blocks/footer/footer02): Comprehensive Ecosystem Footer — A feature-rich footer designed for large platforms. Includes multi-tier navigation, system status indicators, legal links, and an integrated newsletter capture. - [footer03](https://lightswind.com/blocks/footer/footer03): Minimalist Copyright Footer — A simple, understated footer focusing on copyright info, a logo, and essential social links. Best for single-page sites or rapid prototypes. - [footer04](https://lightswind.com/blocks/footer/footer04): Elite CPU Ecosystem Footer — An ultra-modern, high-fidelity footer with a CPU-inspired brand section, rapid multi-column navigation links with micro-animations, and an integrated system status manifest. Designed for deep monochromatic professionalism. - [footer05](https://lightswind.com/blocks/footer/footer05): Minimal High-End Footer — A gorgeous, centered minimal footer designed for premium dark-mode interfaces. Features clean typography, spacious navigation rows, and a subtle system uptime status bar for mission-critical reliability. - [footer06](https://lightswind.com/blocks/footer/footer06): Protocol Command Center — A high-tech, terminal-inspired #### Gallery (4) - [gallery01](https://lightswind.com/blocks/gallery/gallery01): Modern Masonry Portfolio — A classic masonry image gallery that adapts to different image aspect ratios. Features a hover overlay for project titles and categories. - [gallery02](https://lightswind.com/blocks/gallery/gallery02): Immersive Lightbox Gallery — A premium image gallery grid that opens full-screen interactive lightboxes on click. Perfect for photography portfolios requiring close-up inspection. - [gallery03](https://lightswind.com/blocks/gallery/gallery03): Advanced Masonry Grid — A high-performance masonry grid for image-heavy portfolios. Features dynamic loading, sleek hover transitions, and a responsive layout that adapts to any screen size. - [portfolio01](https://lightswind.com/blocks/gallery/portfolio01): Professional Filtered Portfolio — A stunning masonry-style portfolio grid with category filtering. Includes smooth layout animations via Framer Motion and detailed hover overlays. #### HealthTech & Wellness (2) - [patientvitals01](https://lightswind.com/blocks/health-tech/patientvitals01): Critical Patient Vitals Monitor — A medical-grade monitoring screen showing real-time heart rate, SpO2, and blood pressure with wave-form animations and alert thresholds. - [medicalimaging01](https://lightswind.com/blocks/health-tech/medicalimaging01): DICOM Viewer Workspace — A dark-themed medical imaging workspace for reviewing MRI/CT scans with zoom, pan, and annotation tools simulation. #### Interactive Primitives (2) - [primitive01](https://lightswind.com/blocks/primitives/primitive01): Interactive Atoms — A showcase of fundamental interactive building blocks like ripple loaders and luminance sweep effects. - [primitive02](https://lightswind.com/blocks/primitives/primitive02): Quantum Depth View — Advanced 3D perspective transformations for stunning visual depth and parallax interaction models. #### Legal & Compliance (2) - [legalvault01](https://lightswind.com/blocks/legal-tech/legalvault01): Immutable Legal Vault — A secure document repository for legal contracts featuring version control, digital signature status, and expiration alerts. - [compliancematrix01](https://lightswind.com/blocks/legal-tech/compliancematrix01): Compliance Risk Matrix — A high-density grid visualization for tracking regulatory compliance across multiple jurisdictions with risk heatmap coloring. #### Logistics & Supply Chain (2) - [fleettracker01](https://lightswind.com/blocks/logistics-pro/fleettracker01): Global Fleet Radar — A real-time logistics dashboard for tracking global vehicle fleets with status indicators, route history, and driver metadata. - [inventoryheatmap01](https://lightswind.com/blocks/logistics-pro/inventoryheatmap01): Inventory Velocity Heatmap — A visual warehouse management tool for tracking stock levels across multiple locations with predictive replenishment alerts. #### Logo (4) - [logo01](https://lightswind.com/blocks/logo/logo01): Infinite Brand Carousel — A smooth, infinite-scrolling logo marquee component. Essential for showcasing client partnerships and building social proof on landing pages. - [logo02](https://lightswind.com/blocks/logo/logo02): Infinite Logo Marquee — A smooth, continuous scrolling marquee for partner logos. Features grayscale-to-color hover transitions to subtly highlight brands without cluttering the interface. - [logo03](https://lightswind.com/blocks/logo/logo03): Professional Brand Grid — A clean, static logo grid with a subtle hover zoom effect. Designed to display partner or client logos with professional restraint and elegance. - [logo04](https://lightswind.com/blocks/logo/logo04): Minimalist Trusted Strip — A compact, single-line logo strip perfect for separating content sections. Uses grayscale branding to add authority without distractions. #### Media Mention Bars (5) - [mediamention01](https://lightswind.com/blocks/media-mentions/mediamention01): Media Grid Quotes — A responsive logo grid with animated cover cards and press quote flyouts on hover. - [mediamention02](https://lightswind.com/blocks/media-mentions/mediamention02): Continuous Press Marquee — An infinite horizontal scrolling ticker of brand logos with hover pause-states. - [mediamention03](https://lightswind.com/blocks/media-mentions/mediamention03): Quote Tab Switcher — A clickable brand logo roster that updates the active central testimonial widget. - [mediamention04](https://lightswind.com/blocks/media-mentions/mediamention04): Split Cover Story Showcase — A split design with a primary featured story card alongside minor press mentions. - [mediamention05](https://lightswind.com/blocks/media-mentions/mediamention05): Glow Accolade Grid — A dark high-contrast panel grid featuring custom branding glow effects and ratings. #### Navigation (5) - [navsidebar01](https://lightswind.com/blocks/navigation/navsidebar01): Animated SaaS Sidebar — A gorgeous, collapsable dashboard sidebar navigation. Features nested accordion sub-menus, smooth Framer Motion expanding physics, and integrated user profiles. - [navmegamenu01](https://lightswind.com/blocks/navigation/navmegamenu01): Framer Mega Menu — An incredibly complex drop-down mega menu. Utilizes physics-based height adjustments to cleanly render deep content hierarchies without jarring clipping. - [header01](https://lightswind.com/blocks/navigation/header01): Enterprise Navigation Header — A robust, responsive navigation bar suitable for large-scale applications. Features support for mega-menus, user account dropdowns, and mobile drawers. - [header02](https://lightswind.com/blocks/navigation/header02): Floating Protocol Header — A gorgeous, floating glassmorphic header designed for modern SaaS. Features a command search mock, notification badges, and high-fidelity - [header03](https://lightswind.com/blocks/navigation/header03): Dynamic Tabbed Pill — An elite, centered pill navigation system. Features high-contrast branding, active tab spring animations (LayoutGroup), and a premium micro-status indicator overlay. #### Newsletter (4) - [newsletter01](https://lightswind.com/blocks/newsletter/newsletter01): High-Conversion Newsletter — Maximize your subscriber growth with this premium newsletter block. Features ambient glow effects, real-time input validation, and persuasive micro-copy placement. - [newsletter02](https://lightswind.com/blocks/newsletter/newsletter02): High-Polished Dark Newsletter — An immersive dark-mode newsletter capture form. Features sophisticated gradient glows, ambient blurs, and high-contrast input fields designed for developer-focused tools. - [newsletter03](https://lightswind.com/blocks/newsletter/newsletter03): Minimalist Glass Capture — A sleek, glassmorphic newsletter signup block with floating input fields and refined micro-interactions for maximum conversion. - [newsletter04](https://lightswind.com/blocks/newsletter/newsletter04): High-Impact Dark Newsletter — An immersive, horizontally-structured newsletter section featuring ambient typography effects, glassmorphic inputs, and premium motion-trigger states. #### Page (2) - [page01](https://lightswind.com/blocks/page/page01): AI Launch Landing Page — A complete, high-converting landing page template tailored for AI SaaS products. Includes Hero, Features, Pricing, and Testimonial sections in one cohesive, copy-paste React component. - [page02](https://lightswind.com/blocks/page/page02): SaaS Writer Landing Page — A copy-paste landing page layout built with high-quality animated backgrounds, grid layouts, and custom badges. Tailored for writing assistants, content creators, and copywriters. #### Pipeline Visualizers (10) - [pipeline01](https://lightswind.com/blocks/pipeline-visualizers/pipeline01): CI/CD Build Pipeline — An interactive build stage tracker featuring console log panel visualization. - [pipeline02](https://lightswind.com/blocks/pipeline-visualizers/pipeline02): Data Streaming Graph — An ingestion flow node graph detailing real-time message rates and backpressure metrics. - [pipeline03](https://lightswind.com/blocks/pipeline-visualizers/pipeline03): ML Training Process — A machine learning pipeline tracker highlighting accuracy and cross-entropy loss parameters. - [pipeline04](https://lightswind.com/blocks/pipeline-visualizers/pipeline04): Git Release Flow — A version control visualizer mapping git branches, validation checklists, and signature reviews. - [pipeline05](https://lightswind.com/blocks/pipeline-visualizers/pipeline05): Canary Scale Topography — A Kubernetes replica topology controller showing active canary proxy weights. - [pipeline06](https://lightswind.com/blocks/pipeline-visualizers/pipeline06): API Gateway Router — An inbound gateway proxy routing request headers to internal micro-services. - [pipeline07](https://lightswind.com/blocks/pipeline-visualizers/pipeline07): ETL Processor — An extract-transform-load pipeline with live record counter simulations. - [pipeline08](https://lightswind.com/blocks/pipeline-visualizers/pipeline08): FaaS Orchestrator — A step-function execution visualizer tracking inputs/outputs and execution times. - [pipeline09](https://lightswind.com/blocks/pipeline-visualizers/pipeline09): Webhook Delivery Queue — A webhook retry queue manager tracking event delivery parameters. - [pipeline10](https://lightswind.com/blocks/pipeline-visualizers/pipeline10): Database Replication Sync — A primary-replica database syncing topology dashboard highlighting lags. #### Portfolio Sections (18) - [portfoliosection04](https://lightswind.com/blocks/portfolio/portfoliosection04): Dark Masonry Gallery — A dark-themed, sleek masonry-style portfolio with scroll parallax and large aesthetic imagery. - [portfoliosection05](https://lightswind.com/blocks/portfolio/portfoliosection05): Sticky Scroll Showcase — A highly professional split-screen portfolio featuring a sticky descriptive left pane and scrolling cards on the right. - [portfoliosection06](https://lightswind.com/blocks/portfolio/portfoliosection06): Expandable Accordion Gallery — An interactive full-width accordion portfolio where hovering seamlessly expands project imagery. - [portfoliosection07](https://lightswind.com/blocks/portfolio/portfoliosection07): List With Floating Reveal — A premium list-based portfolio that reveals high-resolution images floating alongside the user - [portfoliosection08](https://lightswind.com/blocks/portfolio/portfoliosection08): Infinite Marquee Showcase — An ultra-modern layout where a continuous marquee of project cards glides across the screen horizontally tied to your scroll. - [portfoliosection09](https://lightswind.com/blocks/portfolio/portfoliosection09): Stacked Parallax Cards — A premium full-screen layout where giant project cards elegantly stack on top of each other as you scroll down. - [portfoliosection10](https://lightswind.com/blocks/portfolio/portfoliosection10): 3D Perspective Grid — A refined grid where cards elegantly tilt in 3D space based on mouse cursor position. - [portfoliosection11](https://lightswind.com/blocks/portfolio/portfoliosection11): Minimal Full-Screen Slider — A highly editorial, full-screen slider focusing on massive typography and stunning crossfade imagery. - [portfoliosection12](https://lightswind.com/blocks/portfolio/portfoliosection12): Pinned Horizontal Track — An advanced scrolling experience where the section pins to the viewport while content scrolls horizontally. - [portfoliosection13](https://lightswind.com/blocks/portfolio/portfoliosection13): Asymmetric Offset Gallery — A highly sophisticated layout utilizing an alternating two-column vertical offset to create a premium editorial feel. - [portfoliosection14](https://lightswind.com/blocks/portfolio/portfoliosection14): Interactive Card Deck — A playful yet highly professional stacked deck interaction where users swipe cards to reveal previous projects. - [portfoliosection15](https://lightswind.com/blocks/portfolio/portfoliosection15): Text Mask Reveal — A bold list-based layout featuring massive typography that masks and reveals project imagery only upon hover. - [portfoliosection16](https://lightswind.com/blocks/portfolio/portfoliosection16): Aurora Portfolio Hero — A professional split-screen portfolio hero section featuring typing/shine text effects, custom stats, and a border-beaming laptop mockup card. - [portfoliosection17](https://lightswind.com/blocks/portfolio/portfoliosection17): Cosmic Spotlight Bento Hero — A professional dark cosmic bento-grid portfolio hero section featuring star meteor animations and mouse-tracking spotlight cards. - [portfoliosection18](https://lightswind.com/blocks/portfolio/portfoliosection18): Interactive Creative Director Hero — A highly professional creative director portfolio hero featuring custom dot-grid background alignments, client headshot tooltips, and interactive wobble card projections. - [portfoliosection19](https://lightswind.com/blocks/portfolio/portfoliosection19): Immersive Art & CGI Portfolio Hero — A professional immersive visual art portfolio section featuring mouse-interactive ambient blob backgrounds and floating grid gallery layers. - [portfoliosection02](https://lightswind.com/blocks/portfolio/portfoliosection02): Advanced Bento Portfolio — A highly professional bento-grid style portfolio section with Framer Motion hover effects. - [portfoliosection03](https://lightswind.com/blocks/portfolio/portfoliosection03): Professional Interactive Portfolio — An advanced, full-width interactive portfolio showcase with smooth transitions and glassmorphism details. #### Pricing (9) - [pricing09](https://lightswind.com/blocks/pricing/pricing09): Glassmorphic Aura Tiers — A premium glassmorphic 3-column pricing board featuring responsive yearly billing toggle, ambient background glow, and a highlighted Pro plan with sky-blue outer glow borders. - [pricing01](https://lightswind.com/blocks/pricing/pricing01): Professional Pricing — Clean, conversion-optimized pricing tables for SaaS products. Features clear visual hierarchy, highlighted - [pricing02](https://lightswind.com/blocks/pricing/pricing02): Premium Tier Grid — Advanced pricing grid layout with emphasis on premium tiers. Includes detailed feature checklists, tooltips, and a comparative layout designed to upsell users to higher plans. - [pricing03](https://lightswind.com/blocks/pricing/pricing03): Enterprise Comparison Table — A comprehensive pricing comparison table for enterprise software. Detailed feature-by-feature breakdown with sticky headers and category separation. Essential for B2B SaaS. - [pricing04](https://lightswind.com/blocks/pricing/pricing04): High-Contrast Comparison — A bold, two-tier pricing component using high-contrast design to distinguish between - [pricing06](https://lightswind.com/blocks/pricing/pricing06): Enterprise Comparison Table — A detailed, feature-rich pricing comparison table. Includes sticky headers, category segmentation, and clear check/cross indicators for deep plan comparison. - [pricing07](https://lightswind.com/blocks/pricing/pricing07): Toggle Switch Pricing — A clean pricing section with a prominent monthly/yearly toggle. Highlights savings to encourage annual subscriptions and uses a card-based layout. - [pricing05](https://lightswind.com/blocks/pricing/pricing05): High-Contrast Tier Grid — A bold pricing grid that uses high-contrast colors to highlight the - [pricing08](https://lightswind.com/blocks/pricing/pricing08): Scalable Enterprise Tiers — A high-impact pricing grid focused on enterprise scale, featuring custom quote triggers and unlimited feature tiering. #### Professional Onboarding (2) - [onboardingwizard01](https://lightswind.com/blocks/onboarding-pro/onboardingwizard01): Multi-step Setup Wizard — An elegant, animated multi-step setup flow for configuring new workspaces, selecting plans, and team invitations. - [onboardingwelcome01](https://lightswind.com/blocks/onboarding-pro/onboardingwelcome01): Personalized Welcome Dashboard — A beautifully personalized welcome screen with a progress checklist and quick start resources to get users engaged immediately. #### SaaS Sections (13) - [saasfeaturegrid01](https://lightswind.com/blocks/saas/saasfeaturegrid01): Bento Feature Manifest — A professional high-fidelity Bento Grid featuring SaaS capabilities, mouse-tracking spotlights, interactive elements, and custom badges. - [saasstats01](https://lightswind.com/blocks/saas/saasstats01): SaaS Enterprise Core Stats — A conversion-optimized enterprise statistics block with animated trends, secondary controls, and interactive details. - [saasmetricdashboard01](https://lightswind.com/blocks/saas/saasmetricdashboard01): KPI Optimization Console — A high-fidelity dashboard console presenting critical SaaS key performance indicators (KPIs) with detailed telemetry panels. - [saasintegrationhub01](https://lightswind.com/blocks/saas/saasintegrationhub01): Connected Integration Grid — A visually stunning integration grid showcasing automated connections, API statuses, and interactive workflow setups. - [saaspricing01](https://lightswind.com/blocks/saas/saaspricing01): SaaS Conversion Pricing — A premium SaaS pricing grid featuring interactive plan highlights, feature matrices, and conversion-optimized checkout links. - [saasbilling01](https://lightswind.com/blocks/saas/saasbilling01): Flexible Seat Billing — A professional seats and plan billing configurator with dynamic price calculator and commitment toggle. - [saasfeedbackwidget01](https://lightswind.com/blocks/saas/saasfeedbackwidget01): Feature Feedback Hub — An interactive feedback collection panel with emoji ratings and category filters. - [saasonboarding01](https://lightswind.com/blocks/saas/saasonboarding01): Workspace Onboarding Setup — A multi-step onboarding flow for workspaces with naming, accent colors, and developer invitations. - [saasusermanagement01](https://lightswind.com/blocks/saas/saasusermanagement01): Team User Console — A high-density user roster view with customizable role menus and filter query fields. - [saasactivityfeed01](https://lightswind.com/blocks/saas/saasactivityfeed01): Workspace Live Logs — A real-time telemetry log feed displaying interactive JSON payloads. - [saasfeaturegrid02](https://lightswind.com/blocks/saas/saasfeaturegrid02): Developer Bento Feature Manifest — A premium interactive SaaS Feature Bento Grid with smooth tab-switching animations, glassmorphic styling, and latency/uptime metrics. - [saasintegrationhub02](https://lightswind.com/blocks/saas/saasintegrationhub02): Observability Integration Hub — An advanced integration console featuring active fuzzy search, category filtering, live connection toggles, and webhook payload terminal preview. - [saasactivityfeed02](https://lightswind.com/blocks/saas/saasactivityfeed02): Telemetry Activity Console — A state-of-the-art live activity and log console featuring simulated live streams, pause controls, search queries, and collapsible metadata payloads. #### Security & DevSecOps (2) - [securityauditlog01](https://lightswind.com/blocks/security-ops/securityauditlog01): Immutable Audit Log — A detailed, filterable timeline of system events, logins, and API accesses with categorized risk level badges. - [securitythreatmap01](https://lightswind.com/blocks/security-ops/securitythreatmap01): Active Threat Radar — A high-end, dark-themed threat map simulation featuring sweeping radar animations and active ingress plotting. #### Social & Community (5) - [socialfeed01](https://lightswind.com/blocks/social/socialfeed01): Interactive Timeline Feed — A highly engaging social media feed block. Features inline media grids, interaction counts, expandable threaded comments, and sleek - [socialchat01](https://lightswind.com/blocks/social/socialchat01): Fidelity Direct Messenger — A complex web messaging component. Features a seamless sidebar contact list, dynamic read-receipt mapping, interactive - [socialdiscovery01](https://lightswind.com/blocks/social/socialdiscovery01): Creator Discovery Grid — A premium creator exploration interface with interactive follow cards, high-fidelity bio snippets, and institutional social aesthetics. - [socialcommunity01](https://lightswind.com/blocks/social/socialcommunity01): Elite Community Dashboard — A sophisticated community hub with channelized navigation, real-time member statistics, and polished event promotion areas. - [socialprofile01](https://lightswind.com/blocks/social/socialprofile01): Animated User Profile — A high-fidelity social profile interface structured with semantic HTML. Displays a sticky hero header, Framer Motion nested tab indicators, and a comprehensive Twitter-style feed complete with interactions. #### Stats (3) - [stats01](https://lightswind.com/blocks/stats/stats01): Growth & Impact Grid — A minimalist statistics grid designed to highlight key performance indicators (KPIs) and company achievements. Features animated number counters to draw attention. - [stats02](https://lightswind.com/blocks/stats/stats02): Abstract Dark Metrics — A futuristic statistics block for dark-mode interfaces. Uses large, high-contrast numbers and subtle gradients to make key performance indicators pop. - [stats03](https://lightswind.com/blocks/stats/stats03): Live Metric Pulse — An animated statistics section with radial progress indicators and live trend visualizations. Designed for modern dashboards and company overview pages. #### Steps (3) - [step01](https://lightswind.com/blocks/steps/step01): Animated Process Map — A visual - [step02](https://lightswind.com/blocks/steps/step02): Vertical Progress Tracker — A vertical step progress component with active state indicators. Ideal for multi-stage forms, tutorials, or shipment tracking interfaces. - [step03](https://lightswind.com/blocks/steps/step03): Fluid Horizontal Progress — An elite horizontal step-progress component with physics-based line animations, interactive tooltip labels, and high-fidelity active state indicators. #### Team (5) - [team01](https://lightswind.com/blocks/team/team01): Modern Team Profiles — Sleek and professional team member cards with integrated social media links and subtle hover effects. Perfect for - [team02](https://lightswind.com/blocks/team/team02): Modern Social Team Grid — A dynamic team directory featuring large profile images and interactive social media overlays. Grayscale-to-color hover effects create an engaging user experience. - [team03](https://lightswind.com/blocks/team/team03): Executive Spotlight — A premium layout for highlighting executive team members. Features a side-by-side photo and bio arrangement with a refined serif typography option. - [team04](https://lightswind.com/blocks/team/team04): Visionary Portrait Grid — A premium team showcase featuring large, high-resolution portraits with hover-reveal bios. Designed for executive leadership pages where personal branding is key. - [team05](https://lightswind.com/blocks/team/team05): Circular Avatar Grid — A clean team grid using circular avatars and centered text. A classic, approachable design choice for startups and community-focused groups. #### Testimonials (7) - [testimonial01](https://lightswind.com/blocks/testimonials/testimonial01): Scrolling Social Proof — A dynamic, infinite-scroll testimonial marquee. Perfect for displaying a large volume of customer feedback in a compact, engaging way to build instant credibility. - [testimonial02](https://lightswind.com/blocks/testimonials/testimonial02): Trusted Wall of Love — A masonry-style grid of customer testimonials. Designed to showcase diverse user stories and high ratings in a visually rich - [testimonial03](https://lightswind.com/blocks/testimonials/testimonial03): Large Featured Quote — A commanding single-testimonial layout featuring oversized typography and a dedicated author profile. Ideal for highlighting a key customer success story. - [testimonial04](https://lightswind.com/blocks/testimonials/testimonial04): Infinite Carousel Wall — A smooth, auto-scrolling testimonial marquee that pauses on interaction. Perfect for showcasing a high volume of client feedback in a compact, dynamic strip. - [testimonial05](https://lightswind.com/blocks/testimonials/testimonial05): Executive Highlight Quote — A large-format testimonial block dedicated to a single, impactful quote. Features a high-fidelity avatar and subtle background styling to draw focus. - [testimonial06](https://lightswind.com/blocks/testimonials/testimonial06): Dynamic Highlight Wall — A premium masonry testimonial grid featuring interactive highlighter-style text effects and social proof metadata. Perfect for showcasing high-impact customer feedback. - [testimonial07](https://lightswind.com/blocks/testimonials/testimonial07): Corporate B2B Testimonial Slider — A refined, corporate testimonial slider built for high-level quotes. Includes company logo placeholders, star ratings, and smooth fade transitions. #### Timeline (3) - [timeline01](https://lightswind.com/blocks/timeline/timeline01): Industrial Vertical Timeline — A professional vertical timeline component. Ideal for displaying company history, potential product roadmaps, or release logs with a structured, step-by-step layout. - [timeline02](https://lightswind.com/blocks/timeline/timeline02): Product Roadmap Showcase — A premium horizontal scrolling timeline featuring scroll-synced progress indicators, glassmorphic roadmap cards, and smooth staggered entrance animations. Perfect for product roadmaps and strategic vision segments. - [timeline03](https://lightswind.com/blocks/timeline/timeline03): Phase Execution Matrix — A professional vertical timeline specializing in project cycle visualization. Features staggered neo-brutalist cards, central spine progression, and interactive phase indicators.