[{"data":1,"prerenderedAt":697},["ShallowReactive",2],{"page-/post/nuxt/ui/two-top-class-front-end-ui-components-repo":3,"surrounding-page":688},{"id":4,"title":5,"author":6,"body":7,"date":675,"description":13,"extension":676,"group":6,"lastmod":677,"meta":678,"navigation":679,"path":680,"rawbody":681,"seo":682,"showTitle":6,"stem":683,"tags":684,"versions":6,"__hash__":687},"content/post/nuxt/ui/two-top-class-front-end-ui-components-repo.md","交互效果太单调？推荐两个动画丝滑的组件库，Vue 和 Nuxt都适用！",null,{"type":8,"value":9,"toc":656},"minimark",[10,14,17,20,23,31,38,47,50,56,59,72,81,86,218,221,224,230,237,242,247,252,257,262,267,272,277,282,287,290,299,302,313,316,324,327,330,347,350,353,365,367,372,374,383,389,407,411,465,468,473,481,486,491,496,501,506,511,516,519,522,525,531,546,549,551,559,562,576,585,598,601,610,616,619,622,625,644,647],[11,12,13],"p",{},"对于开发人员来说，最头疼的问题可能就是如何让自己的界面变得又高级又简洁、又丝滑又不拖泥带水、又有趣又不繁杂....",[11,15,16],{},"这也是我非常头疼的且至今都解决不了的问题！ 或许最好的办法就是专业的事情找专业的人去做！去找设计师！",[11,18,19],{},"开发、设计、销售，总不能一个人全占了吧（那你也太牛了吧！",[11,21,22],{},"虽然做不到尽善尽美，但是我们可以借助 UI 库来实现相对简洁、高级、丝滑。",[11,24,25,26,30],{},"对于简洁来说，",[27,28,29],"code",{},"shadcn/vue"," 是我的首选，因为它的生态最完整，不仅仅是基础组件，还包含了一些好用的第三方组件。",[11,32,33,34,37],{},"对于动画效果，我推荐这两个专门针对动画效果的 ",[27,35,36],{},"Vue"," 生态下的库",[11,39,40,43,44],{},[27,41,42],{},"inspira-ui"," 、",[27,45,46],{},"vue-bits",[48,49,42],"h2",{"id":42},[11,51,52,53],{},"官方地址：",[27,54,55],{},"https://inspira-ui.com/",[11,57,58],{},"Github：",[60,61,62,69],"ul",{},[63,64,65,66],"li",{},"star: ",[27,67,68],{},"3.4k",[63,70,71],{},"MIT",[11,73,74,75,78,79],{},"完全兼容 ",[27,76,77],{},"Nuxt"," 和 ",[27,80,36],{},[82,83,85],"h3",{"id":84},"组件统计108-个","组件统计（108 个）",[87,88,89,105],"table",{},[90,91,92],"thead",{},[93,94,95,99,102],"tr",{},[96,97,98],"th",{},"类型",[96,100,101],{},"个数",[96,103,104],{},"说明",[106,107,108,120,131,142,153,163,174,185,196,207],"tbody",{},[93,109,110,114,117],{},[111,112,113],"td",{},"Backgrounds",[111,115,116],{},"20",[111,118,119],{},"背景",[93,121,122,125,128],{},[111,123,124],{},"Buttons",[111,126,127],{},"5",[111,129,130],{},"按钮",[93,132,133,136,139],{},[111,134,135],{},"Cards",[111,137,138],{},"6",[111,140,141],{},"卡片",[93,143,144,147,150],{},[111,145,146],{},"Cursors",[111,148,149],{},"2",[111,151,152],{},"鼠标悬浮效果",[93,154,155,158,160],{},[111,156,157],{},"Device Mocks",[111,159,149],{},[111,161,162],{},"模拟 iphone 界面，会加载 url 实际内容",[93,164,165,168,171],{},[111,166,167],{},"Input And Forms",[111,169,170],{},"3",[111,172,173],{},"表单",[93,175,176,179,182],{},[111,177,178],{},"Miscellaneous",[111,180,181],{},"25",[111,183,184],{},"一些特定的场景的动画效果",[93,186,187,190,193],{},[111,188,189],{},"Special Effects",[111,191,192],{},"10",[111,194,195],{},"特殊动画效果",[93,197,198,201,204],{},[111,199,200],{},"Text Animations",[111,202,203],{},"22",[111,205,206],{},"文字动画效果",[93,208,209,212,215],{},[111,210,211],{},"Visualization",[111,213,214],{},"13",[111,216,217],{},"3D效果",[82,219,220],{"id":220},"部分效果图",[11,222,223],{},"注意：大部分都是带动画的，此处只是演示静态图",[11,225,226],{},[227,228,229],"strong",{},"special effects",[11,231,232],{},[233,234],"img",{"alt":235,"src":236},"","https://img.zzao.club/article/202507171148723.png",[11,238,239],{},[227,240,241],{},"backgrounds",[11,243,244],{},[233,245],{"alt":235,"src":246},"https://img.zzao.club/article/202507171148725.png",[11,248,249],{},[227,250,251],{},"buttons",[11,253,254],{},[233,255],{"alt":235,"src":256},"https://img.zzao.club/article/202507171148726.png",[11,258,259],{},[227,260,261],{},"Cards 3D Effect",[11,263,264],{},[233,265],{"alt":235,"src":266},"https://img.zzao.club/article/202507171148727.gif",[11,268,269],{},[227,270,271],{},"Lens",[11,273,274],{},[233,275],{"alt":235,"src":276},"https://img.zzao.club/article/202507171148728.gif",[11,278,279],{},[233,280],{"alt":235,"src":281},"https://img.zzao.club/article/202507171148729.gif",[11,283,284],{},[233,285],{"alt":235,"src":286},"https://img.zzao.club/article/202507171148730.gif",[82,288,289],{"id":289},"收费组件",[11,291,292,293],{},"地址： ",[294,295,296],"a",{"href":296,"rel":297},"https://pro.inspira-ui.com/",[298],"nofollow",[11,300,301],{},"一开始这个库是没有收费组件的，全部免费，现在多出了几个收费组件（inspira-ui Pro）。",[60,303,304,307,310],{},[63,305,306],{},"Inspira UI Pro Component Pack 2 @ $25",[63,308,309],{},"Inspira UI Pro Components Pack @ $15",[63,311,312],{},"Inspiria - SaaS Landing Page Template @ $49",[11,314,315],{},"前两个是一些拥有特殊的交互效果的组件，第三个是模板",[11,317,318],{},[227,319,320],{},[321,322,323],"em",{},"吐槽一下：我喜欢交互丝滑的动效，但很多组件动画过于复杂，已经影响了实用性，可能只适合于炫技。",[82,325,326],{"id":326},"依赖情况",[11,328,329],{},"组件不同程度的依赖了以下几个库",[60,331,332,335,338,341,344],{},[63,333,334],{},"gsap",[63,336,337],{},"tailwindcss v4",[63,339,340],{},"threejs",[63,342,343],{},"motion-v",[63,345,346],{},"@vueuse/core",[82,348,349],{"id":349},"集成到项目",[11,351,352],{},"同 shadcn/vue 的集成项目，门槛很低。",[60,354,355,360],{},[63,356,357],{},[227,358,359],{},"支持复制粘贴使用",[63,361,362],{},[227,363,364],{},"支持 Inspira 的 Cli 工具安装",[48,366,46],{"id":46},[11,368,52,369],{},[27,370,371],{},"https://vue-bits.dev/",[11,373,58],{},[60,375,376,381],{},[63,377,65,378],{},[27,379,380],{},"296",[63,382,71],{},[11,384,74,385,78,387],{},[27,386,77],{},[27,388,36],{},[11,390,391,392,395,396,399,400,403,404],{},"虽然这个库看起来 ",[27,393,394],{},"star"," 很少，但它和 ",[27,397,398],{},"react-bits"," 是同一个作者",[27,401,402],{},"，react-bits"," 的 star 是 ",[27,405,406],{},"18.4k",[82,408,410],{"id":409},"组件统计69-个","组件统计（69 个）",[87,412,413,423],{},[90,414,415],{},[93,416,417,419,421],{},[96,418,98],{},[96,420,101],{},[96,422,104],{},[106,424,425,434,445,456],{},[93,426,427,429,432],{},[111,428,200],{},[111,430,431],{},"19",[111,433,206],{},[93,435,436,439,442],{},[111,437,438],{},"Animations",[111,440,441],{},"16",[111,443,444],{},"动画效果，可以包裹子组件",[93,446,447,450,453],{},[111,448,449],{},"Components",[111,451,452],{},"17",[111,454,455],{},"常用的组件，如轮播图、瀑布流、相册",[93,457,458,460,462],{},[111,459,113],{},[111,461,452],{},[111,463,464],{},"动态背景效果",[82,466,220],{"id":467},"部分效果图-1",[11,469,470],{},[227,471,472],{},"components",[11,474,475,478],{},[233,476],{"alt":235,"src":477},"https://img.zzao.club/article/202507171148731.png",[227,479,480],{},"text animations",[11,482,483],{},[233,484],{"alt":235,"src":485},"https://img.zzao.club/article/202507171148732.png",[11,487,488],{},[227,489,490],{},"Pixel Transition",[11,492,493],{},[233,494],{"alt":235,"src":495},"https://img.zzao.club/article/202507171148733.gif",[11,497,498],{},[227,499,500],{},"Click Spark",[11,502,503],{},[233,504],{"alt":235,"src":505},"https://img.zzao.club/article/202507171148734.gif",[11,507,508],{},[227,509,510],{},"Stack",[11,512,513],{},[233,514],{"alt":235,"src":515},"https://img.zzao.club/article/202507171148735.gif",[82,517,289],{"id":518},"收费组件-1",[11,520,521],{},"无",[82,523,326],{"id":524},"依赖情况-1",[11,526,527,528,530],{},"后两个库主要是支持 ",[27,529,113],{}," 这一类别的动画效果",[60,532,533,535,537,540,543],{},[63,534,334],{},[63,536,343],{},[63,538,539],{},"ogl",[63,541,542],{},"three",[63,544,545],{},"postprocessing",[48,547,349],{"id":548},"集成到项目-1",[11,550,352],{},[60,552,553,556],{},[63,554,555],{},"支持复制粘贴直接使用",[63,557,558],{},"支持 Cli",[48,560,561],{"id":561},"总结",[11,563,564,567,568,571,572,575],{},[227,565,566],{},"组件数量上"," ",[27,569,570],{},"Inspira"," 胜过 ",[27,573,574],{},"Vue Bits"," 一头",[11,577,578,579,581,582,584],{},"但 ",[27,580,570],{}," 的分类的命名非常不清晰，让人眼花缭乱，容易劝退。 ",[27,583,574],{}," 可以清晰快速的找到自己想要的组件。",[11,586,587,588,590,591,78,593,595,596],{},"依赖情况上是差不的，但还是因为分类原因。",[27,589,574],{}," 显得更加清晰一些，如果不用 Backgrounds，那绝大部分只需要 ",[27,592,334],{},[27,594,343],{},"，极个别需要 ",[27,597,539],{},[11,599,600],{},"集成到项目中同样轻松！",[11,602,603,604,606,607,609],{},"不知道是否是文档页面风格的原因，",[27,605,574],{}," 给我的感觉更加简洁和克制，",[27,608,570],{}," 更加花哨。",[11,611,612,613,615],{},"把组件整体浏览下来也感觉 ",[27,614,574],{}," 似乎可用的组件更多一些（虽然总体数量更少）",[11,617,618],{},"不知道你怎么看？",[620,621],"hr",{},[11,623,624],{},"以上就是两个组件库的整体情况了！",[11,626,627,628,630,631,633,634,637,638,640,641,643],{},"不得不说，有了 ",[27,629,77],{}," 对 ",[27,632,36],{}," 的包装，大大提升了开发体验。基础组件库又有 ",[27,635,636],{},"shadcn"," 这样全面的选手。再加上 ",[27,639,574],{}," 或者 ",[27,642,570],{}," 这种针对于动画效果的组件库。",[11,645,646],{},"再也不用担心页面过于粗糙啦！",[11,648,649,650,655],{},"欢迎访问我的",[294,651,654],{"href":652,"rel":653},"https://zzao.club",[298],"个人博客","，里面有更多 Nuxt 最新实战内容 🙌 🙌 🙌",{"title":235,"searchDepth":657,"depth":657,"links":658},2,[659,667,673,674],{"id":42,"depth":657,"text":42,"children":660},[661,663,664,665,666],{"id":84,"depth":662,"text":85},3,{"id":220,"depth":662,"text":220},{"id":289,"depth":662,"text":289},{"id":326,"depth":662,"text":326},{"id":349,"depth":662,"text":349},{"id":46,"depth":657,"text":46,"children":668},[669,670,671,672],{"id":409,"depth":662,"text":410},{"id":467,"depth":662,"text":220},{"id":518,"depth":662,"text":289},{"id":524,"depth":662,"text":326},{"id":548,"depth":657,"text":349},{"id":561,"depth":657,"text":561},"2025-07-11T00:00:00.000Z","md","2025-08-19T00:00:00.000Z",{},true,"/post/nuxt/ui/two-top-class-front-end-ui-components-repo","---\ntitle: 交互效果太单调？推荐两个动画丝滑的组件库，Vue 和 Nuxt都适用！\ndate: 2025-07-11\nlastmod: 2025-08-19\ntags: [\"Nuxt\", \"Vue3\", \"组件库\"]\n\n---\n对于开发人员来说，最头疼的问题可能就是如何让自己的界面变得又高级又简洁、又丝滑又不拖泥带水、又有趣又不繁杂....\n\n这也是我非常头疼的且至今都解决不了的问题！ 或许最好的办法就是专业的事情找专业的人去做！去找设计师！\n\n开发、设计、销售，总不能一个人全占了吧（那你也太牛了吧！\n\n虽然做不到尽善尽美，但是我们可以借助 UI 库来实现相对简洁、高级、丝滑。 \n\n对于简洁来说，`shadcn/vue` 是我的首选，因为它的生态最完整，不仅仅是基础组件，还包含了一些好用的第三方组件。\n\n对于动画效果，我推荐这两个专门针对动画效果的 `Vue` 生态下的库\n\n`inspira-ui` 、`vue-bits`\n\n## inspira-ui\n\n官方地址：`https://inspira-ui.com/`\n\nGithub：\n- star: `3.4k`\n- MIT\n\n完全兼容 `Nuxt` 和 `Vue`\n\n### 组件统计（108 个）\n\n| 类型              | 个数  | 说明                        |\n| --------------- | --- | ------------------------- |\n| Backgrounds     | 20  | 背景                        |\n| Buttons         | 5   | 按钮                        |\n| Cards           | 6   | 卡片                        |\n| Cursors         | 2   | 鼠标悬浮效果                    |\n| Device Mocks    | 2   | 模拟 iphone 界面，会加载 url 实际内容 |\n| Input And Forms | 3   | 表单                        |\n| Miscellaneous   | 25  | 一些特定的场景的动画效果              |\n| Special Effects | 10  | 特殊动画效果                    |\n| Text Animations | 22  | 文字动画效果                    |\n| Visualization   | 13  | 3D效果                      |\n### 部分效果图\n\n注意：大部分都是带动画的，此处只是演示静态图\n\n**special effects**\n\n![](https://img.zzao.club/article/202507171148723.png)\n\n**backgrounds**\n\n![](https://img.zzao.club/article/202507171148725.png)\n\n**buttons**\n\n![](https://img.zzao.club/article/202507171148726.png)\n\n**Cards 3D Effect**\n\n![](https://img.zzao.club/article/202507171148727.gif)\n\n**Lens**\n\n![](https://img.zzao.club/article/202507171148728.gif)\n\n![](https://img.zzao.club/article/202507171148729.gif)\n\n![](https://img.zzao.club/article/202507171148730.gif)\n### 收费组件\n\n地址： https://pro.inspira-ui.com/\n\n一开始这个库是没有收费组件的，全部免费，现在多出了几个收费组件（inspira-ui Pro）。\n\n- Inspira UI Pro Component Pack 2 @ $25\n- Inspira UI Pro Components Pack @ $15\n- Inspiria - SaaS Landing Page Template @ $49\n\n前两个是一些拥有特殊的交互效果的组件，第三个是模板\n\n**_吐槽一下：我喜欢交互丝滑的动效，但很多组件动画过于复杂，已经影响了实用性，可能只适合于炫技。_**\n### 依赖情况\n\n组件不同程度的依赖了以下几个库\n\n- gsap\n- tailwindcss v4\n- threejs\n- motion-v\n- @vueuse/core\n\n### 集成到项目\n\n同 shadcn/vue 的集成项目，门槛很低。\n\n- **支持复制粘贴使用**\n- **支持 Inspira 的 Cli 工具安装**\n\n\n##  vue-bits\n\n官方地址：`https://vue-bits.dev/`\n\nGithub：\n- star: `296`\n- MIT\n\n完全兼容 `Nuxt` 和 `Vue`\n\n虽然这个库看起来 `star` 很少，但它和 `react-bits` 是同一个作者`，react-bits` 的 star 是 `18.4k`\n\n### 组件统计（69 个）\n\n| 类型              | 个数  | 说明                |\n| --------------- | --- | ----------------- |\n| Text Animations | 19  | 文字动画效果            |\n| Animations      | 16  | 动画效果，可以包裹子组件      |\n| Components      | 17  | 常用的组件，如轮播图、瀑布流、相册 |\n| Backgrounds     | 17  | 动态背景效果            |\n### 部分效果图\n\n**components**\n\n![](https://img.zzao.club/article/202507171148731.png)\n**text animations**\n\n![](https://img.zzao.club/article/202507171148732.png)\n\n**Pixel Transition**\n\n![](https://img.zzao.club/article/202507171148733.gif)\n\n**Click Spark**\n\n![](https://img.zzao.club/article/202507171148734.gif)\n\n**Stack**\n\n![](https://img.zzao.club/article/202507171148735.gif)\n\n### 收费组件\n\n无\n\n### 依赖情况\n\n后两个库主要是支持 `Backgrounds` 这一类别的动画效果\n\n- gsap\n- motion-v\n- ogl\n- three\n- postprocessing\n\n## 集成到项目\n\n同 shadcn/vue 的集成项目，门槛很低。\n\n- 支持复制粘贴直接使用\n- 支持 Cli \n\n## 总结\n\n**组件数量上** `Inspira` 胜过 `Vue Bits` 一头\n\n但 `Inspira` 的分类的命名非常不清晰，让人眼花缭乱，容易劝退。 `Vue Bits` 可以清晰快速的找到自己想要的组件。\n\n依赖情况上是差不的，但还是因为分类原因。`Vue Bits` 显得更加清晰一些，如果不用 Backgrounds，那绝大部分只需要 `gsap` 和 `motion-v`，极个别需要 `ogl`\n\n集成到项目中同样轻松！\n\n不知道是否是文档页面风格的原因，`Vue Bits` 给我的感觉更加简洁和克制，`Inspira` 更加花哨。\n\n把组件整体浏览下来也感觉 `Vue Bits` 似乎可用的组件更多一些（虽然总体数量更少）\n\n不知道你怎么看？\n\n----\n\n以上就是两个组件库的整体情况了！\n\n不得不说，有了 `Nuxt` 对 `Vue` 的包装，大大提升了开发体验。基础组件库又有 `shadcn` 这样全面的选手。再加上 `Vue Bits` 或者 `Inspira` 这种针对于动画效果的组件库。\n\n再也不用担心页面过于粗糙啦！\n\n欢迎访问我的[个人博客](https://zzao.club)，里面有更多 Nuxt 最新实战内容 🙌 🙌 🙌",{"title":5,"description":13},"post/nuxt/ui/two-top-class-front-end-ui-components-repo",[77,685,686],"Vue3","组件库","dLHObUJrEExk0sNzzfhOsdMNRV9U35h2_3ASiAnQNIA",[689,693],{"title":690,"path":691,"stem":692},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":694,"path":695,"stem":696},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005085643]