F18▸B002▸framer-motion

Spotlight

游標光暈

難度 ★★★★★標籤 hover · 光暈 · radial-gradient2 min read

效果簡述

卡片上有一個跟著滑鼠的光暈，把背景照亮。Vercel、Linear 都很愛這招。用 radial-gradient + CSS variable 就好，不要重渲染整個 element。

滑鼠移過來看光暈

▸ 預設|圓形光暈跟隨滑鼠

Claude Code Prompt

💬 Claude Code Prompt

參考：B002 spotlight
技術：CSS variable + onMouseMove 更新 --mx / --my

具體行為:
- onMouseMove: 算 mouse 相對 rect 的 % 位置
- e.currentTarget.style.setProperty('--mx', x + '%')
- e.currentTarget.style.setProperty('--my', y + '%')
- background: radial-gradient(400px circle at var(--mx) var(--my), rgba(...,0.25), transparent 60%)
- 不要 setState，會 re-render

限制：
- 光暈大小 300~500px
- 顏色透明度 0.15 ~ 0.3
- 一頁 1 ~ 2 個夠（變多就廉價）

完整程式碼

Spotlight.tsx

'use client'

export function Spotlight() {
function onMove(e: React.MouseEvent<HTMLDivElement>) {
  const r = e.currentTarget.getBoundingClientRect()
  const x = ((e.clientX - r.left) / r.width) * 100
  const y = ((e.clientY - r.top) / r.height) * 100
  e.currentTarget.style.setProperty('--mx', x + '%')
  e.currentTarget.style.setProperty('--my', y + '%')
}

return (
  <div
    onMouseMove={onMove}
    style={{
      background:
        'radial-gradient(400px circle at var(--mx) var(--my), rgba(194,65,12,0.25), transparent 60%)',
    }}
    className="relative flex h-44 w-full max-w-md items-center justify-center rounded-lg border bg-card"
  >
    <p>滑鼠移過來看光暈</p>
  </div>
)
}

何時用

✅ Feature card grid（hover 那張會發光）
✅ Pricing 卡的「主推」方案
✅ Hero CTA 區的背景陪襯

何時別用

❌ 行動裝置為主（沒 hover 就沒效果）
❌ 一面都是 spotlight 卡片（眼花）
❌ 嚴肅內容（文件、後台）

我踩過的坑

用 useState 會重 render：每次 mousemove 都 setState 整個元件 re-render，卡到爆。改 CSS variable 直接寫 DOM 屬性。
光暈顏色太實：alpha 別超過 0.3，會像探照燈。
沒 fallback 手機看不到：可以加靜態的 radial-gradient 作為預設值，hover 時才開始跟。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋