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 分钟就能上手！
- 安装依赖
# 安装 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 新标签页，一个优雅的新标签页
静待你的体验❤
来源：juejin.cn/post/7554572856147984424
