背景
半色調背景
連續半色調點陣背景 React 元件：點的大小隨捲動改變密度，游標附近的點放大，純 CSS 漸層繪製不需圖片。
滿版的印刷網點底紋。點陣以 CSS radial-gradient 重複鋪滿，不需要任何圖片；第二層 mask-image 做出單側由密到疏的明暗漸層，像印刷的網點。捲動時點半徑從 minDot 平滑長到 maxDot，游標附近另有一層更大的點以圓形遮罩浮現。內容以 children 疊在網點上層。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add halftone-backgroundPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
14
4
140
編輯中的呼叫預設屬性
<HalftoneBackground/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/halftone-background.json或在 components.json 設定 registries 後，改用 @webberui/halftone-background 安裝。
使用
import { HalftoneBackground } from "@/components/ui/halftone-background";
<HalftoneBackground
direction="radial"
className="min-h-[480px] text-neutral-900/15 dark:text-white/15"
>
<section className="flex min-h-[480px] items-center justify-center">
<h1 className="text-4xl font-semibold">印刷質感，一路延伸</h1>
</section>
</HalftoneBackground>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
color | string | "currentColor" | 網點顏色；預設 currentColor，搭配根元素的 text-neutral-900/10 dark:text-white/15 隨主題切換 |
cell | number | 14 | 網點格距（px），每一格放一個點 |
minDot | number | 1 | 捲動起點的點半徑（px） |
maxDot | number | 4 | 捲動終點的點半徑（px）；游標層的點半徑為此值的 1.6 倍 |
direction | "top" | "bottom" | "radial" | "radial" | 明暗漸層方向：top 上密下疏、bottom 下密上疏、radial 中心密四周疏 |
scrollDriven | boolean | true | 是否讓點半徑隨捲動進度在 minDot→maxDot 之間變化 |
cursor | boolean | true | 是否在游標附近顯示放大的網點 |
cursorRadius | number | 140 | 游標放大區的半徑（px） |
angle | number | 0 | 點陣旋轉角度（度），對應印刷的網點角 |
scrollContainer | React.RefObject<HTMLElement | null> | — | 指定捲動容器；提供時改以該容器的整體捲動進度（0→1）驅動點半徑，未提供時追蹤元件本身在視窗中的位置 |
children | React.ReactNode | — | 疊在網點上層的內容 |
className | string | — | 透傳到最外層容器 |
細節
- 純 CSS 繪製：主層是
radial-gradient(circle, var(--wb-halftone-color) calc(var(--wb-halftone-dot) * 1px), transparent …)，background-size為var(--wb-halftone-cell)；不用 canvas、不載入圖片。 - 捲動驅動：
useScroll追蹤元件從進入視窗底部到離開視窗頂部的進度（offset: ["start end", "end start"]），映射成點半徑後經 spring（stiffness 120、damping 30）平滑，寫進--wb-halftone-dot。放在固定高的捲動區裡時傳scrollContainer。 - 游標層：同一套點陣、點半徑為
maxDot × 1.6，以mask-image: radial-gradient(circle var(--wb-halftone-radius) at var(--mx) var(--my), …)只在游標周圍顯示；pointermove以 rAF 節流更新座標，離開時半徑 spring 收回 0。 - 網點角：
angle不為 0 時，點陣放在一個邊長為「寬＋高」的子層再旋轉，任何角度都能蓋滿容器。 - 可覆寫的 CSS 變數：
--wb-halftone-color、--wb-halftone-cell（預設 14px）、--wb-halftone-dot、--wb-halftone-radius（預設 140px）、--wb-halftone-ease-duration（游標層淡入淡出，預設 400ms）。
可及性
- 兩層網點都是純裝飾，設定
aria-hidden="true"與pointer-events-none，不影響上層內容的點擊與朗讀。 - 觸控裝置（
pointer: coarse）沒有懸停概念，自動關閉游標層。 - 使用者系統開啟「減少動態效果」時，點半徑固定在中間密度（
minDot與maxDot的平均），不隨捲動與游標變化。