F22▸B005▸framer-motion

Border Beam

旋繞邊框光

難度 ★★★★★標籤 border · conic-gradient · mask3 min read

效果簡述

卡片邊框上有一道光在繞圈。Magic UI 的招牌效果。核心是 conic-gradient + mask-composite 把實心漸層挖空只留邊框。

會自轉的邊框

4s · 1.5px

▸ 預設|圓周光環 6s

Claude Code Prompt

💬 Claude Code Prompt

參考：B005 border beam
技術：conic-gradient + CSS mask composite + framer animate CSS variable

具體行為:
- 子層 absolute inset-0
- background: conic-gradient(from var(--a), transparent 0deg 300deg, accent 340deg, dark 360deg)
- mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)
- mask-composite: xor / exclude → 只留邊框
- padding: 1.5px 控制邊框粗細
- framer animate { '--a': '360deg' } 用 CSS var 旋轉

限制：
- mask-composite 需要現代瀏覽器
- conic-gradient 範圍要小（30~60deg）才像「一道光」
- 圓角的話容器跟 mask 一起圓角

完整程式碼

BorderBeam.tsx

'use client'

import { motion } from 'framer-motion'

export function BorderBeam() {
return (
  <div className="relative overflow-hidden rounded-xl border bg-card p-6">
    <motion.div
      aria-hidden
      className="pointer-events-none absolute inset-0 rounded-xl"
      style={{
        background: 'conic-gradient(from var(--a), transparent 0deg 300deg, #fb923c 340deg, #c2410c 360deg)',
        WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
        WebkitMaskComposite: 'xor',
        maskComposite: 'exclude',
        padding: '1.5px',
        ['--a' as any]: '0deg',
      }}
      animate={{ ['--a' as any]: '360deg' }}
      transition={{ duration: 4, ease: 'linear', repeat: Infinity }}
    />
    <div className="relative">內容</div>
  </div>
)
}

何時用

✅ Pricing 主推方案的卡
✅ Feature card「重點」突出
✅ Hero 區小裝飾元素

何時別用

❌ 一頁太多（搶焦點）
❌ 內容需要 print / 截圖（動畫拍不到）
❌ 不支援 mask-composite 的舊瀏覽器

我踩過的坑

WebKit prefix 漏一個就壞：Safari 必須 WebkitMask + WebkitMaskComposite，標準屬性 fallback 給其他瀏覽器。
conic-gradient 用 var(--a) 必須 register：framer-motion 可直接 animate CSS variable，但 CSS 變數預設沒型別。要嘛 @property --a { syntax: '<angle>'; ... }，要嘛直接讓 framer 處理。
padding 控制粗細：1px 太細容易看不見，2px 又太粗。1.5px 是甜蜜點。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋