🔧 阿川の電商水電行
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 交互、動態背景等），所有組件均內置微交互設計。動效無需額外開發完美適配企業官網、電商頁面等需視覺增強的場景，實現 “拿即用” 的開發體驗。
2.基於Tailwind CSS V4
底層基於 Tailwind CSS 構建組件基礎樣式，確保原子類疊加的靈活性；支持淺色、深色模式一鍵切換；支持 TypeScript，所有組件與 API 均提供完整類型定義。
3.深度兼容 Vue/Nuxt 生態，性能提升
無論是 Vue 單頁應用還是 Nuxt 伺服器端渲染項目，都能無縫融入現有技術棧，降低開發者的學習與遷移成本。
基於 Vue 3.4+ 新增的 defineModel與 watchEffect語法重構，減少 30% 響應式依賴開銷;
4.多端性能優化
對於 3D 組件，在支持 WebGPU 的瀏覽器中，渲染幀率較舊版 WebGL 提升 2-3 倍。
針對移動端設備、低配置設備自動調節動效幀率，性能大大提高；同時，對所有組件做了 “懶加載 + 預渲染” 優化，首屏加載速度較舊版提升 35%
如何使用？
Inspira UI 官方文檔支持中文，寫的也很接地氣，通俗易懂 5 分鐘就能上手！
- 安裝依賴
# 安裝 tailwind
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/zh-cn
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
