List of all the components provided by Inspira UI.
119 components in all category.
3D Card Effect
A card perspective effect, hover over the card to elevate card elements.
csstailwindcardaceternity-ui
3D Carousel
A dynamic and interactive 3D carousel component using Three.js and Motion-V, allowing smooth infinite rotation and user-controlled interactions.
csstailwindthreejsmotion-v
3D Text
A stylish 3D text component with customizable colors, shadows, and animation options.
csstailwind3d
Animate Grid
Skew Animation grid with box shadow.
csstailwindinput
Animated Beam
An SVG beam connecting elements with animation.
csstailwindmagic-ui
Animated Circular Progress Bar
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
csstailwindinputmagic-ui
Animated List
A sequentially animated list that introduces each item with a timed delay, perfect for displaying notifications or events on your landing page.
csstailwindmagic-ui
Animated Logo Cloud
Animated company cloud logs. Usually we can use to show company logos.
csstailwind
Animated Testimonials
An engaging and animated testimonial component showcasing user feedback with transitions and auto-play functionality.
csstailwindaceternity-ui
Animated Tooltip
A cool tooltip that reveals on hover, follows mouse pointer
csstailwindaceternity-ui
Apple Card Carousel
A sleek, Apple‑style card carousel with blur‑loading images, modal expansion, and smooth scrolling controls.
csstailwindcardaceternity-ui
Aurora Background
A subtle Aurora or Southern Lights background for your website.
csstailwindbackgroundaceternity-ui
Balance Slider
A dynamic balance slider with adjustable colors, limits, and interactive tooltip.
csstailwindinput
Bending Gallery
A curved, scrollable 3D gallery with dynamic image cards and animated text rendered using WebGL and OGL.
csstailwindoglwebgl
Bento Grid
A cool grid layout with different child component.
csstailwindbentoaceternity-ui
Black Hole Background
A mesmerizing, canvas-driven background effect that simulates a warped “black-hole” tunnel with animated discs, radial lines, and particles.
csstailwindbackgroundmotion-vcanvas
Blur Reveal
A component to smoothly blur fade in content.
csstailwindmagic-ui
Book
A 3D book component featuring customizable sizes and color gradients.
csstailwindx-ui
Border Beam
A stylish animated border beam effect with customizable size, duration, colors, and delay.
csstailwindmagic-ui
Box Reveal
An animated box reveal effect with customizable colors, duration, and delay.
csstailwindmagic-ui
Bubbles Background
An animated background with floating bubbles.
csstailwindbackgroundthreejs
Card Spotlight
A card component with a dynamic spotlight effect that follows the mouse cursor, enhancing visual interactivity.
csstailwindcardmagic-ui
Color Picker
A comprehensive color picker component with support for multiple color formats, accessibility features, and custom swatches.
csstailwindinputcolor-pickeruplusion23
Colourful Text
A text component with various colours, filter and scale effects.
csstailwindaceternity-ui
Compare
Slide to compare any two pieces of content - images, designs, code, or custom elements
csstailwindaceternity-ui
Confetti
A Vue component for confetti animations.
csstailwindcanvasmagic-ui
Container Scroll
A container scrolling effect that transforms the content inside based on scroll progress. Features smooth transitions with scaling and rotating effects on scroll.
csstailwindaceternity-ui
Container Text Flip
A container that flips through words, animating the width.
csstailwindaceternity-ui
Cosmic Portal
A breathtaking, animated 3D portal built with Three.js that features glowing rings, floating crystals, space distortion, and interdimensional streams.
csstailwindbackgroundthreejspostprocessing
Direction Aware Hover Card
A direction aware hover card, that displays an image with dynamic hover effects and customizable content overlay.
csstailwindcardaceternity-ui
Dock
A macOS-style dock with magnifying icons as you hover over them.
csstailwind
Expandable Gallery
A responsive image gallery with an interactive hover effect that expands images dynamically.
csstailwindgallery
Falling Stars Background
A stunning animated starfield background with glowing and sharp trail effects.
Updated
csstailwindbackgroundcanvas
File Tree
A component used to showcase the folder and file structure of a directory.
csstailwindmagic-ui
File Upload
A modern file upload component with a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern.
csstailwindinputaceternity-ui
Flickering Grid
A flickering grid background made with Canvas, fully customizable using Tailwind CSS.
csstailwindbackgroundcanvasmagic-ui
Flip Card
A dynamic flip card with smooth 180-degree flipping animations along both the X and Y axes, providing an engaging and interactive visual effect.
csstailwindcard
Flip Words
A component that flips through a list of words.
csstailwindaceternity-ui
Fluid Cursor
A GPU-accelerated animated cursor trail that simulates fluid motion.
csstailwindcursorwebglcursify
Focus
Highlight words in a sentence with a dynamic blurred effect and animated focus frame. Supports auto-cycling or manual hover focus mode.
csstailwindcodepen
Github Globe
A 3D interactive globe visualization with customizable arcs, points, and animation options inspired from Github.
Updated
csstailwindthreejsaceternity-ui
Glare Card
A glare effect that happens on hover, as seen on Linear's website.
csstailwindcardaceternity-ui
Globe
An interactive rotating globe component.
csstailwindcobemagic-ui
Glow Border
An animated border effect.
csstailwindmagic-ui
Glowing Effect
A dynamic proximity-based glow effect that reacts to mouse movements and scroll events, perfect for highlighting interactive elements.
csstailwindaceternity-ui
Gradient Button
A stylish animated button with a rotating conic gradient border and customizable properties for a vibrant look.
csstailwindbutton
Halo Search
A futuristic search input component featuring multiple glowing rings and subtle animated halos for a vibrant, immersive UI experience.
csstailwindinputui-verse
Hyper Text
A hyper changing text animation as you hover..
csstailwindmagic-ui
Icon Cloud
An interactive 3D tag cloud component
csstailwindmagic-ui
Image Trail Cursor
An interactive cursor effect that creates a dynamic trail of images following mouse movement with multiple animation variants.
New
csstailwindcursorcodropsgsap
Images Slider
A full page slider with images that can be navigated with the keyboard.
csstailwindimagesaceternity-ui
Infinite Grid
A high-performance, interactive 3D infinite grid component built with OGL as seen on phantom.land
csstailwindphantom-landoglwebgl
Input
A versatile and visually dynamic input field with radial hover effects, styled for modern web applications.
csstailwindinputaceternity-ui
Interactive Grid Pattern
A interactive background grid pattern made with SVGs, fully customizable.
csstailwindbackgroundsvgmagic-ui
Interactive Hover Button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
csstailwindbuttonmagic-ui
iPhone Mockup
An SVG mockup of an iPhone.
csstailwinddevice-mockupmagic-ui
Lamp Effect
A captivating lamp lighting effect with conic gradients, spotlights, and glowing lines for an immersive visual experience.
csstailwindbackgroundaceternity-ui
Lens
A lens component to zoom into images, videos, or practically anything.
csstailwindaceternity-ui
Letter Pullup
Staggered letter pull up text animation.
csstailwindmagic-ui
Light Speed
A highly customizable 3D highway speed visual effect built with Three.js, featuring animated road, cars, lights, and distortion effects for immersive motion simulation.
csstailwindthreejscodrops
Line Shadow Text
A line shadow text component for Magic UI that adds a shadow effect to the text, making it visually appealing and engaging.
csstailwindmagic-ui
Link Preview
Dynamic link previews for your anchor tags
csstailwindaceternity-ui
Liquid Background
A reactive and dynamic background effect using OGL for WebGL-based visuals.
csstailwindbackgroundoglwebgl
Liquid Glass Effect
A visually striking glassmorphism effect using SVG displacement filters similar to Apple Liquid Glass.
csstailwindapplesvg
Liquid Logo
An advanced WebGL-based component that applies a dynamic, liquid effect to logos or images using custom shaders.
csstailwindwebglpaper
Logo Origami
Animated flipping logo with origami effect.
csstailwindhover-dev
Marquee
A customizable scrolling component that loops its content horizontally or vertically, with configurable direction, hover pause, and repeat options.
csstailwindmagic-ui
Meteors
A component that displays a meteor shower animation with customizable meteor count and styling.
csstailwindaceternity-ui
Morphing Tabs
This is a morphing tabs interaction, recreated by Preet's work and featuring the gooey effect component.
csstailwind
Morphing Text
This MorphingText component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.
csstailwindmagic-ui
Multi Step Loader
A step loader for screens that works with async conditions too.
csstailwindaceternity-ui
Neon Border
A visually appealing neon border component with customizable animations and colors.
csstailwindborder
Neural Background
A dynamic, shader-powered animated background with fluid neural-like visuals using OGL and GLSL.
New
csstailwindbackgroundoglwebglcursify
Number Ticker
Animate numbers to count up or down to a target number
csstailwindmagic-ui
Orbit
A component that animates content in a circular orbit, with customizable duration, delay, and radius. It also offers an optional orbit path display.
csstailwindmagic-ui
Particle Image
Visually appealing particle animation applied to images as seen on NuxtLabs.com
csstailwindcanvasparticles
Particle Whirlpool
An animated background with swirling particles.
csstailwindbackgroundthreejspostprocessing
Particles Background
Particles can add a dynamic and engaging element to your website's visuals. They help create a feeling of depth, motion, and interaction, making the site more visually appealing.
csstailwindbackgroundmagic-uicanvas
Pattern Background
Simple animated pattern background to make your sections stand out.
csstailwindbackgroundmagic-ui
Photo Gallery
Showcase your team with pride using our stunning Photo Gallery Component.
csstailwindgallery
Placeholders And Vanish Input
Sliding in placeholders and vanish effect of input on submit
csstailwindinputaceternity-ui
Radiant Text
A glare effect on text.
csstailwindmagic-ui
Rainbow Button
A rainbow effect on button.
csstailwindbuttonmagic-ui
Ripple
An animated ripple effect typically used behind elements to emphasize them.
csstailwindbackgroundmagic-ui
Ripple Button
A stylish ripple button component with customizable colors and animation duration.
csstailwindbuttonmagic-ui
Safari Mockup
An SVG mockup of the Safari browser.
csstailwinddevice-mockupmagic-ui
Scratch To Reveal
The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.
csstailwindmagic-ui
Scroll Island
A dynamic and interactive component that displays scroll progress with animated visuals and an expandable area for additional content.
csstailwindnumber-flow
Shader Toy Viewer
A powerful and flexible component to render interactive GLSL shaders from ShaderToy in the browser.
csstailwindshader-toyoglwebgl
Shimmer Button
A button with a shimmering animated effect.
csstailwindbuttonmagic-ui
Silk Background
A soft, flowing shader-powered background inspired by silk fabric motion and texture, rendered using ShaderToy.
New
csstailwindbackgroundshader-toyoglwebgl
Sleek Line Cursor
A reactive animated cursor trail with smooth wave-like motion, using spring physics and dynamic color waves.
New
csstailwindcursorwebglcursify
Smooth Cursor
A customizable, physics-based smooth cursor animation component for Vue applications.
csstailwindcursormagic-ui
Snowfall Background
A beautifully animated snowfall effect applied as a background.
csstailwindbackgroundcanvas
Sparkles
A configurable sparkles component that can be used as a background or as a standalone component.
csstailwindbackgroundcanvas
Sparkles Text
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
csstailwindmagic-ui
Spinning Text
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
csstailwindmagic-ui
Spline
A Vue wrapper component for the Spline 3D tool, providing events and auto-resizing.
csstailwindspline
Spring Calendar
An animated calendar widget that expands to reveal events and features smooth, spring‑based Motion‑V transitions.
csstailwindmotion-v
Stars Background
A parallax-animated starfield background using layered motion and randomized star positions.
csstailwindbackgroundanimate-uimotion-v
Stractium Background
A shader-based background inspired by intricate fractal patterns and organic textures, created using raymarching and GLSL. This effect is designed to simulate complex, evolving visual textures.
New
csstailwindbackgroundshader-toywebglogl
SVG Mask
A dynamic SVG mask component that reveals content with hover and mouse movement.
csstailwindaceternity-ui
Tailed Cursor
A smooth, colorful ribbon cursor trail rendered with WebGL using OGL, featuring dynamic shaders and customizable animation effects.
csstailwindcursorwebglcodrops
Testimonial Slider
A lightweight testimonial slider with image rotation, text transitions, and optional auto‑rotation.
csstailwind
Tetris
Tetris background component, you can even click on a block to eliminate it.
csstailwindbackground
Text Generate Effect
A cool text effect that fades in text on page load, one by one.
csstailwindaceternity-ui
Text Glitch
Creates a vibrant glitch effect on text with customizable speed, shadow colors, and optional hover-triggered animation.
csstailwind
Text Highlight
A text effect that fill background of a text to highlight it.
csstailwindaceternity-ui
Text Hover Effect
A text hover effect that animates and outlines gradient on hover, as seen on x.ai
csstailwind
Text Reveal
Animate text line-by-line using GSAP's SplitText for smooth word or line entrance effects.
csstailwindgsap
Text Reveal Card
Mousemove effect to reveal text content at the bottom of the card.
csstailwindaceternity-ui
Text Scroll Reveal
A component that reveals text word by word as you scroll, with customizable text and styling.
csstailwindmagic-ui
Timeline
A visually appealing and interactive timeline component with smooth animations, sticky labels, and a gradient scrolling effect.
csstailwindaceternity-ui
Tracing Beam
A component that renders a tracing beam effect with dynamic scrolling animations and gradient strokes.
csstailwindaceternity-ui
Video Text
A text component with a video background.
csstailwindbackgroundmagic-ui
Vortex Background
A wavy, swirly, vortex background ideal for CTAs and backgrounds.