Inspira UI

Inspira UI is a free and open-source Vue.js component library that provides a collection of beautiful and customizable components for building modern web applications.

Documentation Sets

• Inspira UI Documentation: The complete Inspira UI documentation.

LandingEn

• Build beautifull website using Vue & Nuxt.: Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Docus brings together the best of the Nuxt ecosystem. Powered by Nuxt UI.

DocsEn

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

LandingCn

• 使用 Vue 和 Nuxt 构建美丽的网站。: 快速、灵活、SEO 优化的文档，开箱即用美观设计。Docus 汇集了 Nuxt 生态系统的精华。由 Nuxt UI 驱动。

DocsCn

• 入门指南: 使用 shadcn-vue、motion-v 和 TailwindCSS 构建的可复用组件
• 安装: 如何在你的应用中安装 Inspira UI。
• 如何贡献: 遵循以下指南以确保顺利协作
• 行为准则: 行为准则阐述了我们对参与者行为的期望以及不可接受行为的后果。
• 极光背景: 细腻的极光（南北极光）背景效果。
• 黑洞背景: 令人沉浸的画布背景效果，模拟扭曲的“黑洞”隧道，包含动画圆盘、放射线与粒子。
• 气泡背景: 具有漂浮气泡的动画背景。
• 宇宙传送门: 使用 Three.js 构建的震撼 3D 传送门，包含发光环、漂浮水晶、空间扭曲和次元流体。
• 流星背景: 华丽的星空动画背景，带有发光和锐利拖尾效果。
• 闪烁网格: 使用 Canvas 制作的闪烁网格背景，可通过 Tailwind CSS 完全自定义。
• 交互网格图案: 采用 SVG 制作的交互式网格背景，完全可自定义。
• 灯光效果: 引人注目的灯光效果，包含圆锥渐变、聚光与发光线，带来沉浸式视觉体验。
• 液态背景: 使用 OGL 实现的响应式动态背景效果，基于 WebGL。
• 神经网络背景: 使用 OGL 与 GLSL 的动态着色器背景，呈现流动的神经质视觉效果。
• 粒子漩涡: 带有旋转粒子的动画背景。
• 粒子背景: 粒子能为页面增加动态与沉浸感，营造深度、运动和交互的视觉效果。
• 图案背景: 简单的动画图案背景，让版块更突出。
• 涟漪: 用于突出元素的动画涟漪效果。
• 丝绸背景: 柔和流动的着色器背景，灵感来自丝绸纹理与运动，基于 ShaderToy。
• 奇点背景: 一个基于着色器的背景。
• 雪花背景: 优雅的雪花飘落动画背景。
• 闪光: 可配置的闪光组件，可作为背景或独立使用。
• 星空背景: 使用分层运动与随机星位的视差星空动画背景。
• Stractium 背景: 基于着色器的背景，灵感来自复杂分形与有机纹理，使用光线步进与 GLSL 创建不断演化的视觉效果。
• 俄罗斯方块: 俄罗斯方块背景组件，甚至可以点击方块来消除。
• 雷暴背景: 受云层雷暴启发的基于着色器的背景。
• 视频文字: 带有视频背景的文字组件。
• 漩涡背景: 波动、旋转的漩涡背景，适用于 CTA 与背景展示。
• 扭曲背景: 为子元素添加扭曲动画效果的容器组件。
• 波浪背景: 流动的波浪背景效果。
• 渐变按钮: 一款带有旋转圆锥渐变边框的时尚动效按钮，提供可自定义的属性，呈现活力效果。
• 交互悬停按钮: 一款视觉效果出色的按钮组件，悬停时呈现动态过渡，能在明暗模式下平滑适配，提升交互体验。
• 彩虹按钮: 在按钮上呈现彩虹效果。
• 波纹按钮: 一款带有可自定义颜色和动画时长的时尚波纹按钮组件。
• 闪光按钮: 一款带有闪烁动画效果的按钮。
• 3D 卡片效果: 具有透视效果的卡片，悬停时可让卡片元素提升。
• Apple 卡片轮播: 一款流畅的 Apple 风格卡片轮播，支持模糊加载图片、模态展开和平滑滚动控制。
• 卡片聚光效果: 一款带有动态聚光灯效果的卡片组件，光标移动时跟随，增强视觉互动。
• 方向感知悬停卡片: 方向感知的悬停卡片，在悬停时显示带动态效果的图片，并提供可自定义的内容覆盖层。
• 翻转卡片: 一款动态的翻转卡片，沿 X 轴或 Y 轴平滑实现 180 度翻转，带来有趣的交互视觉效果。
• 高光卡片: 悬停时出现高光效果的卡片，灵感来自 Linear 网站。
• 流体光标: GPU 加速的动画光标尾迹，模拟流体运动。
• 图像尾迹光标: 一种交互式光标效果，鼠标移动时呈现动态的图像尾迹，并提供多种动画变体。
• 流线光标: 具有平滑波动尾迹的响应式动画光标，使用弹簧物理和动态色彩波动。
• 平滑光标: 适用于 Vue 应用的可定制物理驱动平滑光标动画组件。
• 尾迹光标: 使用 OGL 渲染的顺滑彩带尾迹光标，具备动态着色器和可定制的动画效果。
• iPhone 模型: iPhone 的 SVG 设备模型。
• Safari 模型: Safari 浏览器的 SVG 模型。
• 所有组件: Inspira UI 提供的所有组件的列表。
• 平衡滑块: 具备可调颜色、限制和交互提示的动态平衡滑块。
• 取色器: 全功能的取色组件，支持多种颜色格式、无障碍特性与自定义色板。
• 文件上传: 现代文件上传组件，带 3D 卡片效果、拖放交互和响应式网格背景。
• 光晕搜索框: 具有多重发光环与细微动画光晕的未来感搜索输入，为界面带来沉浸式体验。
• 输入框: 具有径向悬停效果的多功能动态输入框，适配现代 Web 应用。
• 占位符滚动与消失输入框: 输入框占位符滑入，并在提交时呈现消失效果。
• 动画网格: 倾斜动画网格，带投影效果。
• 动画圆形进度条: 显示百分比的圆形仪表盘动画组件。
• 动画列表: 逐个引入的动画列表，适合在落地页展示通知或事件。
• Animated Modal: 带 3D 入场动画与背景模糊效果的弹窗组件。
• Animated Tabs: 带共享布局选中态胶囊与堆叠内容切换动画的 Tabs 组件。
• 动画提示: 炫酷的提示气泡，悬停时揭示并跟随鼠标。
• Bento 网格: 炫酷的 Bento 网格布局，可放置不同子组件。
• 书本: 可自定义尺寸与渐变的 3D 书本组件。
• 对比: 通过滑动比较两组内容——图像、设计、代码或自定义元素。
• 容器滚动: 根据滚动进度变换内部内容的滚动效果，包含缩放与旋转的平滑过渡。
• Dock: 类似 macOS 的 Dock，悬停时放大图标。
• 可扩展画廊: 响应式图片画廊，悬停时动态放大图片。
• 图片滑块: 全屏图片滑块，可使用键盘导航。
• 放大镜: 用于放大图片、视频或任意元素的镜头组件。
• 链接预览: 为锚点生成动态链接预览。
• 跑马灯: 可定制的循环滚动组件，支持水平/垂直方向、悬停暂停与重复次数。
• 变形标签页: 复刻 Preet 的胶状变形标签交互，包含粘连效果。
• 多步加载器: 多步骤加载组件，支持异步条件。
• 照片画廊: 用精美的画廊展示团队风采。
• 滚动岛: 具备动态动画的交互组件，展示滚动进度，并带可展开的附加内容区域。
• Shader Toy Viewer: 在浏览器中渲染 ShaderToy GLSL 着色器的强大灵活组件。
• SVG 遮罩: 通过悬停与鼠标移动揭示内容的动态 SVG 遮罩组件。
• 时间线: 视觉化、交互式的时间线组件，带平滑动画、粘性标签与渐变滚动效果。
• 跟踪光束: 渲染跟踪光束效果的组件，支持动态滚动动画与渐变描边。
• 动画光束: 通过 SVG 连接元素的光束动画。
• 边框光束: 可定制尺寸、时长、颜色与延迟的炫酷动画边框光束效果。
• 彩带: 用于彩带动画的 Vue 组件。
• 抖动着色器: 用于图像的实时有序抖动效果，非常适合像素艺术和复古风格。
• 发光边框: 动态的发光边框效果。
• 发光效果: 基于距离的动态发光效果，对鼠标移动与滚动作出响应，适合突出可交互元素。
• 图片徽章: 一个带有图片的徽章，悬停时可展示更多图片。
• 流星雨: 展示流星雨动画的组件，可自定义流星数量与样式。
• 霓虹边框: 视觉吸引力强的霓虹边框组件，可自定义动画与颜色。
• 粒子图像: 将粒子动画应用到图像上的炫酷效果，类似 NuxtLabs.com 上的展示。
• 渐进模糊: 一种分层的背景模糊效果，会在指定方向上逐渐增强强度，适合营造景深、聚焦与视觉分隔。
• 鳞片纹理: 一种重复的对角线、水平线或垂直线图案背景效果。
• 刮刮乐揭示: 互动式刮刮乐效果，可自定义尺寸与动画，在刮开后显示隐藏内容。
• 弹性日历: 带弹簧动画的日历组件，可展开查看事件，使用 Motion-V 实现平滑过渡。
• 动态评价: 展示用户反馈的动态组件，包含过渡与自动播放功能。
• 设计感评价: 一个高级、设计优先的评价版块，包含电影感排版、磁性视差、逐词动画与自动轮播导航。
• 评价滑块: 轻量的评价滑块，包含图片旋转、文字过渡与可选自动轮播。
• 3D 文字: 时尚的 3D 文字组件，可自定义颜色、阴影与动画选项。
• 模糊揭示: 平滑模糊淡入内容的组件。
• 盒子揭示: 可自定义颜色、时长与延迟的盒子揭示动画。
• 彩色文字: 多彩文字组件，带滤镜与缩放效果。
• 容器文字翻转: 一个循环翻转单词的容器，并随文字宽度动画。
• 加密文字: 当进入视口时由乱码字符开始并逐步解密为最终内容的文字揭示效果。
• 翻转单词: 循环翻转单词列表的组件。
• 聚焦: 通过动态模糊和动画框高亮句子中的单词，支持自动循环或悬停手动聚焦模式。
• 超能文字: 悬停时快速变化的文字动画。
• 字符上提: 逐字上提的错落文字动画。
• 线条阴影文字: 为文字添加线条阴影效果，使其更具视觉吸引力。
• 文字变形: 动态在一组文本之间切换，呈现平滑的渐变效果。
• 数字滚动: 动画数字向目标值递增或递减。
• 光辉文字: 为文字添加耀眼的高光效果。
• 闪光文字: 为文字持续生成闪光与平滑过渡，非常适合突出显示的星光效果。
• 旋转文字: 让文字沿圆周运动的动画组件，可自定义速度、方向、颜色与过渡，打造动态效果。
• 文字生成效果: 炫酷的文字效果，在页面加载时逐字渐显。
• 文字故障: 为文字添加鲜明的故障效果，可自定义速度、阴影颜色，并可选择仅在悬停时触发。
• 文字高亮: 为文字填充背景以突出显示的效果。
• 文字悬停效果: 在悬停时为文字添加渐变描边与动画，灵感来自 x.ai。
• 文字揭示: 使用 GSAP 的 SplitText 实现逐行的文字入场动画。
• 文字揭示卡片: 鼠标移动时在卡片底部揭示文字的效果。
• 滚动文字揭示: 在滚动时逐词显现的文字组件，可自定义内容与样式。
• 弯曲画廊: 带曲面布局的可滚动 3D 画廊，使用 WebGL 与 OGL 渲染动态图片卡片和动画文字。
• 3D 轮播: 使用 Three.js 与 Motion-V 的动态交互 3D 轮播组件，支持平滑无限旋转与用户控制。
• 文件树: 用于展示目录中文件与文件夹结构的组件。
• Github 地球: 可自定义弧线、点与动画的 3D 互动地球可视化，灵感来自 Github。
• 地球: 可交互的旋转地球组件。
• 图标云: 交互式 3D 标签云组件。
• 无限网格: 使用 OGL 构建的高性能交互式 3D 无限网格组件，效果类似 phantom.land。
• 光速动效: 使用 Three.js 构建的高度可定制 3D 高速公路视觉效果，包含道路、车辆、灯光与失真等动画，可模拟沉浸式运动感。
• 液态玻璃效果: 使用 SVG 置换滤镜实现的玻璃拟态效果，类似 Apple Liquid Glass。
• 液态 Logo: 基于 WebGL 的高级组件，通过自定义着色器为徽标或图像添加动态液态效果。
• 动态 Logo 云: 动态展示公司 Logo 的云图，可用于展示合作或客户徽标。
• 折纸 Logo: 带折纸效果的翻转 Logo 动画。
• 轨道动画: 让内容沿圆轨道运动的组件，可自定义持续时间、延迟与半径，并可选择显示轨道路径。
• Spline: Spline 3D 工具的 Vue 包装组件，提供事件与自动缩放。
• 世界地图: 展示带有动画弧线和脉冲点效果的可自定义世界地图。
• 更新日志: 包含组件添加和更新的日志。

LandingFr

• Construisez de beaux sites web avec Vue et Nuxt.: Livrez rapidement, de manière flexible et optimisée pour le SEO avec une belle conception prête à l'emploi. Docus réunit le meilleur de l'écosystème Nuxt. Alimenté par Nuxt UI.

DocsFr

• Commencer: Composants réutilisables construits avec shadcn-vue, motion-v et TailwindCSS
• Installation: Comment installer Inspira UI dans votre application.
• Comment contribuer: Suivez les directives suivantes pour assurer une collaboration harmonieuse
• Code de conduite: Le code de conduite décrit nos attentes en matière de comportement des participants ainsi que les conséquences d'une conduite inacceptable.
• Fond Aurore: Un fond discret inspiré des aurores boréales pour votre site.
• Fond trou noir: Un fond hypnotisant sur canvas simulant un tunnel de « trou noir » avec disques animés, lignes radiales et particules.
• Fond bulles: Un fond animé avec des bulles flottantes.
• Portail cosmique: Un portail 3D animé impressionnant, réalisé avec Three.js, comprenant des anneaux lumineux, des cristaux flottants, une distorsion spatiale et des flux interdimensionnels.
• Fond étoiles filantes: Un superbe fond animé de champ d'étoiles avec des traînées lumineuses nettes.
• Grille scintillante: Un fond de grille scintillante réalisé avec Canvas, entièrement personnalisable via Tailwind CSS.
• Motif de grille interactif: Un fond de grille interactif réalisé en SVG, entièrement personnalisable.
• Effet lampe: Un effet lumineux immersif avec dégradés coniques, spots et lignes lumineuses.
• Fond liquide: Un effet de fond réactif et dynamique utilisant OGL pour des visuels WebGL.
• Fond neuronal: Un fond animé dynamique propulsé par shader, avec des visuels fluides de type réseau neuronal, utilisant OGL et GLSL.
• Tourbillon de particules: Un fond animé avec des particules tourbillonnantes.
• Fond particules: Les particules apportent de la dynamique et de la profondeur à vos visuels web, créant une impression de mouvement et d'interaction.
• Fond à motifs: Un fond animé simple pour faire ressortir vos sections.
• Ondes concentriques: Un effet d'ondulation animé, souvent utilisé derrière des éléments pour les mettre en valeur.
• Fond soyeux: Un fond doux et fluide propulsé par shader, inspiré du mouvement et de la texture de la soie, rendu avec ShaderToy.
• Fond singularité: Un fond basé sur un shader.
• Fond chute de neige: Un magnifique effet de chute de neige animé appliqué en arrière-plan.
• Étincelles: Un composant d'étincelles configurable, utilisable comme arrière-plan ou composant autonome.
• Fond étoilé: Un fond de champ d'étoiles avec parallaxe, utilisant des couches en mouvement et des positions d'étoiles aléatoires.
• Fond Stractium: Un fond basé sur des shaders, inspiré de motifs fractals complexes et de textures organiques, créé avec du raymarching et du GLSL. L'effet simule des textures visuelles évolutives et détaillées.
• Tetris: [object Object]
• Fond orageux: Un fond basé sur un shader, inspiré d'un orage dans les nuages.
• Texte vidéo: Un composant texte avec une vidéo en arrière-plan.
• Fond vortex: Un fond ondulant et tourbillonnant, idéal pour les CTA et arrière-plans.
• Fond Warp: Un composant conteneur qui applique un effet de warp animé à ses enfants.
• Fond ondulé: Un effet de fond sympa avec des vagues en mouvement.
• Bouton dégradé: Un bouton animé élégant avec une bordure en dégradé conique rotatif et des propriétés personnalisables pour un rendu dynamique.
• Bouton interactif au survol: Un bouton visuellement engageant qui réagit au survol avec des transitions dynamiques et s'adapte en douceur entre les modes clair et sombre pour une meilleure interactivité.
• Bouton arc-en-ciel: Un effet arc-en-ciel appliqué au bouton.
• Bouton à ondulation: Un bouton élégant avec un effet d'onde personnalisable et une durée d'animation ajustable.
• Bouton scintillant: Un bouton doté d'un effet de scintillement animé.
• Effet de carte 3D: Un effet de perspective sur carte ; survolez la carte pour mettre en relief ses éléments.
• Carrousel de cartes Apple: Un carrousel de cartes au style Apple, avec images floutées lors du chargement, extension en modal et commandes de défilement fluides.
• Carte avec spot lumineux: Une carte dotée d'un effet de projecteur dynamique qui suit le curseur, renforçant l'interactivité visuelle.
• Carte sensible à la direction du survol: Une carte qui détecte la direction du survol, affichant une image avec effets dynamiques et contenu superposé personnalisable.
• Carte rotative: Une carte dynamique avec des animations de rotation à 180 degrés sur les axes X et Y, offrant un effet visuel interactif et attrayant.
• Carte avec reflet: Un effet de reflet au survol, comme sur le site de Linear.
• Curseur fluide: Une traînée de curseur animée, accélérée par GPU, qui simule un mouvement fluide.
• Curseur à traînée d'images: Un effet de curseur interactif qui crée une traînée dynamique d'images suivant le mouvement de la souris, avec plusieurs variantes d'animation.
• Curseur ligne fluide: Une traînée de curseur animée et réactive avec un mouvement ondulant, utilisant une physique de ressort et des ondes de couleur dynamiques.
• Curseur fluide: Un composant de curseur fluide et personnalisable, basé sur la physique, pour les applications Vue.
• Curseur à ruban: Une traînée de curseur en ruban coloré et fluide rendue en WebGL avec OGL, dotée de shaders dynamiques et d'effets d'animation personnalisables.
• Maquette iPhone: Une maquette SVG d'iPhone.
• Maquette Safari: Une maquette SVG du navigateur Safari.
• Tous les composants: Liste de tous les composants fournis par Inspira UI.
• Curseur d'équilibre: Un curseur d'équilibre dynamique avec couleurs ajustables, limites configurables et info-bulle interactive.
• Sélecteur de couleur: Un sélecteur de couleurs complet prenant en charge plusieurs formats, l'accessibilité et des palettes personnalisées.
• Téléversement de fichier: Un composant moderne de téléversement de fichiers avec effet de carte 3D, glisser-déposer et arrière-plan en grille réactive.
• Recherche Halo: Un champ de recherche futuriste doté d'anneaux lumineux et d'auras animées pour une expérience immersive.
• Champ de saisie: Un champ de saisie polyvalent et visuellement dynamique avec effet radial au survol, conçu pour les applications web modernes.
• Placeholders et saisie qui disparaît: Des placeholders qui glissent et un champ qui disparaît après soumission.
• Grille animée: Grille animée inclinée avec ombre portée.
• Barre de progression circulaire animée: Une barre de progression circulaire animée qui affiche une jauge avec valeur en pourcentage.
• Liste animée: Une liste animée séquentielle qui introduit chaque élément avec un délai, idéale pour afficher des notifications ou des événements sur une landing page.
• Animated Modal: Une fenêtre modale avec une animation 3D et un arrière-plan flouté.
• Animated Tabs: Un composant d'onglets avec un indicateur actif en shared layout et une transition de contenu en pile.
• Infobulle animée: Une infobulle sympa qui se révèle au survol et suit le pointeur de la souris.
• Grille bento: Une grille soignée pouvant accueillir différents composants enfants.
• Livre: Un composant de livre 3D avec tailles et dégradés personnalisables.
• Comparaison: Faites glisser pour comparer deux contenus – images, maquettes, code ou éléments personnalisés.
• Défilement conteneur: Effet de défilement d'un conteneur qui transforme son contenu selon la progression, avec transitions fluides de mise à l'échelle et rotation.
• Dock: Un dock façon macOS avec agrandissement des icônes au survol.
• Galerie extensible: Une galerie d'images réactive avec effet interactif au survol qui agrandit les images dynamiquement.
• Slider d'images: Un slider pleine page avec navigation clavier.
• Loupe: Un composant loupe pour zoomer sur des images, vidéos ou tout autre contenu.
• Aperçu de lien: Aperçus dynamiques pour vos balises de lien.
• Marquee: Un composant défilant personnalisable qui boucle son contenu horizontalement ou verticalement, avec direction, pause au survol et répétitions configurables.
• Onglets morphing: Une interaction d'onglets morphing recréée à partir du travail de Preet et intégrant un effet gooey.
• Loader multi-étapes: Un loader en plusieurs étapes pour les écrans, compatible avec des conditions asynchrones.
• Galerie photo: Présentez votre équipe avec fierté grâce à ce superbe composant de galerie photo.
• Scroll Island: Un composant interactif affichant la progression de défilement avec des visuels animés et une zone extensible pour du contenu supplémentaire.
• Visionneuse Shader Toy: Un composant puissant et flexible pour rendre des shaders GLSL interactifs de ShaderToy dans le navigateur.
• Masque SVG: Un composant de masque SVG dynamique qui révèle le contenu au survol et aux mouvements de souris.
• Chronologie: Une timeline interactive et esthétique avec animations fluides, étiquettes collantes et effet de dégradé au défilement.
• Faisceau traçant: Un composant qui rend un effet de faisceau traçant avec animations de défilement dynamiques et traits en dégradé.
• Rayon animé: Un rayon SVG reliant des éléments avec une animation.
• Rayon de bordure: Un effet de rayon animé le long d'une bordure, avec taille, durée, couleurs et délai personnalisables.
• Confettis: Un composant Vue pour des animations de confettis.
• Shader de tramage: Effet de tramage ordonné en temps réel pour les images, idéal pour le pixel art et les esthétiques rétro.
• Bordure lumineuse: Un effet de bordure animée.
• Effet lumineux: Un effet lumineux réactif basé sur la proximité, qui répond aux mouvements de souris et au défilement pour mettre en valeur les éléments interactifs.
• Badge d'images: Un badge avec des images sur lequel on peut survoler pour révéler d'autres images.
• Pluie de météores: Un composant affichant une animation de pluie de météores avec nombre et style personnalisables.
• Bordure néon: Une bordure néon esthétique avec animations et couleurs personnalisables.
• Image en particules: Une animation de particules appliquée aux images, comme sur NuxtLabs.com.
• Flou progressif: Un effet de flou d'arrière-plan en couches qui augmente progressivement l'intensité dans une direction choisie, parfait pour la profondeur, la mise au point et la séparation visuelle.
• Écailles: Un effet d'arrière-plan avec un motif de lignes diagonales, horizontales ou verticales répétées.
• Gratter pour révéler: Le composant ScratchToReveal crée un effet à gratter interactif avec dimensions et animations personnalisables, révélant le contenu caché en dessous.
• Calendrier à ressorts: Un widget de calendrier animé qui s'étend pour révéler les événements et propose des transitions Motion‑V fluides basées sur des ressorts.
• Témoignages animés: Un composant de témoignages animé et attractif, présentant les retours utilisateurs avec transitions et lecture automatique.
• Témoignages design: Une section de témoignages premium et orientée design, avec typographie cinématographique, parallaxe magnétique, animations mot à mot et navigation en lecture automatique.
• Slider de témoignages: Un slider de témoignages léger avec rotation d'image, transitions de texte et auto-rotation optionnelle.
• Texte 3D: Un composant de texte 3D élégant avec couleurs, ombres et options d'animation personnalisables.
• Révélation floutée: Un composant pour faire apparaître du contenu avec un flou progressif.
• Révélation en boîte: Un effet d'apparition animé avec boîte colorée, aux couleurs, durée et délai personnalisables.
• Texte coloré: Un composant texte avec couleurs variées, effets de filtre et d'échelle.
• Conteneur de mots pivotants: Un conteneur qui fait défiler des mots en animant la largeur.
• Texte chiffré: Un effet de révélation du texte qui commence par des caractères brouillés et se déchiffre progressivement en message final lorsqu'il entre dans la fenêtre d'affichage.
• Mots pivotants: Un composant qui fait défiler une liste de mots en rotation.
• Focus: Met en évidence des mots dans une phrase avec un effet de flou dynamique et un cadre animé. Prend en charge le cycle automatique ou un mode focus au survol.
• Hyper texte: Une animation de texte changeant rapidement au survol.
• Lettres en soulèvement: Animation de texte où les lettres se soulèvent en décalé.
• Texte à ombre linéaire: Un composant de texte avec ombre en ligne pour Magic UI, ajoutant un effet visuel accrocheur.
• Texte morphing: Le composant MorphingText fait passer en douceur un tableau de chaînes de texte pour un effet visuel fluide et engageant.
• Compteur numérique: Anime des nombres pour compter à la hausse ou à la baisse jusqu'à une valeur cible.
• Texte rayonnant: Un effet de reflet sur le texte.
• Texte étincelant: Un texte dynamique qui génère en continu des étincelles avec des transitions fluides, idéal pour mettre en valeur du texte avec des étoiles animées.
• Texte rotatif: Le composant Spinning Text anime un texte en rotation circulaire avec vitesse, direction, couleur et transitions personnalisables pour un effet dynamique.
• Effet de génération de texte: Un effet sympa qui fait apparaître le texte au chargement, lettre par lettre.
• Texte glitch: Crée un effet glitch coloré sur le texte avec vitesse, ombres et déclenchement au survol personnalisables.
• Surlignage de texte: Un effet qui remplit l'arrière-plan du texte pour le mettre en valeur.
• Effet de texte au survol: Un effet de survol qui anime et trace un dégradé autour du texte, comme sur x.ai.
• Révélation de texte: Anime le texte ligne par ligne grâce à SplitText de GSAP pour des entrées fluides de mots ou de lignes.
• Carte texte dévoilé: Effet au mouvement de souris pour révéler du texte en bas de la carte.
• Révélation au défilement: Un composant qui dévoile le texte mot par mot pendant le défilement, avec texte et styles personnalisables.
• Galerie courbée: Une galerie 3D incurvée et défilante avec cartes d'images dynamiques et texte animé rendu avec WebGL et OGL.
• Carrousel 3D: Un carrousel 3D dynamique et interactif utilisant Three.js et Motion-V, offrant une rotation infinie fluide et des interactions utilisateur.
• Arborescence de fichiers: Un composant pour présenter la structure de dossiers et fichiers d'un répertoire.
• Globe Github: Une visualisation 3D interactive d'un globe avec arcs, points et options d'animation personnalisables, inspirée de Github.
• Globe: Un globe interactif en rotation.
• Nuage d'icônes: Un nuage de tags 3D interactif.
• Grille infinie: Une grille 3D infinie, interactive et performante, construite avec OGL comme vue sur phantom.land.
• Vitesse lumière: Un effet visuel de route 3D hautement personnalisable construit avec Three.js, incluant route animée, voitures, lumières et distorsions pour une simulation immersive du mouvement.
• Effet verre liquide: Un effet de glassmorphism saisissant utilisant des filtres de déplacement SVG, similaire à l'effet Apple Liquid Glass.
• Logo liquide: Un composant avancé basé sur WebGL qui applique un effet liquide dynamique à des logos ou images via des shaders personnalisés.
• Nuage de logos animé: Un nuage de logos d'entreprises animé, idéal pour présenter des partenaires ou clients.
• Logo origami: Logo animé avec effet origami en rotation.
• Orbite: Un composant qui anime du contenu sur une orbite circulaire, avec durée, délai et rayon personnalisables, et une option pour afficher la trajectoire.
• Spline: Un wrapper Vue pour l'outil 3D Spline, avec événements et redimensionnement automatique.
• Carte du monde: Affiche une carte du monde personnalisable avec des arcs animés et des effets de pulsation sur les points géographiques.
• Journal des modifications: Contient le journal de l'ajout et de la mise à jour des composants.