Trae官网炫酷特效与vue-bits的使用

一、Trae官网效果

Trae国际版地址：https://www.trae.ai/

顶部背景：

来源于vue-bits Pixel Blast 组件

底部logo：

来源于vue-bits Grid Distortion组件

闲暇之时看到Trae官网的页面效果做的十分炫酷，研究了一番，原来使用的是开源项目vue-bits中的效果。

二、vue-bits

2.1简介

An open source collection of animated, interactive & fully customizable Vue components for building stunning, memorable websites.

一个开源的动画，互动和完全可定制的Vue组件库，用于构建令人惊叹的，令人难忘的网站。

Vue Bits 是一个专为 Vue.js 设计的轻量级动画组件库，提供了丰富的高性能动画效果，适用于文本动画、页面过渡和微交互等场景。它的特点是开箱即用、性能优越且高度可定制，能够帮助开发者快速实现专业级的交互动画。

2.2地址

vue-bits github仓库地址：

https://github.com/DavidHDev/vue-bits

vue-bits 官方文档地址：

https://vue-bits.dev/

三、vue-bits的使用

总结一下就是安装jsrepo工具，使用工具将vue-bits中的vue组件直接下载到项目中，传参调整使用即可。

3.1 安装 jsrepo

npm i -g jsrepo

该工具可以帮助我们下载对应的组件。

3.2 安装部分组件

根据官方文档提供的命令行可以迅速的将想要的组件安装到我们的项目中。

例如在我们项目目录下的终端上执行：

npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Silk

四、实例

4.1 一个终端风格的登陆页面的实现

查看官方文档，选取组件效果，得到命令:

npx jsrepo add https://vue-bits.dev/ui/Backgrounds/FaultyTerminal

项目根目录下终端输入命令

选择并输入下载的组件要存放的路径

这样我们选取的vue组件就被下载到了项目中

直接在我们的登陆页面调用并且传递参数调整细节即可(可以参考官方文档进行调整)

 <div class="login-page"><div class="terminal-background"><FaultyTerminal:scale="1.5"  :grid-mul="[2, 1]"  :digit-size="1.5"  :time-scale="0.3" :scanline-intensity="0.3"  :glitch-amount="1"  :flicker-amount="1"  :noise-amp="1"  :curvature="0.2"  tint="#ffffff"  :mouse-react="true"  :mouse-strength="0.2"  :page-load-animation="true"  :brightness="0.8"  style="width: 100%; height: 100%;"  /></div>
</div>

成果展示：