整合樞紐主視覺｜免費 React 元件

整合服務圖示網格環繞中央產品圖示，光束沿連線依序流向中心，hover 某個服務時點亮它的那條連線。

首頁主視覺區塊：上方置中的小標、標題、說明與兩顆 CTA，下方是一面整合服務圖示網格，中央格放你的產品圖示（較大、強調色外框與柔光）。每個服務格都以平滑曲線連到中央，光束沿連線依序流向中心（或反向送出），中央圖示隨光束節奏輕微呼吸。滑鼠移到某個服務（或以鍵盤聚焦）時，那條連線改為強調色實線、光束加速，其餘光束淡出。網格大小依服務數量自動挑選（3×3、5×3、7×3、7×5…），中央格永遠在正中間。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add integration-hub-hero

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

光束方向beamDirection

光束週期（秒）beam

2.4

顯示服務名稱showLabels

進場時長（ms）duration

600

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<IntegrationHubHero/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/integration-hub-hero.json

或在 components.json 設定 registries 後，改用 @webberui/integration-hub-hero 安裝。

使用

import { Cloud, CreditCard, Database, Mail } from "lucide-react";
import { IntegrationHubHero } from "@/components/ui/integration-hub-hero";

<IntegrationHubHero
  eyebrow="接點雲 · 40+ 種整合"
  title="把每一套工具，接到同一個地方"
  subtitle="資料、收款、通知與排程自動串在一起。"
  primaryAction={{ label: "免費開始", href: "/signup" }}
  secondaryAction={{ label: "瀏覽整合清單", href: "/integrations" }}
  centerLabel="接點雲"
  integrations={[
    { label: "雲庫資料", icon: Database },
    { label: "信鴿郵件", icon: Mail },
    { label: "收款站", icon: CreditCard },
    { label: "雲端倉", icon: Cloud },
    // 8 個以內排成 3×3，14 個以內排成 5×3
  ]}
/>

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）
`eyebrow`	`ReactNode`	—	標題上方的小標
`subtitle`	`ReactNode`	—	標題下方的說明文字
`primaryAction`	`IntegrationHubHeroAction`	—	主要按鈕，背景使用強調色
`secondaryAction`	`IntegrationHubHeroAction`	—	次要按鈕，外框樣式
`as`	`"h1" \| "h2"`	`"h1"`	標題層級
`minHeight`	`number`	`560`	區塊最小高度（px）
`integrations`	`IntegrationHubHeroItem[]`	14 個內建虛構服務	整合服務清單；網格大小依數量自動決定
`centerIcon`	`ComponentType`	`Layers`	中央產品圖示
`centerLabel`	`string`	`"你的產品"`	中央產品名稱（無障礙名稱）
`beamDirection`	`"in" \| "out"`	`"in"`	光束由服務流向中央（`in`）或由中央送出（`out`）
`showLabels`	`boolean`	`false`	永遠在圖示下方顯示名稱；關閉時只在 hover／focus 以 tooltip 顯示
`activeIndex`	`number \| null`	—	受控：點亮的服務索引
`defaultActiveIndex`	`number \| null`	`null`	非受控：初始點亮的服務索引
`onActiveIndexChange`	`(index: number \| null) => void`	—	點亮的服務改變時呼叫
`onIntegrationClick`	`(item, index) => void`	—	點擊服務格；提供時服務格渲染為 `button`
`className`	`string`	—	併入根 `section` 的 class

IntegrationHubHeroItem

欄位	型別	預設值	說明
`label`	`string`	—	服務名稱，也是 tooltip 與無障礙名稱
`icon`	`ComponentType`	—	服務圖示（lucide 圖示或任何接受 `className` 的元件）；省略時顯示名稱首字

IntegrationHubHeroAction

欄位	型別	預設值	說明
`label`	`string`	—	按鈕文字
`href`	`string`	—	提供時渲染為 `a` 連結，否則為 `type="button"`
`onClick`	`() => void`	—	點擊回呼

細節

連線是一層覆蓋在網格底下的 SVG：以 ResizeObserver 量測每個格子中心，從服務格到中央格畫一條水平進出的 S 形曲線，版面改變時重算。
光束是沿連線方向掃過的 linearGradient，長度約連線的 20%，週期讀 --wb-integration-hub-hero-beam（預設 2.4s，元件掛載時讀取），依索引平均錯開相位，讓光束輪流抵達中心；hover 中的那條加速為一半週期。
中央圖示以同一個週期做 1 → 1.05 → 1 的呼吸縮放。
進場：小標、標題、說明、CTA 依序上移 16px 並淡入，間隔 80ms，時長 --wb-integration-hub-hero-duration（預設 600ms，緩動 cubic-bezier(0.22, 1, 0.36, 1)）；網格格子由中央一圈圈往外淡入，每圈間隔 40ms，連線在格子到位後描繪，之後光束才開跑。
強調色：--wb-integration-hub-hero-accent（預設亮色 #0d9488、暗色 #2dd4bf），用於小標、主按鈕、中央外框與柔光、光束與點亮的連線。
服務數量超過網格容量時會自動放大網格；多出的格子留空。

可及性

根元素是 section，以 aria-labelledby 指向標題；標題層級由 as 決定。
網格是 role="list" 的 ul，每個服務格與中央格都是帶 aria-label 的 li；空白格與連線 SVG 標記 aria-hidden。
提供 onIntegrationClick 時服務格是 type="button"，可用 Tab 聚焦，聚焦時同樣點亮連線，並有 focus-visible 外框；未提供時服務格不可聚焦，避免在主視覺塞入大量無作用的 Tab 停駐點。
CTA 是 a 或 type="button"，有清楚的 focus-visible 外框。
系統開啟「減少動態效果」時，光束與中央呼吸全部停止、連線直接呈現（不描繪），只留靜態構圖；進場改為 150ms 淡入，此設定在首次繪製即以 CSS 媒體查詢生效。

整合樞紐主視覺

把這個效果裝進你的專案

本頁目錄