Team + Logo Wall

團隊成員 stagger 進場網格，搭配無限捲動的客戶 logo 跑馬牆，適合作為關於頁或首頁的信任區塊。

載入預覽⋯

Playground

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

主標題title

團隊網格欄數columns

跑馬燈速度（px/秒）marqueeSpeed

跑馬燈方向marqueeDirection

滑入時暫停跑馬燈pauseOnHover

<TeamLogoWall />

安裝

npx shadcn@latest add https://webberui.com/r/team-logo-wall.json

或在 components.json 設定 registries 後，改用 @webberui/team-logo-wall 安裝。

安裝依賴後，從 registry JSON（/r/team-logo-wall.json 的 files[0].content）複製 team-logo-wall.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

import {
  TeamLogoWall,
  type TeamMemberData,
  type LogoData,
} from "@/components/ui/team-logo-wall";

const members: TeamMemberData[] = [
  { name: "Ada Lovelace", role: "創辦人 / CEO", avatar: "/team/ada.jpg" },
  { name: "Alan Turing", role: "技術長" },
];

const logos: LogoData[] = [
  { name: "Vercel", src: "/logos/vercel.svg", href: "https://vercel.com" },
  { name: "Linear", src: "/logos/linear.svg" },
];

<TeamLogoWall
  members={members}
  logos={logos}
  eyebrow="我們的團隊"
  title="打造動畫優先的介面"
  logosLabel="信任我們的品牌"
/>;

TeamGrid 與 LogoMarquee 也可獨立匯入，單獨使用其中一半：

import { TeamGrid, LogoMarquee } from "@/components/ui/team-logo-wall";

<TeamGrid members={members} columns={3} />
<LogoMarquee logos={logos} speed={30} direction="right" />

Props

`TeamLogoWall`

Prop	型別	預設值	說明
`members`	`TeamMemberData[]`	—	團隊成員資料陣列
`logos`	`LogoData[]`	—	客戶／合作品牌 logo 資料陣列
`eyebrow`	`React.ReactNode`	—	標題上方的小標
`title`	`React.ReactNode`	—	區塊主標題
`description`	`React.ReactNode`	—	主標題下方的描述文字
`logosLabel`	`React.ReactNode`	—	logo 跑馬牆上方的說明文字
`columns`	`number`	`4`	團隊網格欄數（2–6，低斷點自動退化）
`marqueeSpeed`	`number`	`40`	logo 跑馬牆每秒位移（px）
`marqueeDirection`	`"left" \| "right"`	`"left"`	跑馬牆行進方向
`pauseOnHover`	`boolean`	`true`	滑鼠移入或鍵盤聚焦時暫停跑馬牆
`label`	`string`	`"團隊與合作品牌"`	整體區域的無障礙標籤

`TeamGrid`

Prop	型別	預設值	說明
`members`	`TeamMemberData[]`	—	團隊成員資料陣列
`columns`	`number`	`4`	欄數（2–6，低斷點自動退化）
`stagger`	`number`	`0.08`	每張卡片進場間隔（秒）
`delay`	`number`	`0`	進場前延遲（秒）
`once`	`boolean`	`true`	只在第一次進入視口時播放
`label`	`string`	`"團隊成員"`	整體區域的無障礙標籤

`LogoMarquee`

Prop	型別	預設值	說明
`logos`	`LogoData[]`	—	客戶 logo 資料陣列
`speed`	`number`	`40`	每秒位移量（px）
`direction`	`"left" \| "right"`	`"left"`	行進方向
`gap`	`number`	`48`	logo 間距（px）
`pauseOnHover`	`boolean`	`true`	滑鼠移入或鍵盤聚焦時暫停
`label`	`string`	`"合作品牌"`	整體區域的無障礙標籤

`TeamMemberData`

欄位	型別	說明
`name`	`string`	成員姓名
`role`	`string`	職稱或角色（可選）
`avatar`	`string`	頭像圖片網址；未提供時顯示姓名首字
`href`	`string`	點擊卡片前往的連結（可選）

`LogoData`

欄位	型別	說明
`name`	`string`	品牌名稱，同時作為 `alt`／無障礙文字
`src`	`string`	logo 圖片網址
`node`	`React.ReactNode`	自訂 logo 節點（例如內嵌 SVG），優先於 `src`
`href`	`string`	點擊時前往的連結（可選）

細節

兩段組合：上半是團隊網格，進入視口時卡片依 stagger 依序淡入上浮；下半是 logo 跑馬牆，以 requestAnimationFrame 平滑無限捲動。
無縫循環：跑馬牆渲染兩份相同內容，量測單份寬度後在 (-distance, 0] 之間循環位移，切換點無感；ResizeObserver 會在容器尺寸變動時重新量測。
兩端淡出：跑馬牆以 mask-image 讓 logo 在左右邊界自然消隱。
logo 灰階：預設以灰階 + 降低不透明度呈現，游標懸停該 logo 時回復彩色與全不透明。
獨立使用：TeamGrid、LogoMarquee、TeamMemberCard 皆可單獨匯入。
調校點：動畫時長以 var(--wb-duration-fast,200ms) 與 var(--wb-ease-out,cubic-bezier(0.22,1,0.36,1)) 為基準，可透過 CSS 變數統一覆寫。

可及性

使用者系統開啟「減少動態效果」時，團隊網格直接靜態呈現（無 stagger），logo 牆改為置中換行排列、不再捲動。
團隊網格為 role="list"、成員卡片為 role="listitem"，並帶區域 aria-label。
跑馬牆的第二份複本標記 aria-hidden，避免輔助科技重複朗讀。
有 href 的成員與 logo 皆為可聚焦連結，帶清楚的 focus-visible 外框；聚焦跑馬牆內連結時（pauseOnHover）會暫停捲動，方便鍵盤操作。
頭像 alt 留空（裝飾性），姓名以文字獨立呈現；logo 圖片的 alt 取自品牌 name。

On this page