F25▸B006▸framer-motion

Dot Pattern Background

點陣背景 + 游標 mask

難度 ★★★★★標籤背景 · dots · mask · hover2 min read

效果簡述

整面點陣背景，預設淡入暗色，跟著滑鼠位置開一個圓形「窗口」露出鮮明點陣。Magic UI 的 dot-pattern 變體，比純 spotlight 更技術感。

點間距 16px · hover 互動

▸ 預設|黑底白點

Claude Code Prompt

💬 Claude Code Prompt

參考：B006 dot pattern + mask
技術：radial-gradient 點陣 + mask 跟游標

具體行為:
- 容器 background: radial-gradient(circle, accent 1px, transparent 1px)
- background-size: 16px 16px → 形成點陣
- mask-image: radial-gradient(circle 140px at var(--mx) var(--my), #000 30%, transparent 70%)
- onMouseMove 更新 --mx / --my（用 setProperty，別 setState）

限制：
- mask radius 100~180px 最自然
- 點大小 1~2px、間距 14~20px
- 跟其他背景動畫疊時很容易看不見

完整程式碼

DotPattern.tsx

'use client'

export function DotPattern() {
function onMove(e: React.MouseEvent<HTMLDivElement>) {
  const r = e.currentTarget.getBoundingClientRect()
  e.currentTarget.style.setProperty('--mx', ((e.clientX - r.left) / r.width) * 100 + '%')
  e.currentTarget.style.setProperty('--my', ((e.clientY - r.top) / r.height) * 100 + '%')
}
return (
  <div
    onMouseMove={onMove}
    className="relative h-44 overflow-hidden rounded-xl border"
    style={{
      backgroundImage: 'radial-gradient(circle, rgba(251,146,60,0.4) 1px, transparent 1px)',
      backgroundSize: '16px 16px',
      WebkitMaskImage: 'radial-gradient(circle 140px at var(--mx) var(--my), #000 30%, transparent 70%)',
      maskImage: 'radial-gradient(circle 140px at var(--mx) var(--my), #000 30%, transparent 70%)',
    }}
  />
)
}

何時用

✅ Hero 區裝飾背景
✅ 技術 / 開發者向產品（點陣帶程式感）
✅ Feature card 背景

何時別用

❌ 行動為主受眾（沒 hover）
❌ 內容區（背景搶焦點）
❌ 高對比度需求（點陣干擾）

我踩過的坑

setState 會 lag：每次 mousemove setState 整個 component re-render。用 style.setProperty 直接寫 DOM 變數。
mask radius 過小看起來像「鑽孔」：120px 起跳比較柔。
mobile fallback：手機可以給一個固定 mask（中心位置）或直接把 mask 拿掉露出完整點陣。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋