动效特效 UI 设计模式

一道光沿着容器描边循环跑动的边框特效。Aceternity UI / Magic UI 的招牌组件，比静态渐变边框更有「正在运行」的暗示。

一个亮点沿按钮轮廓跑圈的按钮。Aceternity UI 的代表组件，比渐变按钮更有科技感，常用于首屏主 CTA。

整圈彩虹渐变缓慢自转的描边，比 Border Beam 更「厚」更饱满，是 Magic UI 的 shimmer 系命名之一。

多条沿贝塞尔曲线流动的光束，铺在深色底上做首屏/区块背景。Aceternity UI 命名，是深色官网最常见的「科技底纹」。

一个发光圆点沿垂直时间轴自上而下跑动，拖出光束。Aceternity UI 用它做滚动进度叙事，本质是时间轴的动态版本。

多条斜向划过的流星，带 56px 左右的拖尾。Magic UI / Aceternity UI 均有同名组件，是深色首屏的常客。

底色星空 + 几颗带短线拖尾缓慢划过的星星的组合，比 Meteors 更克制，像真实夜空。Aceternity UI 的 Stars Background 变体。

顶部一根发光的横条，向下打出锥形光晕，像天花板射灯打亮下方的标题。Aceternity UI 的 Lamp 组件，常用作区块分隔头。

从画面顶部中央向下打来的柔光，把标题像舞台主角一样照亮。Aceternity UI 的 Spotlight 与 Magic UI 的 Backlight 属于同一族。

零散分布的星形符号依次放大缩小 + 明暗变化，给深色底加「灵气」。用于点缀标题或卡片角落。

同心圆环一边旋转一边向中心收缩消失，形成「被吸进去」的隧道错觉。加载页与上线页的常见主角。

向地平线汇聚并持续向前滚动的网格，80 年代合成器浪潮风格。Magic UI 有同名组件，配合霓虹色最出效果。

由小方格组成的网格，格子依次点亮形成对角波浪。Magic UI / Uiverse 均有同族组件，鼠标跟随版也常见。

一道斜向的白色高光带周期性扫过深色表面，像金属反光。Magic UI 的 glare-hover、Aceternity 的 Glare Card 都是这一族。

点击位置向外迸发一圈小粒子。ReactBits 的 ClickSpark 把「点击被收到」这件事从颜色变化升级成了事件感。

卡片右下角翘起并露出背面阴影，像一张贴纸被掀起一角。ReactBits 的 Sticker Peel 用 3D transform 与阴影深度实现。

用一片小方格按顺序渐次显隐，完成两个画面之间的像素化切换。ReactBits / Aceternity 都有同族组件。

从中心一圈圈向外扩散的同心圆环。Magic UI 的 Ripple 组件常放在标题背后做「信号发出」的隐喻。

两排卡片在透视倾斜的平面上反向滚动，做出立体纵深。Aceternity UI 用它展示客户评价或合作方。

技术栈图标分布在一个虚拟球面上缓慢自转，Magic UI 的 Icon Cloud 是这一族最出名的实现（多为 Canvas）。

跟随指针移动的圆形放大镜，圆内显示同一图像被放大的局部。Magic UI 有 Lens 组件，常用于产品截图细节展示。

指针悬停在链接上时，浮出一张带缩略图与摘要的预览卡。Aceternity UI 的 Link Preview，本质是 hover card 的一种。

在同一图层上从清晰过渡到模糊，像镜头景深。Magic UI 的 Progressive Blur，比纯色渐变遮罩更自然、更有层次。

新条目从上方滑入、旧条目向下淡出，循环往复。Magic UI 的 Animated List，首屏「实时动态」区块的标准做法。