Interaction · CSS

研究 Magic UI 的 Border Beam 是怎么实现的,并把它玩出几种用法: agent thinking、CTA 召唤、配色画廊、以及与 conic-gradient 方案的对比。

CSS Motion Path · Mask Trick

Border Beam

一道光沿着卡片描边匀速绕行。Magic UI 同款实现:offset-path+mask-composite

方案对比 · 左右镜像
offset-path

光斑方块沿圆角矩形路径平移;size 同时控制方块大小和路径圆角。

Playground
Drag the controls
Dual beams
Agent · Thinking state
Reasoning about your repo
Indexing 142 files · resolving call graph · drafting an edit plan…
Hover to summon · CTA Buttons

指针进入按钮才唤出 beam。比纯阴影/缩放更显"召唤"。

Color presets
Magic
Default
Aurora
Cyan / Cobalt
Lava
Hot pink → orange
Mint
Subtle, calm
Building · 87%
Indexing
conic-gradient

整圈渐变绕中心旋转;调节楔形跨度和头部 fade,控制彗星形状。

Playground
Drag the controls
Agent · Thinking state
Reasoning about your repo
Indexing 142 files · resolving call graph · drafting an edit plan…
Hover to summon · CTA Buttons

指针进入按钮才唤出 beam。比纯阴影/缩放更显"召唤"。

Color presets
Magic
Default
Aurora
Cyan / Cobalt
Lava
Hot pink → orange
Mint
Subtle, calm
Building · 87%
Indexing
Conic gradient · 更多用法
Connecting to network
三个亮点等距 120° 分布,3.2 秒一圈匀速旋转。
Building · auto progress
conic 角度直接 = progress·3.6°,从 12 点钟方向顺时针填充。
Aurora · Holographic edge
连续色相 conic,缓慢旋转。无亮点、整圈都在流光。
Counter-rotating
两层 conic 反向旋转叠加,亮弧周期性相向交汇。
Downloading model · 8 MB/s
Live · streaming