漂浮標誌主視覺｜免費 React 元件

置中標題背後散落一群合作夥伴符號緩慢漂移，各自不同速度與方向，游標移動時產生輕微視差。

置中的標題、副標與 CTA 背後，鋪著一層虛構合作方標記（圓 + 字母、三角、波紋或純文字字標）。每個標記依索引雜湊決定位置、漂移幅度（12–40px）、週期（18–36 秒）與旋轉（±6°），沿小橢圓緩慢來回；游標在區塊內移動時，整層標記依各自深度做 ±12px 視差。漂移是純 CSS transform，標題區中央 40% 寬的範圍內不會放標記。

把這個效果裝進你的專案

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

npx webberui@latest add drifting-logos-hero

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

Playground

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

標記數量density

游標視差parallax

漂移速度倍率speed

進場時長（ms）duration

600

標題title

import * as React from "react";

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

編輯中的呼叫預設屬性

<DriftingLogosHero/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/drifting-logos-hero.json

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

使用

import { DriftingLogosHero } from "@/components/ui/drifting-logos-hero";

<DriftingLogosHero
  eyebrow="已有 120+ 個團隊導入"
  title="把出貨流程交給一張看板"
  subtitle="訂單、倉儲、配送狀態集中在同一個畫面。"
  primaryAction={{ label: "免費試用", href: "/signup" }}
  secondaryAction={{ label: "看客戶案例", href: "/customers" }}
  marks={[
    { label: "北辰物流" },
    { label: "Orbis", shape: "circle" },
    { label: "Peakline", shape: "triangle" },
    { label: "潮聲音樂", shape: "wave" },
  ]}
  density={16}
/>

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）
`eyebrow`	`ReactNode`	—	標題上方的小標，以強調色顯示
`subtitle`	`ReactNode`	—	標題下方的副標
`primaryAction`	`DriftingLogosHeroAction`	—	主要 CTA，背景為強調色
`secondaryAction`	`DriftingLogosHeroAction`	—	次要 CTA，外框樣式
`as`	`"h1" \| "h2"`	`"h1"`	標題層級；頁面已有 h1 時改用 `"h2"`
`minHeight`	`number`	`560`	區塊最小高度（px）
`marks`	`DriftingLogo[]`	12 個虛構標記	背景漂移的合作方標記；數量少於 `density` 時循環使用
`density`	`number`	`12`	背景標記數量，上限 24
`parallax`	`boolean`	`true`	游標在區塊內移動時，標記層依深度偏移 ±12px
`speed`	`number`	—	漂移速度倍率，寫入 `--wb-drifting-logos-hero-speed`；越大越快，未提供時沿用 CSS 變數（預設 1）
`duration`	`number`	—	進場動畫時長（ms），寫入 `--wb-drifting-logos-hero-duration`；未提供時沿用 CSS 變數（預設 600）
`announceMarks`	`boolean`	`false`	以 sr-only 清單向螢幕閱讀器宣告合作方名稱
`marksLabel`	`string`	`"合作夥伴"`	sr-only 清單的名稱
`className`	`string`	—	併入根 `section`

DriftingLogo

欄位	型別	預設值	說明
`label`	`string`	—	標記文字，也是 sr-only 清單朗讀的名稱
`shape`	`"circle" \| "triangle" \| "wave" \| "text"`	`"text"`	標記外形；`circle` 會把 label 的第一個字放進圓圈

DriftingLogosHeroAction

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

細節

位置決定性分佈：8 × 5 的格點去掉標題區後，依索引雜湊挑選並在格內抖動 ±30%，SSR 與 client 的構圖一模一樣，不會有 hydration 落差。
漂移用內嵌的 CSS @keyframes 沿橢圓 alternate 來回，負延遲讓每個標記從路徑不同位置起跑；週期除以 --wb-drifting-logos-hero-speed。
視差用 useMotionValue + useSpring（stiffness 120、damping 20），只回應滑鼠與觸控筆；觸控拖曳不觸發，避免標記跳動。
滑過單一標記時不透明度升到 100%、顏色轉為強調色（200ms）。
可覆寫的 CSS 變數：--wb-drifting-logos-hero-accent（預設 #0d9488，深色模式 #2dd4bf）、--wb-drifting-logos-hero-speed、--wb-drifting-logos-hero-duration。
進場依序：eyebrow、標題、副標、CTA 由下往上 16px 淡入，每段錯開 80ms，緩動 cubic-bezier(0.22,1,0.36,1)。

可及性

根元素是 <section aria-labelledby>，指向標題的 useId。
標記層 aria-hidden，屬純裝飾；需要宣告合作方時開 announceMarks，以 sr-only 清單呈現。
CTA 是 <a> 或 type="button" 的按鈕，有 focus-visible 外框。
系統開啟「減少動態效果」時，所有漂移停止、視差關閉，呈現靜態構圖；進場改為 150ms 淡入且不錯開。

漂浮標誌主視覺

把這個效果裝進你的專案

本頁目錄