Background
Aurora Background
A subtle Aurora or Southern Lights background for your website.
csstailwindbackground +1
All Components
List of all the components provided by Inspira UI.
131 / 131All
Browse components
Find the right component, open its preview, then copy the source with API notes.
131
Total
2
New
1
Updated
Background
Background
Black Hole Background
A mesmerizing, canvas-driven background effect that simulates a warped “black-hole” tunnel with animated discs, radial lines, and particles.
csstailwindbackground +2
Background
Bubbles Background
An animated background with floating bubbles.
csstailwindbackground +1
Background
Cosmic Portal
A breathtaking, animated 3D portal built with Three.js that features glowing rings, floating crystals, space distortion, and interdimensional streams.
csstailwindbackground +2
Background
Falling Stars Background
A stunning animated starfield background with glowing and sharp trail effects.
csstailwindbackground +1
Background
Flickering Grid
A flickering grid background made with Canvas, fully customizable using Tailwind CSS.
csstailwindbackground +2
Background
Interactive Grid Pattern
A interactive background grid pattern made with SVGs, fully customizable.
csstailwindbackground +2
Background
Lamp Effect
A captivating lamp lighting effect with conic gradients, spotlights, and glowing lines for an immersive visual experience.
csstailwindbackground +1
Background
Liquid Background
A reactive and dynamic background effect using OGL for WebGL-based visuals.
csstailwindbackground +2
Background
Neural Background
A dynamic, shader-powered animated background with fluid neural-like visuals using OGL and GLSL.
csstailwindbackground +3
Background
Particle Whirlpool
An animated background with swirling particles.
csstailwindbackground +2
Background
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.
csstailwindbackground +2
Background
Pattern Background
Simple animated pattern background to make your sections stand out.
csstailwindbackground +1
Background
Ripple
An animated ripple effect typically used behind elements to emphasize them.
csstailwindbackground +1
Background
Silk Background
A soft, flowing shader-powered background inspired by silk fabric motion and texture, rendered using ShaderToy.
csstailwindbackground +3
Background
Singularity Background
A shader-based background.
csstailwindbackground +3
Background
Snowfall Background
A beautifully animated snowfall effect applied as a background.
csstailwindbackground +1
Background
Sparkles
A configurable sparkles component that can be used as a background or as a standalone component.
csstailwindbackground +1
Background
Stars Background
A parallax-animated starfield background using layered motion and randomized star positions.
csstailwindbackground +2
Background
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.
csstailwindbackground +3
Background
Tetris
Tetris background component, you can even click on a block to eliminate it.
csstailwindbackground
Background
Thunderstorm Background
A shader-based background inspired by thunderstorm in clouds.
csstailwindbackground +3
Background
Video Text
A text component with a video background.
csstailwindbackground +1
Background
Vortex Background
A wavy, swirly, vortex background ideal for CTAs and backgrounds.
csstailwindbackground +3
Background
Warp Background
A container component that applies a warp animation effect to its children
csstailwindbackground +1
Background
Wavy Background
A cool background effect with waves that move.
csstailwindbackground +2
Button
Button
Gradient Button
A stylish animated button with a rotating conic gradient border and customizable properties for a vibrant look.
csstailwindbutton
Button
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.
csstailwindbutton +1
Button
Rainbow Button
A rainbow effect on button.
csstailwindbutton +1
Button
Ripple Button
A stylish ripple button component with customizable colors and animation duration.
csstailwindbutton +1
Button
Shimmer Button
A button with a shimmering animated effect.
csstailwindbutton +1
Card
2 new
CardNew
Fey Cards
An animated hover card stack with layered image swapping and a cinematic heading reveal.
csstailwindcard +1
CardNew
Floating Card
A perspective, 3D, Tilt card as seen on Perplexity Comet's website.
csstailwindcard +3
Card
3D Card Effect
A card perspective effect, hover over the card to elevate card elements.
csstailwindcard +1
Card
Apple Card Carousel
A sleek, Apple‑style card carousel with blur‑loading images, modal expansion, and smooth scrolling controls.
csstailwindcard +1
Card
Card Spotlight
A card component with a dynamic spotlight effect that follows the mouse cursor, enhancing visual interactivity.
csstailwindcard +1
Card
Direction Aware Hover Card
A direction aware hover card, that displays an image with dynamic hover effects and customizable content overlay.
csstailwindcard +1
Card
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
Card
Glare Card
A glare effect that happens on hover, as seen on Linear's website.
csstailwindcard +1
Cursor
Cursor
Fluid Cursor
A GPU-accelerated animated cursor trail that simulates fluid motion.
csstailwindcursor +2
Cursor
Image Trail Cursor
An interactive cursor effect that creates a dynamic trail of images following mouse movement with multiple animation variants.
csstailwindcursor +2
Cursor
Sleek Line Cursor
A reactive animated cursor trail with smooth wave-like motion, using spring physics and dynamic color waves.
csstailwindcursor +2
Cursor
Smooth Cursor
A customizable, physics-based smooth cursor animation component for Vue applications.
csstailwindcursor +1
Cursor
Tailed Cursor
A smooth, colorful ribbon cursor trail rendered with WebGL using OGL, featuring dynamic shaders and customizable animation effects.
csstailwindcursor +2
Device Mockup
Forms & Input
Forms & Input
Balance Slider
A dynamic balance slider with adjustable colors, limits, and interactive tooltip.
csstailwindinput
Forms & Input
Color Picker
A comprehensive color picker component with support for multiple color formats, accessibility features, and custom swatches.
csstailwindinput +2
Forms & Input
File Upload
A modern file upload component with a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern.
csstailwindinput +1
Forms & Input
Halo Search
A futuristic search input component featuring multiple glowing rings and subtle animated halos for a vibrant, immersive UI experience.
csstailwindinput +1
Forms & Input
Input
A versatile and visually dynamic input field with radial hover effects, styled for modern web applications.
csstailwindinput +1
Forms & Input
Placeholders And Vanish Input
Sliding in placeholders and vanish effect of input on submit
csstailwindinput +1
Miscellaneous
1 updated
MiscellaneousUpdated
Shader Toy Viewer
A powerful and flexible component to render interactive GLSL shaders from ShaderToy in the browser.
csstailwindshader-toy +2
Miscellaneous
Animate Grid
Skew Animation grid with box shadow.
csstailwindinput
Miscellaneous
Animated Circular Progress Bar
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
csstailwindinput +1
Miscellaneous
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
Miscellaneous
Animated Modal
A modal dialog with a 3D entrance animation and blurred backdrop.
csstailwindmodal +2
Miscellaneous
Animated Tabs
A tabs component with a shared-layout active pill and a stacked content transition.
csstailwindtabs +2
Miscellaneous
Animated Tooltip
A cool tooltip that reveals on hover, follows mouse pointer
csstailwindaceternity-ui
Miscellaneous
Bento Grid
A cool grid layout with different child component.
csstailwindbento +1
Miscellaneous
Book
A 3D book component featuring customizable sizes and color gradients.
csstailwindx-ui
Miscellaneous
Compare
Slide to compare any two pieces of content - images, designs, code, or custom elements
csstailwindaceternity-ui
Miscellaneous
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
Miscellaneous
Dock
A macOS-style dock with magnifying icons as you hover over them.
csstailwind
Miscellaneous
Expandable Gallery
A responsive image gallery with an interactive hover effect that expands images dynamically.
csstailwindgallery
Miscellaneous
Images Slider
A full page slider with images that can be navigated with the keyboard.
csstailwindimages +1
Miscellaneous
Lens
A lens component to zoom into images, videos, or practically anything.
csstailwindaceternity-ui
Miscellaneous
Link Preview
Dynamic link previews for your anchor tags
csstailwindaceternity-ui
Miscellaneous
Marquee
A customizable scrolling component that loops its content horizontally or vertically, with configurable direction, hover pause, and repeat options.
csstailwindmagic-ui
Miscellaneous
Morphing Tabs
This is a morphing tabs interaction, recreated by Preet's work and featuring the gooey effect component.
csstailwind
Miscellaneous
Multi Step Loader
A step loader for screens that works with async conditions too.
csstailwindaceternity-ui
Miscellaneous
Photo Gallery
Showcase your team with pride using our stunning Photo Gallery Component.
csstailwindgallery
Miscellaneous
Scroll Island
A dynamic and interactive component that displays scroll progress with animated visuals and an expandable area for additional content.
csstailwindnumber-flow
Miscellaneous
SVG Mask
A dynamic SVG mask component that reveals content with hover and mouse movement.
csstailwindaceternity-ui
Miscellaneous
Timeline
A visually appealing and interactive timeline component with smooth animations, sticky labels, and a gradient scrolling effect.
csstailwindaceternity-ui
Miscellaneous
Tracing Beam
A component that renders a tracing beam effect with dynamic scrolling animations and gradient strokes.
csstailwindaceternity-ui
Special Effects
Special Effects
Animated Beam
An SVG beam connecting elements with animation.
csstailwindmagic-ui
Special Effects
Border Beam
A stylish animated border beam effect with customizable size, duration, colors, and delay.
csstailwindmagic-ui
Special Effects
Confetti
A Vue component for confetti animations.
csstailwindcanvas +1
Special Effects
Dither Shader
A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.
tailwindbackgroundcard +1
Special Effects
Glow Border
An animated border effect.
csstailwindmagic-ui
Special Effects
Glowing Effect
A dynamic proximity-based glow effect that reacts to mouse movements and scroll events, perfect for highlighting interactive elements.
csstailwindaceternity-ui
Special Effects
Images Badge
A badge with images that can be hovered to reveal more images.
csstailwindaceternity-ui
Special Effects
Meteors
A component that displays a meteor shower animation with customizable meteor count and styling.
csstailwindaceternity-ui
Special Effects
Neon Border
A visually appealing neon border component with customizable animations and colors.
csstailwindborder
Special Effects
Particle Image
Visually appealing particle animation applied to images as seen on NuxtLabs.com
csstailwindcanvas +1
Special Effects
Progressive Blur
A layered backdrop blur effect that gradually increases intensity in a chosen direction, perfect for depth, focus, and visual separation.
csstailwindmotion-v +2
Special Effects
Scales
A repeating diagonal, horizontal, or vertical line pattern background effect.
csstailwindaceternity-ui
Special Effects
Scratch To Reveal
The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.
csstailwindmagic-ui
Special Effects
Spring Calendar
An animated calendar widget that expands to reveal events and features smooth, spring‑based Motion‑V transitions.
csstailwindmotion-v
Testimonials
Testimonials
Animated Testimonials
An engaging and animated testimonial component showcasing user feedback with transitions and auto-play functionality.
csstailwindaceternity-ui +1
Testimonials
Design Testimonials
A premium, design-forward testimonial section featuring cinematic typography, magnetic parallax, word-by-word animations, and auto-cycling navigation.
csstailwindmotion-v +2
Testimonials
Testimonial Slider
A lightweight testimonial slider with image rotation, text transitions, and optional auto‑rotation.
csstailwindtestimonial
Text Animation
Text Animation
3D Text
A stylish 3D text component with customizable colors, shadows, and animation options.
csstailwind3d
Text Animation
Blur Reveal
A component to smoothly blur fade in content.
csstailwindmagic-ui
Text Animation
Box Reveal
An animated box reveal effect with customizable colors, duration, and delay.
csstailwindmagic-ui
Text Animation
Colourful Text
A text component with various colours, filter and scale effects.
csstailwindaceternity-ui
Text Animation
Container Text Flip
A container that flips through words, animating the width.
csstailwindaceternity-ui
Text Animation
Encrypted Text
A text reveal effect that starts as scrambled characters and progressively decrypts into the final message when it enters the viewport.
csstailwindmotion-v +3
Text Animation
Flip Words
A component that flips through a list of words.
csstailwindaceternity-ui
Text Animation
Focus
Highlight words in a sentence with a dynamic blurred effect and animated focus frame. Supports auto-cycling or manual hover focus mode.
csstailwindcodepen
Text Animation
Hyper Text
A hyper changing text animation as you hover..
csstailwindmagic-ui
Text Animation
Letter Pullup
Staggered letter pull up text animation.
csstailwindmagic-ui
Text Animation
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
Text Animation
Morphing Text
This MorphingText component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.
csstailwindmagic-ui
Text Animation
Number Ticker
Animate numbers to count up or down to a target number
csstailwindmagic-ui
Text Animation
Radiant Text
A glare effect on text.
csstailwindmagic-ui
Text Animation
Sparkles Text
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
csstailwindmagic-ui
Text Animation
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
Text Animation
Text Generate Effect
A cool text effect that fades in text on page load, one by one.
csstailwindaceternity-ui
Text Animation
Text Glitch
Creates a vibrant glitch effect on text with customizable speed, shadow colors, and optional hover-triggered animation.
csstailwind
Text Animation
Text Highlight
A text effect that fill background of a text to highlight it.
csstailwindaceternity-ui
Text Animation
Text Hover Effect
A text hover effect that animates and outlines gradient on hover, as seen on x.ai
csstailwind
Text Animation
Text Reveal
Animate text line-by-line using GSAP's SplitText for smooth word or line entrance effects.
csstailwindgsap
Text Animation
Text Reveal Card
Mousemove effect to reveal text content at the bottom of the card.
csstailwindaceternity-ui
Text Animation
Text Scroll Reveal
A component that reveals text word by word as you scroll, with customizable text and styling.
csstailwindmagic-ui
Visualization
Visualization
3D Carousel
A dynamic and interactive 3D carousel component using Three.js and Motion-V, allowing smooth infinite rotation and user-controlled interactions.
csstailwindthreejs +1
Visualization
Animated Logo Cloud
Animated company cloud logs. Usually we can use to show company logos.
csstailwind
Visualization
Bending Gallery
A curved, scrollable 3D gallery with dynamic image cards and animated text rendered using WebGL and OGL.
csstailwindogl +1
Visualization
File Tree
A component used to showcase the folder and file structure of a directory.
csstailwindmagic-ui
Visualization
Github Globe
A 3D interactive globe visualization with customizable arcs, points, and animation options inspired from Github.
csstailwindthreejs +1
Visualization
Globe
An interactive rotating globe component.
csstailwindcobe +1
Visualization
Icon Cloud
An interactive 3D tag cloud component
csstailwindmagic-ui
Visualization
Infinite Grid
A high-performance, interactive 3D infinite grid component built with OGL as seen on phantom.land
csstailwindphantom-land +2
Visualization
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.
csstailwindthreejs +1
Visualization
Liquid Glass Effect
A visually striking glassmorphism effect using SVG displacement filters similar to Apple Liquid Glass.
csstailwindapple +1
Visualization
Liquid Logo
An advanced WebGL-based component that applies a dynamic, liquid effect to logos or images using custom shaders.
csstailwindwebgl +1
Visualization
Logo Origami
Animated flipping logo with origami effect.
csstailwindhover-dev
Visualization
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
Visualization
Spline
A Vue wrapper component for the Spline 3D tool, providing events and auto-resizing.
csstailwindspline
Visualization
World Map
Displays a customizable world map with animated arcs and pulse effects for geographical points.
csstailwindaceternity-ui