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

如果你正在做官网开发 ，还在辛苦的手动实现那些动画特效，那今天推荐的这个库，至少让你提前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 分钟就能上手！

安装依赖

ruby 复制代码

# 安装 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

javascript 复制代码

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

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

配置主题

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

less 复制代码

@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 安装

sql 复制代码

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/zh-cn