如果你正在做 官网开发，还在辛苦的手动实现那些动画特效，那今天推荐的这个库，至少让你提前 4小时开始摸鱼!

以前，面对设计师的那些炫酷动画，实现起来是最耗头发的；产品经理还时不时的说一下，这效果不好看，我要的是五彩斑斓的黑！

还抱着 Element UI + Animate.css 在那里辛苦调试，苦苦思考好好的效果怎么到了 safari 就变形了呢？

现如今，时代变了！

什么是 Inspira UI

Inspira UI 是专门为 Vue3/Nuxt 开发的可复用的动画组件集合。

完全免费和开源
完美支持 vue3/ Nuxt3
包括 按钮、 输入框、 背景、 卡片、 设备模拟、 光标、 2D/3D效果等 120+ 个特效组件
样式基于 TailwindCSS
动画使用 motion-v、 gsap 实现
对移动设备特别优化

来欣赏一下效果：

视频文字

图库

3d文字

走马灯

spline

Inspira UI 的优势

1.兼顾视觉与功能

以**「轻量动效组件库」 为定位，核心组件覆盖基础 UI（按钮、输入框等）和模块（3D 交互、动态背景等），所有组件均内置微交互**设计。动效无需额外开发完美适配企业官网、电商页面等需视觉增强的场景，实现 “拿即用” 的开发体验。

Liquid Logo

2.基于Tailwind CSS V4

底层基于 Tailwind CSS 构建组件基础样式，确保原子类叠加的灵活性；支持浅色、深色模式一键切换；支持 ypeScript，所有组件与 API 均提供完整类型定义。

浅色模式

3.深度兼容 Vue/Nuxt 生态，性能提升

无论是 Vue 单页应用还是 Nuxt 服务端渲染项目，都能无缝融入现有技术栈，降低开发者的学习与迁移成本。

同时基于 Vue 3.4+ 新增的 defineModel 与 watchEffect 语法重构，减少了至少 30% 的响应式依赖开销;

4.多端性能优化

对于 3D 组件，在支持 WebGPU 的浏览器中，渲染帧率较旧版 WebGL 提升 2-3 倍.

而对于移动端设备、低配置设备会自动调节动效帧率，性能大大提高；同时，对所有组件做了 “懒加载 + 预渲染” 优化，首屏加载速度较旧版提升 35%

如何使用？

Inspira UI 官方文档支持中文，写的也很接地气，通俗易懂 5 分钟就能上手！

安装依赖

    # 安装 tainlwind
    pnpm install tailwindcss @tailwindcss/vite

    # 安装 tailwindcss 库和实用工具
    pnpm install -D clsx tailwind-merge class-variance-authority tw-animate-css

    # 安装 VueUse 和其他支持库
    pnpm install @vueuse/core motion-v

配置 vite

    
import { defineConfig } 
from 
'vite'
    
import tailwindcss 
from 
'@tailwindcss/vite'

    
export 
default 
defineConfig({
      
plugins: \[
        
tailwindcss(),
      ],
    })

配置主题

可以根据需要自由配置主题色。

    
@import tailwindcss;
    
@import tw-animate-css;
    
@custom-variant dark (&:is(.dark *));

    
:root {
      
--card: 
oklch(
1 
0 
0);
      
--card-foreground: 
oklch(
0.141 
0.005 
285.823);
    }
    
.dark {
      
--background: 
oklch(
0.141 
0.005 
285.823);
      
--foreground: 
oklch(
0.985 
0 
0);
    }
    
@theme inline {
      
--color-background: 
var(--background);
    }
    
@layer base {
      * {
        
@apply border-border outline-ring/
50;
      }
      
body {
        
@apply bg-background text-foreground;
      }
    }
    
html {
      
color-scheme: light dark;
    }
    
html
.dark {
      
color-scheme: dark;
    }
    
html
.light {
      
color-scheme: light;
    }

最后一步，可以复制源码或者通过 Cli 来安装。

直接使用源码

找到想要的组件，复制粘贴到自己的项目中即可。

通过 Cli 安装

    pnpm dlx shadcn-vue\@latest add "https://registry.inspira-ui.com/gradient-button.json>"

然后，你就有了一个炫酷的按钮。

Gradient Button 效果

最后

Vue3/ Nuxt3开发者再也不用羡慕 React生态的 Aceternity UI、 Magic UI 了。

Inspira UI 直接填补了 vue3 生态中动效开发这一块的缺陷，可以将这些奇妙的设计应用在企业官网、特效开发中，大大节省开发成本。

让 Vue3 生态再一次得到加强，快去试试这个炫酷的项目把！

附上官网地址：inspira-ui.com/docs/cn

作品推荐

Haotab 新标签页，一个优雅的新标签页

chrome 商店 | edge 商店 | 在线版

静待你的体验❤

ITPub博客

Vue3 生态再一次加强，网站开发无敌！